/*
Template:       metro
Theme Name:     Metro Child
Theme URI:      https://radiustheme.com/demo/wordpress/themes/metro
Author:         RadiusTheme
Author URI:     https://www.radiustheme.com
Description:    Metro is a clean and modern WordPress Theme for Ecommerce and Online Store. This theme comes with all necessary features and pages for a Ecommerce website.
Version:        1.0
Tags:           two-columns, three-columns, left-sidebar, right-sidebar, custom-colors, custom-menu, featured-images, footer-widgets, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, blog
License:        Envato split License
License URI:    https://themeforest.net/licenses/terms/regular
Text Domain:    metro-child
*/
/* ─────────────────────────────────────────────────────────────────────────
   MÓVIL PRIMERO. Todo lo de aquí se escribe primero para 390 px y luego se
   amplía con min-width. El 2026-08-15 el escaparate salió con las obras
   amontonadas en móvil y nadie lo detectó hasta abrir un navegador; desde
   entonces el pequeño va delante.
   ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   UNA SOLA REJILLA EN TODO EL SITIO
   La portada está hecha con Elementor y el resto de las páginas las maqueta
   el tema. Cada uno traía su propia caja de contenido, así que al pasar de la
   portada a cualquier otra página **el contenido saltaba 75 px de lado**.
   Medido en nueve anchuras:

        ancho    tema      Elementor (antes)
         390    x15/360      x0/390
         768    x39/690      x0/768
        1200    x45/1110    x30/1140
        1440    x75/1290   x150/1140
        1920   x315/1290   x390/1140

   No vale con poner 1290 en los ajustes de Elementor: su «Content Width» es
   **un valor fijo** y la caja del tema es un Bootstrap con cinco escalones.
   A 1200 seguiría desalineado por 45 px a cada lado.

   Así que se replican los escalones del tema —540/720/960/1140/1320 menos los
   30 px de relleno del contenedor— y se le dan a Elementor por su propia
   variable, que es como espera recibirlos. Un solo sitio donde tocar si el
   tema cambia su rejilla.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
	--mc-caja: calc(100% - 30px);   /* por debajo de 576 el contenedor es fluido */
}
@media (min-width: 576px)  { :root { --mc-caja: 510px; } }
@media (min-width: 768px)  { :root { --mc-caja: 690px; } }
@media (min-width: 992px)  { :root { --mc-caja: 930px; } }
@media (min-width: 1200px) { :root { --mc-caja: 1110px; } }
@media (min-width: 1400px) { :root { --mc-caja: 1290px; } }

.elementor .e-con { --container-max-width: var(--mc-caja); }

/* Portada ─────────────────────────────────────────────────────────────── */

.mc-hero {
	padding: 3rem 0 2.5rem;
}
.mc-hero h1 {
	margin-bottom: 1rem;
}
.mc-hero .mc-lede {
	max-width: 34em;
	font-size: 1.05rem;
	line-height: 1.7;
}

/* Barra de confianza: en móvil apilada, en cuanto hay sitio en fila. */
.mc-confianza {
	display: grid;
	gap: .75rem 2rem;
	grid-template-columns: 1fr;
	margin: 0;
	padding: 1.5rem 0;
	list-style: none;
	border-top: 1px solid rgba(0,0,0,.09);
	border-bottom: 1px solid rgba(0,0,0,.09);
	font-size: .95rem;
}
.mc-confianza li {
	padding-left: 1.4em;
	position: relative;
}
.mc-confianza li::before {
	content: "·";
	position: absolute;
	left: .3em;
	font-weight: 700;
}

/* Tarjetas de formato y series: una columna en móvil. */
.mc-formatos,
.mc-series {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}
.mc-formato {
	border: 1px solid rgba(0,0,0,.12);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.mc-formato h3 { margin: 0; }
.mc-formato .mc-desde { font-weight: 600; }
.mc-formato .mc-pronto { opacity: .65; }

.mc-serie { display: block; text-decoration: none; }
.mc-serie-img img { width: 100%; height: auto; display: block; }
.mc-serie-nombre { display: block; margin-top: .6rem; font-weight: 600; }
.mc-serie-n { display: block; font-size: .9rem; opacity: .7; }

.mc-vacio { padding: 1.5rem 0; }

/* Categoría sin obra publicada. Va debajo de la cabecera de respaldo, dentro de la caja. */
.mc-vacio-archivo { padding: 2.5rem 0 3.5rem; max-width: 44em; }
.mc-vacio-archivo p { margin: 0 0 .6rem; }
.mc-vacio-archivo p:first-child { font-size: 1.15rem; }
.mc-vacio-archivo p:last-child { margin-bottom: 0; }

/* Dos obras por fila en móvil, también fuera del escaparate ───────────────
   El escaparate lo resuelve ShopBuilder con `column_per_row_mobile`. La
   portada y las páginas de contenido no: usan `[obra_disponible]`, que delega
   en el `[products]` de WooCommerce, y ese pinta las clases de Bootstrap del
   tema, con `col-12` por debajo de 576 px. Una obra por pantalla.

   Con la portada partida en dos rejillas eso se notaba el doble: pasó de
   9.808 px a 12.060 en un móvil de 390. Aquí se igualan las dos vías. */
@media (max-width: 575.98px) {
	.woocommerce .products.row > .product.col-12 {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

/* Páginas sin nada que enseñar: el 404 y la búsqueda sin resultados ───────
   Las dos servían texto del tema en inglés y un solo enlace. Comparten
   maqueta porque comparten trabajo: decir qué ha pasado y ofrecer salida. */
.mc-vacio-pagina { padding: 4rem 0 5rem; max-width: 40em; }
.mc-vacio-sup {
	font-size: .82rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #8a8a8a;
	margin: 0 0 .5rem;
}
.mc-vacio-pagina h1 { margin: 0 0 1rem; }
.mc-vacio-lede { font-size: 1.12rem; line-height: 1.6; margin: 0 0 1.75rem; }
.mc-vacio-busca { margin: 2rem 0 .6rem; color: #6b6b6b; }
.mc-vacio-salidas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
/* ⚠️ `inline-flex` con centrado, y altura de línea propia.
   Los dos botones heredaban alturas de línea distintas —20,8 px el sólido y
   28 px el de línea— y, como son hermanos de un contenedor flex, el más bajo
   se estiraba a la altura del otro. El relleno de arriba lo dejaba clavado
   donde estaba, así que el texto del botón negro quedaba con 15 px por encima
   y 24 por debajo: descentrado 9 px sin que nada en el CSS lo dijera. */
.mc-vacio-salidas a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1.3;
	padding: .85rem 1.6rem;
	text-decoration: none;
	border: 1px solid currentColor;
}
.mc-vacio-salidas a.mc-cta-solida { background: #111; color: #fff; border-color: #111; }
.mc-vacio-pagina .search-form,
.mc-vacio-pagina form { max-width: 30em; }

/* El marco vacío del 404 ──────────────────────────────────────────────────
   Solo en el 404, no en la búsqueda sin resultados: quien no encuentra lo que
   buscaba en el buscador quiere volver a buscar cuanto antes, y una imagen de
   400 px le aleja el formulario. Por eso la maqueta a dos columnas cuelga de
   `.mc-404` y no de `.mc-vacio-pagina`, que comparten las dos páginas.

   En móvil el texto va primero y la imagen debajo: las salidas y el buscador
   tienen que verse sin desplazar. El orden del HTML ya es ese, así que aquí no
   hace falta tocar nada por debajo de 768 px. */
.mc-404-img { margin: 2.5rem 0 0; }
.mc-404-img img { width: 100%; max-width: 320px; height: auto; display: block; }

@media (min-width: 768px) {
	/* `space-between` y no un ancho fijo: las dos columnas suman menos que la caja
	   del sitio, así que sin esto la imagen se quedaba flotando a media página con
	   300 px muertos a su derecha. Ahora el texto arranca donde arranca todo lo
	   demás y la imagen termina donde termina el pie. */
	.mc-404 {
		max-width: none;
		display: grid;
		grid-template-columns: minmax(0, 34em) minmax(0, 24em);
		justify-content: space-between;
		gap: 3.5rem;
		align-items: center;
	}
	.mc-404-img { margin: 0; }
	.mc-404-img img { max-width: none; }
}

/* A partir de tableta, y solo a partir de ahí, varias columnas. */
@media (min-width: 768px) {
	.mc-confianza  { grid-template-columns: repeat(2, 1fr); }
	.mc-formatos   { grid-template-columns: repeat(2, 1fr); }
	.mc-series     { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
	.mc-hero      { padding: 5rem 0 3.5rem; }
	.mc-confianza { grid-template-columns: repeat(4, 1fr); }
}

/* Hero a dos columnas ─────────────────────────────────────────────────────
   En la maqueta el hero es texto a la izquierda e imagen a la derecha. En
   móvil se apila: primero el texto, la imagen debajo. */
.mc-hero-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
	align-items: center;
}
.mc-hero-img img {
	width: 100%;
	height: auto;
	display: block;
}
.mc-hero-txt h1 { margin-top: 0; }

/* Bloque «Artista detrás de la obra» ──────────────────────────────────────
   Misma estructura que el hero y por el mismo motivo: si la foto va en un
   widget de Elementor y el texto en otro, se apilan y el bloque queda con una
   foto de 1024 px de alto y tres líneas debajo. Una rejilla propia dentro de un
   único widget lo resuelve sin depender de cómo Elementor reparta columnas.

   Móvil primero: una sola columna, foto arriba. */
.mc-artista-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
	align-items: center;
}
.mc-artista-img img {
	width: 100%;
	height: auto;
	display: block;
}
.mc-artista-txt h2 { margin-top: 0; }
.mc-artista-txt p:last-child { margin-bottom: 0; }
.mc-hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.mc-hero-cta a {
	display: inline-block;
	padding: .85rem 1.6rem;
	text-decoration: none;
	border: 1px solid currentColor;
}
.mc-hero-cta a.mc-cta-solida {
	background: #111;
	color: #fff;
	border-color: #111;
}

/* Banners de colección ────────────────────────────────────────────────────
   Imagen a sangre con el texto encima abajo a la izquierda, como en la
   maqueta. El degradado garantiza contraste sobre cualquier obra. */
.mc-banners { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.mc-banner {
	position: relative;
	display: block;
	overflow: hidden;
	min-height: 260px;
	text-decoration: none;
	color: #fff;
	background: #ddd;
}
.mc-banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	inset: 0;
}
.mc-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	/* La obra de fondo puede ser casi papel blanco, y un degradado suave no llega al 4,5:1 que
	   pide el texto pequeño: medido, «PIEZA ÚNICA» se quedaba en 2,16:1 sobre el retrato. Se
	   usa un velo que es casi opaco en la franja del texto y se abre hacia arriba, para que la
	   obra siga viéndose en los dos tercios superiores. */
	background: linear-gradient(to top,
		rgba(0,0,0,.88) 0%,
		rgba(0,0,0,.80) 30%,
		rgba(0,0,0,.35) 62%,
		rgba(0,0,0,0) 100%);
}
.mc-banner-txt {
	position: relative;
	z-index: 2;
	padding: 1.75rem 1.5rem 1.5rem;
	/* Refuerzo por si la obra de fondo tiene una zona muy clara justo detrás de una letra. */
	text-shadow: 0 1px 3px rgba(0,0,0,.55);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 260px;
}
.mc-banner-sup { font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.mc-banner-tit { font-size: 1.5rem; line-height: 1.2; margin: .25rem 0 .6rem; }
.mc-banner-linea { width: 42px; height: 2px; background: #fff; }
.mc-banner-pronto { font-size: .85rem; opacity: .85; margin-top: .5rem; }

/* Banda ancha de encargos ─────────────────────────────────────────────── */
/* La banda de encargos ────────────────────────────────────────────────────
   Dos columnas: la obra a un lado y el texto al otro. Móvil primero, así que
   en una sola columna la obra va arriba.

   ⚠️ **Antes la foto iba de fondo, en `position: absolute` y con
   `object-fit: cover`, y el texto encima.** Con la foto que pedía el marcador
   —un interior con la obra pequeña y pared vacía alrededor— habría funcionado.
   Con lo que hay, que es una obra enmarcada ocupando el centro del encuadre,
   no: `cover` le corta el marco y el texto le cae encima. Va contra la premisa
   del proyecto, que dice que la imagen enseña la obra entera, y esa premisa
   vale también para un bloque de la portada.

   Si algún día llega la foto de interior de verdad, esto se revierte a fondo a
   sangre y el texto vuelve encima. */
.mc-banda {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: 1fr;
	align-items: center;
	padding: 2.5rem 1.5rem;
	background: #ececec;
}
.mc-banda-img img {
	width: 100%;
	height: auto;
	display: block;
}

/* Sin foto, la banda se queda en una columna de texto y el marcador va encima,
   apilado, para que se lea todo. */
.mc-banda.mc-sin-foto { padding: 0; background: none; }
.mc-banda.mc-sin-foto .mc-banda-txt { max-width: none; padding: 2rem 1.5rem; background: #f4f2ef; }
.mc-banda-txt { position: relative; z-index: 2; max-width: 32em; }
.mc-banda h2 { margin-top: 0; }
/* El ancla de precio y la fecha de Navidad, las dos cosas que antes solo estaban en
   `/encargos/` y a ocho pantallas de scroll. El precio pesa; la fecha explica por qué. */
.mc-banda-precios { font-weight: 600; }
.mc-banda-nota { font-size: .92rem; color: #5f5f5f; margin-bottom: 0; }

/* Testimonios de clientes — banda de la portada ────────────────────────────
   Prueba social de compra: gente que ya tiene obra suya. Rejilla como la de
   series (una columna en móvil, tres en escritorio). Las frases son literales
   de Norelys, del correo del 2026-09-26; una está en inglés porque el cliente
   es de Miami y traducir un testimonio sería reescribir sus palabras. */
.mc-testimonios {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
	margin-top: 2rem;
}
.mc-testimonio {
	margin: 0;
	padding: 1.75rem;
	background: #f4f2ef;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.mc-testimonio blockquote {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.7;
}
.mc-testimonio blockquote::before {
	content: "\201C";
	display: block;
	font-family: Georgia, serif;
	font-size: 2.5rem;
	line-height: .4;
	color: #111;
	opacity: .3;
}
.mc-testimonio figcaption {
	margin-top: auto;
	font-weight: 600;
	font-size: .92rem;
	color: #5f5f5f;
}
@media (min-width: 768px) {
	.mc-testimonios { grid-template-columns: repeat(3, 1fr); }
}

/* Marcador de imagen pendiente ────────────────────────────────────────────
   Se ve a propósito: si algo entra en producción con esto puesto, canta. */
.mc-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 260px;
	padding: 1.5rem;
	text-align: center;
	background: repeating-linear-gradient(45deg, #f3f1ee, #f3f1ee 12px, #e8e5e0 12px, #e8e5e0 24px);
	border: 1px dashed #b9b3aa;
	color: #6d675e;
	font-size: .9rem;
	line-height: 1.5;
}

@media (min-width: 768px) {
	.mc-banners { grid-template-columns: repeat(2, 1fr); }
	.mc-banner, .mc-banner-txt { min-height: 320px; }
	.mc-banner-tit { font-size: 1.8rem; }
	/* La obra a la izquierda y el texto a la derecha. Menos ancho para la obra
	   que para el texto: aquí lo que tiene que leerse son los precios de encargo
	   y la fecha límite, y la foto está para dar contexto. */
	/* `auto` y no una fracción: con el tope de altura la foto mide 363 px y una
	   columna de `.85fr` le daba 487, así que quedaban 124 px muertos entre la
	   obra y el texto. La columna se ajusta a lo que ocupa la imagen. */
	.mc-banda { grid-template-columns: auto 1fr; gap: 3rem; padding: 3.5rem 3rem; align-items: center; }
	/* La obra de esta banda pasó a ser vertical el 2026-09-21, y sin tope crecía
	   hasta 631 px contra un texto de 430: volvía a sobrar medio bloque de aire a
	   la derecha. El tope la deja a la altura del texto. */
	.mc-banda-img img { max-height: 470px; width: auto; }
}
@media (min-width: 1024px) {
	.mc-hero-grid { grid-template-columns: 1.05fr .95fr; gap: 3rem; }
	/* Foto a la izquierda y texto a la derecha. Menos peso para la foto que en el
	   hero: aquí el bloque cierra la portada y lo que tiene que hacer es llevar a
	   `/sobre-norelys/`, no detener la lectura. */
	.mc-artista-grid { grid-template-columns: .9fr 1.1fr; gap: 3rem; }
	.mc-artista-img img { max-height: 420px; width: auto; }
}

/* Lista de técnicas: se queda como desplegable ────────────────────────────
   En la maqueta de Norelys aparece abierta AL LADO del hero, en su propia
   columna. Aquí no se puede replicar solo con CSS: el `ul` del tema es
   absoluto, así que forzarlo abierto lo superpone encima del hero en vez de
   colocarlo al lado. Para que fuera como la maqueta habría que meter el hero
   dentro de la retícula del tema, que es otra estructura.

   Se deja como desplegable a propósito. Es el patrón que la gente conoce y
   es el correcto en móvil, donde una lista abierta se comería la pantalla
   antes de que se vea una sola obra. */

/* Hero con fondo, como en la maqueta ─────────────────────────────────────
   Allí el lado del texto va sobre gris muy claro y la imagen ocupa su mitad.

   El selector lleva `.elementor-element` delante a propósito: Elementor pinta
   el fondo de sus contenedores con reglas que ganan a una clase suelta, así
   que `.mc-hero { background }` no se aplicaba y el hero salía blanco. */
.mc-hero-txt h1 { margin-top: 0; }
.mc-hero-img img {
	box-shadow: 0 18px 40px -24px rgba(0,0,0,.45);
}


/* Altura del hero ─────────────────────────────────────────────────────────
   La imagen es una obra vertical enmarcada; sin tope, estira el hero a media
   pantalla y empuja la obra disponible fuera del primer vistazo. En la
   maqueta el hero es una banda ancha, no un bloque de pantalla completa. */
.mc-hero-img img {
	max-height: 340px;
	width: auto;
	margin: 0 auto;
}
@media (min-width: 1024px) {
	.mc-hero-img img { max-height: 420px; }
}

/* Hueco entre la cabecera y el hero ───────────────────────────────────────
   El tema pone 80 px de relleno superior en `.content-area`, pensados para
   las páginas que llevan banda de título. La portada no la lleva, así que
   quedaba una franja blanca antes del hero. Solo en la portada: en el resto
   ese respiro hace falta. */
.home .content-area { padding-top: 0; }

/* El aire que Elementor calcula y el tema tira ────────────────────────────
   Elementor guarda el relleno de cada contenedor en `--padding-block-*`, y
   el `elementor.css` del tema —que se encola después— lo anula en el
   contenedor exterior. Medido: la variable valía 96px y el relleno aplicado
   era 0, con las siete secciones pegadas unas a otras.

   Se restaura en el exterior Y se pone a cero el interior: en un contenedor
   «boxed» Elementor aplica el mismo relleno a los dos, así que restaurarlo
   sin más lo duplicaba y dejaba 192px muertos por sección. Eso no es que
   respire, es un agujero. */
.elementor .e-con.e-parent {
	padding-block-start: var(--padding-block-start);
	padding-block-end: var(--padding-block-end);
	/* Y sin relleno lateral. Elementor pone 24 px a cada lado del contenedor
	   exterior, que se comen la caja por dentro: con `--container-max-width`
	   en 1290, el interior acababa midiendo 1242 y el texto arrancaba en
	   x=99 en vez de en x=75. Los 24 px sobran porque la caja ya reproduce
	   la del tema, incluidos sus márgenes en móvil. */
	padding-inline: 0;
}
.elementor .e-con.e-parent > .e-con-inner {
	padding-block-start: 0;
	padding-block-end: 0;
}

/* Contraste del banner que es un enlace ───────────────────────────────────
   El de «Originales» es un <a> y el tema le impone su color de enlace
   (#111): el texto salía negro sobre el velo oscuro, a 1,19:1. El de
   «Láminas» es un <span> y por eso sí se veía. Se fuerza el blanco en los
   dos, también en hover y focus. */
a.mc-banner,
a.mc-banner:hover,
a.mc-banner:focus,
a.mc-banner .mc-banner-sup,
a.mc-banner .mc-banner-tit,
a.mc-banner .mc-banner-pronto {
	color: #fff;
}
a.mc-banner:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* Secciones a sangre ──────────────────────────────────────────────────────
   El hero y la banda de encargos llevan fondo propio y tienen que llegar a
   los bordes de la pantalla, como la banda ancha de la maqueta. Elementor
   los deja en la caja de 1290 px y el fondo se cortaba con dos franjas
   blancas a los lados.

   El truco: se estiran al ancho del viewport y el contenido de dentro se
   vuelve a limitar, para que el texto siga con su medida de lectura y no
   cruce la pantalla entera. */
.elementor-element.mc-hero,
.elementor-element.mc-sangre {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.elementor-element.mc-hero > .e-con-inner,
.elementor-element.mc-sangre > .e-con-inner {
	/* La misma caja que el resto del sitio, no un 1140 escrito a mano: si no,
	   estas dos bandas se desalinean de los otros cinco bloques de la portada
	   en cuanto la ventana no mide 1440. */
	max-width: var(--mc-caja);
	margin-inline: auto;
	width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ESCAPARATE Y FICHA — las plantillas de ShopBuilder
   Creadas en setup/plantillas-tienda.php. Allí va la estructura; aquí, el
   aspecto. Móvil primero: todo lo de abajo está escrito para 390 px y se
   amplía con min-width.

   Se usan las variables de Elementor (--gap, --width, --flex-direction) en
   lugar de las propiedades directas. Elementor las declara en `.e-con` con la
   misma especificidad que una clase suelta, así que `flex-direction: row` en
   `.mc-ficha-top` gana o pierde según el orden de las hojas — que depende de
   la prioridad de encolado y es exactamente el tipo de detalle que se rompe
   al actualizar el tema. Escribiendo la variable, no hay pulso que perder.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Migas ───────────────────────────────────────────────────────────────── */
.e-con.mc-ficha-migas { --padding-block-start: 0; font-size: .875rem; }

/* La obra y sus datos ─────────────────────────────────────────────────────
   Apiladas en móvil: primero la obra, que es lo que se ha venido a ver. */
.e-con.mc-ficha-top { --gap: 2rem; }
.e-con.mc-ficha-info { --gap: 1.25rem; }

/* Las columnas interiores, sin relleno propio. Elementor pone 10 px a los
   contenedores hijos, y en móvil eso dejaba el título de la obra en x=25
   mientras el resto del sitio arranca en x=15. */
.e-con.mc-ficha-galeria,
.e-con.mc-ficha-info { padding-inline: 0; }

/* La obra grande, que es el producto ──────────────────────────────────────
   Sin esto la imagen sale a su tamaño intrínseco: medido el 2026-08-15, 267 px
   de ancho en una pantalla de 1440. En una tienda de arte la obra pequeña es
   el fallo más caro que hay, porque es lo único que se compra. */
.e-con.mc-ficha-galeria .woocommerce-product-gallery__image img,
.e-con.mc-ficha-galeria .rtsb-product-images img {
	width: 100%;
	height: auto;
}

/* Las miniaturas, separadas. La galería nativa las pega unas a otras y cuatro
   dibujos a tinta en fila se leen como una sola imagen partida. */
.e-con.mc-ficha-galeria .woocommerce-product-gallery__wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.e-con.mc-ficha-galeria .woocommerce-product-gallery__image:first-child { flex: 0 0 100%; }
.e-con.mc-ficha-galeria .woocommerce-product-gallery__image:not(:first-child) {
	flex: 0 0 calc(25% - .375rem);
	border: 1px solid rgba(0,0,0,.08);
}

/* Ficha técnica ───────────────────────────────────────────────────────────
   Junto al precio y no en la tercera pestaña: «¿cabe en mi pared?» es la
   primera objeción de quien compra arte, antes que el significado de la obra.
   Etiqueta y valor en dos columnas, con la etiqueta en gris y estrecha. */
.mc-ficha-tecnica {
	display: grid;
	gap: .5rem 1.25rem;
	margin: 0;
	padding: 1.25rem 0;
	border-top: 1px solid rgba(0,0,0,.1);
	border-bottom: 1px solid rgba(0,0,0,.1);
	font-size: .95rem;
}
.mc-ft-fila {
	display: grid;
	grid-template-columns: 7.5em 1fr;
	gap: .75rem;
}
.mc-ficha-tecnica dt {
	margin: 0;
	font-weight: 400;
	color: #6b6b6b;
	text-transform: uppercase;
	font-size: .78rem;
	letter-spacing: .06em;
	line-height: 1.7;
}
.mc-ficha-tecnica dd { margin: 0; }

/* Qué se lleva quien compra ───────────────────────────────────────────── */
.mc-confianza-ficha {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .9rem;
	line-height: 1.6;
}
.mc-confianza-ficha li {
	position: relative;
	padding-left: 1.4em;
	margin-bottom: .45rem;
}
.mc-confianza-ficha li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: #9a9a9a;
}

/* El mismo cuadro en otro formato ─────────────────────────────────────────
   Ancla de precio: una lámina de 195 € parece cara sola y parece una
   oportunidad al lado del original de 2.400 €. Hoy no aparece en ninguna
   ficha porque ninguna obra existe en dos formatos, y eso es correcto: el
   shortcode devuelve vacío en vez de inventarse un enlace. */
.mc-cruce {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem 1rem;
	padding: .9rem 1.1rem;
	background: #f5f3f0;
	font-size: .9rem;
}
.mc-cruce-tit { color: #6b6b6b; }
.mc-cruce a { font-weight: 600; }
.mc-cruce-precio { font-weight: 400; opacity: .8; }

/* Texto, relacionadas y reseñas ───────────────────────────────────────────
   El texto de Norelys con medida de lectura, pero alineado con el resto.

   ⚠️ La medida se le pone al CONTENIDO, no al contenedor. Un `.e-con` mide el
   ancho entero de la ventana y es su `.e-con-inner` el que se centra en 1140
   px: estrechar el de fuera a 42em lo recorta desde el borde izquierdo de la
   pantalla —medido: x=0, ancho 672— y el párrafo aparecía descolgado a la
   izquierda de todo lo demás. Estrechando el widget, el contenedor sigue
   alineado con la obra y con el título. */
.e-con.mc-ficha-texto { --padding-block-start: 3rem; }
.e-con.mc-ficha-texto .elementor-widget-container { max-width: 42em; }
.e-con.mc-ficha-texto p { line-height: 1.8; }
.e-con.mc-ficha-relacionadas { --padding-block-start: 3.5rem; }

/* El bloque de reseñas va al final y en gris, no porque estorbe sino porque
   hoy está vacío: con cero valoraciones son 400 px de formulario en blanco.
   Separado por una línea, para que se lea como lo que es —una invitación a
   comentar— y no como parte de la ficha de la obra. */
.e-con.mc-ficha-resenas {
	--padding-block-start: 3rem;
	border-top: 1px solid rgba(0,0,0,.1);
	margin-top: 3.5rem;
}
.e-con.mc-ficha-resenas .woocommerce-Reviews-title,
.e-con.mc-ficha-resenas .comment-reply-title { font-size: 1.1rem; }

/* Escaparate ─────────────────────────────────────────────────────────────
   El título ya no viene de la banda gris del tema, que imprimía «Tienda» en
   todas las fichas y en todas las series. Ahora lo pone el widget, que sabe
   en qué categoría está. */
.e-con.mc-tienda-cabecera { --gap: .75rem; --padding-block-start: 2.5rem; }
/* La medida al contenido y no al contenedor, por lo mismo que en .mc-ficha-texto. */
.e-con.mc-tienda-cabecera .elementor-widget-container { max-width: 46em; }
.e-con.mc-tienda-cabecera h1 { margin: 0; }
.mc-cabecera-respaldo h1 { margin: 0 0 .75rem; }
/* Los párrafos de la descripción, separados. El tema los deja a margen cero
   dentro de este contenedor y los cuatro del texto de «Originales» salían
   pegados uno detrás de otro, leyéndose como un solo bloque de 180 palabras. */
.e-con.mc-tienda-cabecera .rtsb-archive-description p {
	line-height: 1.75;
	margin-bottom: 1rem;
}
.e-con.mc-tienda-cabecera .rtsb-archive-description p:last-child { margin-bottom: 0; }

.e-con.mc-tienda-barra {
	--gap: .75rem;
	--padding-block-start: 2rem;
	font-size: .9rem;
}
.e-con.mc-tienda-barra .woocommerce-result-count { margin: 0; }

/* Cabecera de respaldo, para las categorías sin ni un producto ────────────
   Ahí la plantilla de ShopBuilder no llega y la pinta el tema hijo. Mismo
   aspecto que la de la plantilla, para que no se note el cambio de manos. */
.mc-cabecera-respaldo { padding: 2.5rem 0 1.5rem; }
.mc-cabecera-respaldo .rtsb-archive-description p {
	line-height: 1.75;
	margin-bottom: 1rem;
}
.mc-cabecera-respaldo .rtsb-archive-description p:last-child { margin-bottom: 0; }

.e-con.mc-tienda-grid { --padding-block-start: 1.25rem; }
.e-con.mc-tienda-confianza { --padding-block-start: 3.5rem; }

/* La obra nunca se recorta en la tarjeta ──────────────────────────────────
   Segunda vez que hace falta escribir esto. La primera fue en las tarjetas de
   `/encargos/`, con `object-fit: cover` y alto fijo, que a un retrato vertical
   le cortaban la cabeza. Aquí el recorte venía de más atrás: WooCommerce
   generaba la miniatura recortada a 5:6 por configuración, así que **el archivo
   ya estaba cortado** y ningún `object-fit` lo arreglaba. Eso se resuelve en
   `configurar-woocommerce.php` con `thumbnail_cropping = uncropped`.

   Al no recortar, cada miniatura conserva su proporción, y ahí hubo tres
   intentos. Una caja de alto fijo con `object-fit: contain` dejaba la obra
   entera pero flotando entre bandas grises. Quitar la caja y dejar el alto
   libre disparaba las verticales, con una tarjeta de 615 px al lado de una de
   300 y la fila descuadrada. Limitar el alto y estrechar la imagen centrada
   dejaba la obra pequeña en mitad de la tarjeta, con el título alineado a la
   izquierda y la obra no.

   Lo que hay ahora sale de medir el catálogo, no de elegir un número. La
   portada de las 49 obras da esto:

     · 30 miden 5:6 exacto (1333 × 1600), que es la plantilla del mockup
     · 16 son más alargadas, de 0,58 a 0,88
     ·  3 son apaisadas, de 1,19 a 1,25

   Así que **la caja es 5:6 al ancho de la columna**, y la obra va contenida y
   anclada abajo a la izquierda. Las 30 del mockup llenan la caja borde a borde
   y su lado izquierdo cae justo sobre el título; las alargadas tocan arriba y
   abajo y dejan la holgura a la derecha; las apaisadas llenan el ancho y dejan
   blanco arriba, apoyadas sobre el título. Nada se recorta y la holgura es el
   blanco de la tarjeta, no un rectángulo gris.

   La caja escala con la columna, así que no hace falta un tope por resolución:
   se fueron los tres `max-height` y sus dos breakpoints.

   Va sobre `.rtin-thumb`, que es el contenedor de imagen de la tarjeta del
   tema, y sirve para el escaparate, la portada y las páginas de técnica. */
.rt-product-block-1 .rtin-thumb a { display: block; }
.rt-product-block-1 .rtin-thumb img {
	width: 100%;
	aspect-ratio: 5 / 6;
	height: auto;
	object-fit: contain;
	object-position: left bottom;
	display: block;
}

/* El sello de la obra vendida ─────────────────────────────────────────────
   30 de las 49. Va sobre la esquina de la imagen, no debajo del título: es lo
   primero que hay que saber de esa tarjeta, antes que el nombre y antes que la
   técnica. Lo pinta `woocommerce/loop/sale-flash.php` del tema hijo.

   Fondo blanco y no negro: el negro es el color de los botones de compra en
   todo el sitio, y un sello negro sobre una obra que no se puede comprar dice
   justo lo contrario de lo que hace. */
.rt-product-block-1 .rtin-thumb-wrapper { position: relative; }
.mc-sello-tarjeta {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	background: rgba(255, 255, 255, .94);
	color: #111;
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .4rem .7rem;
}

/* Sin carrito ni favoritos donde no hay nada que comprar. El icono lo imprime
   `block-1.php` del padre sin comprobar `is_purchasable()`, así que no basta
   con que el producto se declare no comprable: hay que apagarlo aquí. */
.product.outofstock .rt-product-block-1 .rtin-buttons-area { display: none; }

/* La línea de identidad de la obra ────────────────────────────────────────
   Técnica, medidas y año bajo el H1, donde antes había una tabla de seis
   filas. Gris y pequeña: informa sin competir con el título ni con el precio,
   igual que los datos de la tarjeta del escaparate. */
.mc-identidad {
	margin: .25rem 0 .9rem;
	color: #6b6b6b;
	font-size: .95rem;
	letter-spacing: .01em;
}

/* La ficha técnica, ya abajo y con encabezado propio. */
.mc-ficha-tecnica-titulo {
	font-size: 1.25rem;
	margin: 2.5rem 0 1rem;
}

/* La serie que se vendió entera ───────────────────────────────────────────
   Fondo claro y no un aviso rojo: no es un error ni una disculpa, es la
   única prueba social del sitio. Reutiliza `.mc-vacio-salidas`, que ya es la
   pareja de botones del 404 y de las páginas sin resultados. */
.mc-serie-completa {
	background: #f6f4f1;
	padding: 1.5rem 1.75rem 1.75rem;
	margin: 0 0 2rem;
}
.mc-serie-completa-titular {
	font-size: 1.15rem;
	font-weight: 600;
	margin: 0 0 .5rem;
}
.mc-serie-completa p { margin: 0; max-width: 46em; }
.mc-serie-completa .mc-vacio-salidas { margin-top: 1.25rem; }

/* La salida de una obra vendida, en el hueco que deja el carrito.
   El botón es el mismo negro que el de comprar en el resto del sitio: para
   quien mira esta ficha, encargar es la acción, no un consuelo. */
.mc-vendida-salida { margin: 1.25rem 0 0; }
.mc-vendida-salida .mc-cta-solida {
	display: inline-block;
	background: #111;
	color: #fff;
	border: 1px solid #111;
	padding: .85rem 1.6rem;
	text-decoration: none;
}
.mc-vendida-salida p {
	margin: .9rem 0 0;
	color: #4a4a4a;
	max-width: 34em;
}

/* En la ficha, ocupando el lugar exacto que tenía el precio. */
.mc-sello-ficha {
	display: inline-block;
	font-size: 1.05rem;
	letter-spacing: .04em;
	color: #111;
	border: 1px solid #111;
	padding: .5rem 1rem;
}

/* Las tarjetas de serie, misma caja. La de Cubitos llegó a medir 557 px de
   alto contra las otras dos, porque su imagen es vertical. */
.mc-serie-img { display: block; }
.mc-serie-img img {
	width: 100%;
	aspect-ratio: 5 / 6;
	height: auto;
	object-fit: contain;
	object-position: left bottom;
	display: block;
}

/* Técnica y medidas bajo el título de cada obra ───────────────────────────
   El dato que decide la compra y que la tarjeta del tema no traía. Se pone
   entre la serie y el precio, en gris y pequeño: informa sin competir con el
   título ni con la cifra. */
.mc-tarjeta-datos {
	margin: .15rem 0 .35rem;
	font-size: .82rem;
	line-height: 1.45;
	color: #6b6b6b;
}

@media (min-width: 768px) {
	/* La barra de contador y orden cabe en una línea, con el orden a la derecha. */
	.e-con.mc-tienda-barra {
		--flex-direction: row;
		--align-items: center;
		--justify-content: space-between;
	}
}

@media (min-width: 1024px) {
	/* La obra a la izquierda y la decisión de compra a la derecha. Alineadas
	   arriba: con `center`, una obra vertical de 900 px deja el botón de
	   comprar flotando a media pantalla. */
	.e-con.mc-ficha-top {
		--flex-direction: row;
		--align-items: flex-start;
		--gap: 3.5rem;
	}
	.e-con.mc-ficha-galeria { --width: 55%; }
	.e-con.mc-ficha-info    { --width: 45%; }

	/* La columna de datos se queda visible mientras se recorre una obra alta.
	   Con `top` holgado para no quedar debajo del menú fijo. */
	.e-con.mc-ficha-info { position: sticky; top: 120px; }

	.e-con.mc-ficha-texto { --padding-block-start: 4.5rem; }
	.e-con.mc-ficha-relacionadas { --padding-block-start: 5rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINAS DE CONTENIDO — /sobre-norelys/ y /encargos/
   Las dos páginas que no venden un producto, sino a la persona que lo hace.
   Móvil primero: todo apilado, y las rejillas aparecen con min-width.

   El problema de partida no era de estilo. Los párrafos medían los 1290 px
   enteros y el texto salía cortado a mitad de renglón, así que parecían
   escritas en media columna: `wpautop` metía un <br> en cada salto de línea
   del HTML fuente. Se apaga en inc/paginas.php. Lo de aquí es lo que va
   encima de ese arreglo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Medida de lectura ───────────────────────────────────────────────────────
   1290 px de línea son unos 200 caracteres, el triple de lo que se lee sin
   perder el renglón. El texto corrido se queda en 34em; las rejillas y las
   bandas siguen usando el ancho entero. */
.mc-pag-texto,
.mc-pag-seccion > p,
.mc-pag-ancho > p,
.mc-sobre-cuerpo {
	max-width: 34em;
}
.mc-pag-texto p,
.mc-pag-seccion > p,
.mc-sobre-cuerpo p {
	line-height: 1.8;
}

.mc-eyebrow {
	margin: 0 0 .5rem;
	font-size: .8rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #6b6b6b;
}
.mc-sub {
	color: #4a4a4a;
	font-size: 1.02rem;
}
.mc-firma {
	padding: 2.5rem 0 1rem;
	color: #6b6b6b;
}

/* Entrada de página, a dos columnas ─────────────────────────────────────── */
.mc-pag-hero {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: 1fr;
	align-items: center;
	padding: 2.5rem 0 1rem;
}
.mc-pag-hero h2 {
	margin: 0 0 .75rem;
	line-height: 1.15;
}
.mc-pag-hero .mc-lede {
	max-width: 30em;
	font-size: 1.1rem;
	line-height: 1.65;
	margin-bottom: 0;
}
.mc-pag-hero-img img {
	width: 100%;
	height: auto;
	display: block;
}

/* La entrada de «Sobre Norelys» ──────────────────────────────────────────
   Tres piezas y no dos: el titular, la foto y el cuerpo de la biografía.
   Separarlas es lo que permite que el orden cambie entre móvil y escritorio.

   ⚠️ **El problema no era que faltaran columnas, era el aire.** La entrada ya
   iba a dos columnas, pero en la izquierda solo estaban el antetítulo, el H1 y
   una línea, contra una foto vertical de 520 px: el texto salía centrado en
   medio de una franja medio vacía y parecía un fallo de maquetación. El cuerpo
   de la biografía vivía debajo, a todo el ancho, con la columna de al lado de
   la foto sin usar.

   Ahora el cuerpo sube a esa columna y la llena. La foto ocupa la derecha
   entera y se alinea arriba, con el titular.

   MÓVIL PRIMERO, y el orden importa: titular, **foto**, y después la biografía.
   Si la foto fuera simplemente el tercer bloque del HTML, en móvil quedaría
   enterrada debajo de cinco párrafos y la cara de Norelys no aparecería hasta
   media pantalla de scroll. Con áreas de rejilla el orden se declara, y el HTML
   se queda en un orden que también se lee bien sin CSS. */
.mc-sobre-hero {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
	grid-template-areas:
		"cabeza"
		"foto"
		"cuerpo";
	padding: 2.5rem 0 1rem;
}
.mc-sobre-cabeza { grid-area: cabeza; }
.mc-sobre-foto   { grid-area: foto; }
.mc-sobre-cuerpo { grid-area: cuerpo; }

.mc-sobre-cabeza h1 { margin: 0 0 .75rem; line-height: 1.15; }
.mc-sobre-cabeza .mc-lede {
	max-width: 30em;
	font-size: 1.1rem;
	line-height: 1.65;
	margin-bottom: 0;
}
.mc-sobre-foto img {
	width: 100%;
	height: auto;
	display: block;
}
/* La medida y la interlínea las pone la regla de la casa, arriba: 34em y 1,8.
   Tenerlas aquí aparte fue el primer intento y ya empezaba a divergir. */
.mc-sobre-cuerpo p:last-child { margin-bottom: 0; }

.mc-pag-seccion { padding: 2.75rem 0 0; }

/* El certificado de autenticidad ──────────────────────────────────────────
   Texto y foto de Norelys, del correo del 2026-09-13. Hasta entonces el
   certificado solo existía como una línea suelta en cuatro listas: se repetía
   la palabra y no se enseñaba nada, que es la forma más cara de no convencer.

   Móvil primero: una columna, y la foto debajo del texto porque lo que
   convence es la foto y conviene leer antes qué se está mirando. En dos
   columnas la foto va a la derecha y con tope de altura: es un documento
   vertical y sin tope estira la sección media pantalla. */
.mc-certificado {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
	align-items: center;
}
.mc-certificado-txt > h2 { margin-bottom: .75rem; }
.mc-certificado-txt > p  { max-width: 34em; margin-bottom: 0; }
.mc-certificado-img img {
	width: 100%;
	height: auto;
	display: block;
	/* El papel es blanco y el fondo de la página también: sin el filo, el
	   certificado flota sin bordes y no se lee como documento. */
	border: 1px solid #e6e6e6;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .07);
}
.mc-pag-seccion > h2 { margin-bottom: .5rem; }

/* Entrada de las páginas de técnica ───────────────────────────────────────
   Esta no lleva imagen, así que no hay dos columnas que repartir: el hero
   heredaba la retícula de `/encargos/` y dejaba media pantalla vacía a la
   derecha, con el texto en un tercio del ancho. */
.mc-tecnica-hero { display: block; padding-top: 2.5rem; }
.mc-tecnica-hero .mc-lede { max-width: 40em; }

.mc-tecnica-estado {
	margin: 1.25rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid rgba(0,0,0,.1);
	max-width: 40em;
	font-size: .95rem;
	line-height: 1.6;
	color: #4a4a4a;
}
/* Toda la obra vendida: se dice sin dramatismo, y el enlace a encargos es lo
   único accionable que queda en la página. */
.mc-tecnica-agotada strong,
.mc-tecnica-agotada a { color: #111; }

/* Bandas a sangre con fondo claro ─────────────────────────────────────────
   El fondo llega a los bordes de la ventana y el contenido se queda donde
   estaría sin la banda, alineado con el resto de la página.

   ⚠️ **El contenido NO se recentra con un max-width propio.** Se hizo así al
   principio, copiando el 1140 px que usa la portada, y el resultado eran dos
   rejillas distintas en la misma página: el tema Metro pone su contenido en
   una caja de 1290 px que arranca en x=75, y una caja de 1140 centrada
   arranca en x=150. El título «Cómo trabajo» quedaba 75 px a la derecha de
   todos los demás títulos, sin alinearse con nada. Medido en el navegador.

   En vez de adivinar el ancho del tema, se compensa: el elemento se estira
   con márgenes negativos y se devuelve con un relleno del mismo tamaño. El
   `%` del relleno se resuelve contra el contenedor padre —el del tema—, así
   que el interior cae exactamente en su sitio sea cual sea ese ancho, y
   seguirá cuadrando si el tema cambia su caja o en cualquier resolución. */
.mc-sangre-clara {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: 3rem;
	padding-left: calc(50vw - 50%);
	padding-right: calc(50vw - 50%);
	padding-top: 2.75rem;
	padding-bottom: 2.75rem;
	background: #f5f3f0;
}
.mc-sangre-clara > .mc-pag-ancho > h2:first-child { margin-top: 0; }

/* Banda a dos columnas: el título a la izquierda, el texto a la derecha ────
   Un párrafo con medida de lectura dentro de una banda que ocupa la ventana
   entera deja dos tercios de blanco a su derecha y parece que falta algo.
   Poniendo el título en su propia columna, el vacío desaparece y el texto
   conserva su medida. En móvil se apila, que es lo natural. */
.mc-banda-dos {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}
.mc-banda-tit h2 { margin: 0; }
.mc-banda-cuerpo > p { max-width: 36em; line-height: 1.8; }
.mc-banda-cuerpo > p:last-child { margin-bottom: 0; }

/* Exposiciones ────────────────────────────────────────────────────────────
   Tarjetas y no lista con viñetas: son tres hechos verificables y cada uno
   tiene tres datos —qué, dónde, cuándo—. Puestos en columnas se leen de un
   vistazo; en una lista corrida parecen una nota al pie. */
.mc-expos {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	margin-top: 1.5rem;
}
.mc-expo {
	padding: 1.4rem;
	background: #fff;
	border: 1px solid rgba(0,0,0,.07);
}
.mc-expo h3 { margin: 0 0 .4rem; font-size: 1.08rem; line-height: 1.3; }
.mc-expo-donde { margin: 0 0 .25rem; font-weight: 600; font-size: .92rem; }
.mc-expo-cuando { margin: 0; font-size: .88rem; color: #6b6b6b; line-height: 1.5; }

/* El logotipo de la cabecera ──────────────────────────────────────────────
   El tema imprime el logo en tamaño `full` y no le pone ningún tope, así que
   sin esto entran los 1335 px del archivo.

   Desde el 2026-09-21 el logotipo es **horizontal**, 1335x424, proporción
   3,15:1. Es la versión que se le pidió en el punto 6 de
   `docs/mensaje-norelis-5.md` y que llegó por correo. El apilado que había
   antes medía 1,43:1, y en una franja ancha y baja el nombre de la marca se
   quedaba diminuto a cualquier altura razonable: a 80 px de alto medía 114 px
   de ancho, y el nombre ocupaba la mitad inferior de eso.

   Con el horizontal la cuenta se da la vuelta: a 52 px de alto son 164 px de
   ancho y el nombre se lee entero. Se baja el tope en lugar de subirlo, que
   era justo lo que no se podía hacer con el apilado.

   ⚠️ **El tema cierra el logo en 53 px** con `.main-header .site-branding a img`,
   que es (0,2,3): un `.logo img` suelto no le gana y el logotipo sale a la
   altura del logo del demo, 117x53. Aunque ahora el tope propio esté cerca de
   esos 53 px, la regla se queda: sin ella el tope lo pone el tema y no
   nosotros, y en móvil el valor sí es distinto. Hay dos cabeceras: la de
   escritorio (`.site-branding`) y la del móvil (`.mean-bar`).

   ⚠️ **Solo sobre fondo claro.** La transparencia se hizo quitando el blanco del
   escaneo, así que el trazo sigue siendo negro y en el pie desaparecería. Por
   eso `logo_light` no se toca.

   ⚠️ **Y el `padding` del tema se come la altura.** La misma regla del tema trae
   `padding: 5px 0`, así que de los 52 px del tope solo 42 eran imagen y el
   logotipo salía a 132x42 en vez de a 164x52: un 20 % más pequeño de lo que
   dice el número, sin que nada se vea torcido. Se detectó midiendo el elemento
   en el navegador, no leyendo el CSS. Va a cero aquí. */
.main-header .site-branding a.logo img,
.mean-container .mean-bar a.logo img,
a.logo img {
	height: auto;
	max-height: 52px;
	width: auto;
	max-width: 100%;
	padding: 0;
	display: block;
}

@media (max-width: 767.98px) {
	.main-header .site-branding a.logo img,
	.mean-container .mean-bar a.logo img,
	a.logo img { max-height: 40px; }
}

/* Mosaico de obra ─────────────────────────────────────────────────────────
   Cierre de página de contenido: sin precios ni botones, porque no es un
   escaparate. Su trabajo es llevar a la tienda. */
.mc-mosaico {
	display: grid;
	gap: .75rem;
	grid-template-columns: repeat(2, 1fr);
	margin: 1.5rem 0 0;
}
.mc-mosaico-pieza { display: block; text-decoration: none; overflow: hidden; }
/* La misma caja de 5:6 que las tarjetas del escaparate y las de serie. Sin ella
   el mosaico servía `woocommerce_thumbnail` a su proporción natural y las seis
   obras salían con seis alturas distintas: 304, 432, 473, 474 y 509 px sobre
   360 de ancho. Es el mismo fallo que la tarjeta de Cubitos, que llegó a medir
   557 px de alto. Tres sitios pintan obra en una rejilla y los tres necesitan
   la caja; si aparece un cuarto, va aquí también. */
.mc-mosaico-pieza img {
	width: 100%;
	aspect-ratio: 5 / 6;
	height: auto;
	object-fit: contain;
	object-position: left bottom;
	display: block;
}
.mc-mosaico-tit {
	display: block;
	margin-top: .45rem;
	font-size: .85rem;
	line-height: 1.4;
}

.mc-cierre-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1.25rem;
	margin-top: 2rem;
}
.mc-cierre-cta a {
	display: inline-block;
	padding: .85rem 1.6rem;
	text-decoration: none;
	border: 1px solid currentColor;
}
.mc-cierre-cta a.mc-cta-solida { background: #111; color: #fff; border-color: #111; }
.mc-cta-nota { font-size: .88rem; color: #6b6b6b; }

/* Tipos de encargo ────────────────────────────────────────────────────────
   Eran cuatro filas de una tabla. Una tabla contesta «cuánto cuesta»; estas
   tarjetas contestan «qué me estás ofreciendo», que es la pregunta anterior
   y la que decide si alguien sigue leyendo. */
.mc-encargos-tipos {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
	margin-top: 1.75rem;
}
.mc-tipo {
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(0,0,0,.1);
	background: #fff;
}
/* ⚠️ La obra NO se recorta. Nunca.
   Estaba con `object-fit: cover` y 200 px de alto fijo, y a un retrato vertical
   le cortaba la cabeza y la barbilla para encajarlo en un rectángulo apaisado.
   En una tienda de arte eso no es un problema de maquetación, es enseñar mal la
   obra. Con `contain` cada pieza se ve entera, y el hueco que sobra lo llena el
   mismo gris que usan las bandas: la caja mide igual en las tres tarjetas y la
   proporción de cada obra se respeta. */
.mc-tipo-img {
	overflow: hidden;
	background: #f5f3f0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .75rem;
}
.mc-tipo-img img {
	max-width: 100%;
	height: 260px;
	width: auto;
	object-fit: contain;
	display: block;
}
.mc-tipo-txt {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: 1.3rem;
	flex: 1;
}
.mc-tipo h3 { margin: 0; font-size: 1.15rem; }
.mc-tipo p { margin: 0; }
.mc-tipo-medida { font-size: .87rem; color: #6b6b6b; }
.mc-tipo-precio { margin-top: auto !important; padding-top: .6rem; font-size: .95rem; }
.mc-tipo-precio strong { font-size: 1.25rem; }
.mc-nota-precio { margin-top: 1.25rem; font-size: .92rem; color: #4a4a4a; }

/* El proceso, numerado ────────────────────────────────────────────────────
   La numeración aquí es información y no adorno: es una secuencia real, y
   el orden importa —no se pinta antes de aprobar la composición—. El número
   se dibuja con un contador, así que si se añade o se quita un paso no hay
   que renumerar nada a mano. */
.mc-pasos {
	list-style: none;
	counter-reset: paso;
	margin: 1.75rem 0 0;
	padding: 0;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}
.mc-pasos > li {
	counter-increment: paso;
	position: relative;
	padding-left: 3.2rem;
}
.mc-pasos > li::before {
	content: counter(paso, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: -.1rem;
	font-size: 1.35rem;
	font-weight: 300;
	color: #b8b2a8;
	font-variant-numeric: tabular-nums;
}
.mc-pasos h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.mc-pasos p { margin: 0; line-height: 1.65; font-size: .95rem; }

/* Qué incluye / lo que no hago ────────────────────────────────────────────
   Enfrentados a propósito: decir que no a tres cosas concretas hace más
   creíble el sí de la columna de al lado.

   En tarjetas, y con su propio encabezado de sección encima. Sin eso, esta
   sección y «Cómo funciona» quedaban las dos sobre blanco, seguidas y sin
   nada que las separara: se leían como una sola cosa larga. */
.mc-dos-columnas {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
	margin-top: 1.75rem;
}
.mc-tarjeta-cond {
	padding: 1.6rem;
	border: 1px solid rgba(0,0,0,.1);
	background: #fff;
}
.mc-tarjeta-cond h3 { margin: 0 0 .25rem; font-size: 1.1rem; }
.mc-dos-columnas h2 { margin-top: 0; }
.mc-lista-si,
.mc-lista-no {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	font-size: .95rem;
	line-height: 1.6;
}
.mc-lista-si li,
.mc-lista-no li {
	position: relative;
	padding-left: 1.6em;
	margin-bottom: .6rem;
}
.mc-lista-si li::before { content: "✓"; position: absolute; left: 0; color: #2e7d32; }
.mc-lista-no li::before { content: "×"; position: absolute; left: 0; color: #9a9a9a; font-size: 1.1em; }
.mc-nota { margin-top: 1rem; font-size: .88rem; color: #6b6b6b; }

.mc-aviso-fecha {
	margin-top: 1.5rem;
	padding: 1.1rem 1.3rem;
	background: #fff;
	border-left: 3px solid #111;
	font-size: .95rem;
	line-height: 1.65;
	max-width: 42em;
}

/* ── Formulario de encargos ────────────────────────────────────────────────
   Contact Form 7 no trae estilos ni estructura: sale lo que se escriba en su
   plantilla. Los nueve campos caían uno debajo de otro a lo largo de metro y
   medio de página, con los inputs a 150 px y los textos de ayuda pegados al
   lado. El formulario de una página de 2.400 € parecía uno de contacto de
   2009.

   La plantilla agrupa ahora en `.cf7-paso`, y esto lo maqueta: caja propia,
   pasos numerados, campos cortos de dos en dos y el presupuesto en fichas en
   vez de radios sueltos. */

/* El formulario y su refuerzo, uno al lado del otro ───────────────────────
   Un formulario de 46em solo en una sección que ocupa 1140 deja media
   pantalla en blanco a su derecha y se lee como algo que sobró de otra
   maqueta. El lateral no es relleno: contesta la pregunta que frena a quien
   duda antes de enviar —qué pasa después, y si esto le compromete a algo—. */
.mc-form-grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
	margin-top: 2rem;
}
.mc-form-aside {
	align-self: start;
	padding: 1.6rem;
	border-left: 3px solid #111;
	background: #f5f3f0;
}
.mc-form-aside h3 { margin: 0 0 1rem; font-size: 1.02rem; }
.mc-aside-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .9rem;
	line-height: 1.6;
}
.mc-aside-lista li { margin-bottom: .9rem; }
.mc-aside-lista li:last-child { margin-bottom: 0; }
.mc-aside-nota {
	margin: 1.2rem 0 0;
	padding-top: 1.1rem;
	border-top: 1px solid rgba(0,0,0,.12);
	font-size: .86rem;
	line-height: 1.6;
	color: #4a4a4a;
}

.mc-formulario .wpcf7 {
	padding: 2rem 1.5rem;
	background: #faf9f7;
	border: 1px solid rgba(0,0,0,.08);
}
.mc-formulario .wpcf7 p { margin: 0; }

/* Cada bloque temático, separado por una línea fina. */
.cf7-paso { padding-bottom: 1.75rem; margin-bottom: 1.75rem; border-bottom: 1px solid rgba(0,0,0,.09); }
.cf7-paso-tit {
	display: flex;
	align-items: baseline;
	gap: .6rem;
	margin-bottom: 1.1rem !important;
	font-size: 1rem;
	font-weight: 600;
}
.cf7-paso-n {
	font-size: .9rem;
	font-weight: 300;
	color: #b8b2a8;
	font-variant-numeric: tabular-nums;
}

.cf7-campo { margin-bottom: 1.15rem !important; }
.cf7-campo:last-child { margin-bottom: 0 !important; }
.mc-formulario .wpcf7 label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }
.mc-formulario .wpcf7-form-control-wrap { display: block; }
.mc-formulario .cf7-ayuda {
	display: block;
	margin-top: .45rem;
	font-size: .84rem;
	line-height: 1.55;
	color: #6b6b6b;
}
.mc-formulario .req { color: #b3261e; font-weight: 400; }

.mc-formulario input[type="text"],
.mc-formulario input[type="email"],
.mc-formulario input[type="tel"],
.mc-formulario select,
.mc-formulario textarea {
	width: 100%;
	padding: .8rem .9rem;
	border: 1px solid rgba(0,0,0,.2);
	border-radius: 2px;
	background: #fff;
	font: inherit;
	font-size: .95rem;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.mc-formulario textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
.mc-formulario input:hover,
.mc-formulario select:hover,
.mc-formulario textarea:hover { border-color: rgba(0,0,0,.4); }
.mc-formulario input:focus,
.mc-formulario select:focus,
.mc-formulario textarea:focus {
	outline: none;
	border-color: #111;
	box-shadow: 0 0 0 3px rgba(0,0,0,.07);
}

/* El desplegable nativo con su propia flecha: el del sistema no se puede
   colorear y desentona con el resto de los campos. */
.mc-formulario select {
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .9rem center;
	padding-right: 2.4rem;
}

/* El presupuesto, en fichas ───────────────────────────────────────────────
   Cinco radios sueltos en columna ocupaban media pantalla y se leían como
   una encuesta. En fichas se comparan de un vistazo, que es lo que hace
   falta para elegir un tramo. El radio real sigue ahí, oculto pero
   accesible: el foco del teclado se ve en la ficha. */
.mc-formulario .wpcf7-radio,
.mc-formulario .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: .5rem; }
.mc-formulario .wpcf7-list-item { margin: 0; }

.cf7-campo-opciones .wpcf7-list-item label {
	display: block;
	margin: 0;
	padding: .6rem 1rem;
	border: 1px solid rgba(0,0,0,.2);
	border-radius: 999px;
	background: #fff;
	font-weight: 400;
	font-size: .9rem;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.cf7-campo-opciones .wpcf7-list-item label:hover { border-color: #111; }
.cf7-campo-opciones input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.cf7-campo-opciones .wpcf7-list-item label:has(input:checked) {
	background: #111;
	border-color: #111;
	color: #fff;
}
.cf7-campo-opciones .wpcf7-list-item label:has(input:focus-visible) {
	outline: 2px solid #111;
	outline-offset: 2px;
}

/* El subir archivo, que por defecto es el botón gris del sistema. */
.mc-formulario input[type="file"] {
	width: 100%;
	padding: .7rem;
	border: 1px dashed rgba(0,0,0,.28);
	border-radius: 2px;
	background: #fff;
	font: inherit;
	font-size: .88rem;
}

/* Cierre: consentimiento, aviso legal y botón.
   El consentimiento en peso normal: en negrita parecía un titular y no una
   casilla que hay que marcar. */
.cf7-cierre .cf7-acepto { font-size: .92rem; line-height: 1.5; }
.cf7-cierre .cf7-acepto .wpcf7-list-item { margin: 0; display: block; }
.cf7-cierre .cf7-acepto label { display: flex !important; align-items: flex-start; gap: .55rem; font-weight: 400 !important; margin: 0 !important; }
.cf7-cierre .cf7-acepto input[type="checkbox"] { margin-top: .2rem; flex: 0 0 auto; width: 1rem; height: 1rem; accent-color: #111; }
.cf7-legal {
	margin-top: 1rem !important;
	font-size: .84rem;
	line-height: 1.6;
	color: #6b6b6b;
}
.cf7-enviar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1.25rem;
	margin-top: 1.5rem !important;
}
.cf7-enviar-nota { font-size: .86rem; color: #6b6b6b; }

.mc-formulario input[type="submit"] {
	padding: 1rem 2.25rem;
	background: #111;
	color: #fff;
	border: 1px solid #111;
	border-radius: 2px;
	font: inherit;
	font-size: .95rem;
	letter-spacing: .02em;
	cursor: pointer;
}

.mc-legal-desistimiento {
	max-width: 40em;
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(0,0,0,.1);
	font-size: .87rem;
	line-height: 1.65;
	color: #4a4a4a;
}

@media (min-width: 768px) {
	.mc-expos           { grid-template-columns: repeat(3, 1fr); }
	.mc-encargos-tipos  { grid-template-columns: repeat(3, 1fr); }
	.mc-mosaico         { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
	.mc-dos-columnas    { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
	.mc-pasos           { grid-template-columns: repeat(2, 1fr); gap: 2rem 2.5rem; }
	/* Solo el relleno vertical: el lateral lo calcula la regla de arriba para
	   que el contenido siga alineado con el resto de la página. */
	.mc-sangre-clara    { padding-top: 3.5rem; padding-bottom: 3.5rem; }
	.mc-pag-seccion     { padding-top: 3.5rem; }
	.cf7-fila           { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
	.mc-formulario .wpcf7 { padding: 2.5rem; }
	.mc-legal-desistimiento { max-width: 46em; }
}

@media (min-width: 1024px) {
	.mc-pag-hero {
		grid-template-columns: 1.05fr .95fr;
		gap: 3.5rem;
		padding: 3.5rem 0 1.5rem;
	}
	.mc-pag-hero h1 { font-size: 2.1rem; }
	.mc-certificado { grid-template-columns: 1.15fr .85fr; gap: 3rem; }
	.mc-certificado-img img { max-height: 520px; width: auto; margin-inline: auto; }
	/* La obra del hero de encargos, con tope: es vertical y sin límite estira
	   la entrada media pantalla y empuja los precios fuera del primer vistazo. */
	.mc-encargos-hero .mc-pag-hero-img img { max-height: 420px; width: auto; margin-inline: auto; }
	/* Texto a la izquierda y foto a la derecha, la foto ocupando las dos filas y
	   pegada arriba para que su borde superior case con el antetítulo. Sin
	   `align-items: start` la foto se centraría contra un texto más alto y
	   volvería a abrirse hueco, esta vez arriba. */
	.mc-sobre-hero {
		grid-template-columns: 1.15fr .85fr;
		grid-template-areas:
			"cabeza foto"
			"cuerpo foto";
		gap: 1rem 3.5rem;
		align-items: start;
		padding: 3.5rem 0 1.5rem;
	}
	.mc-sobre-cabeza h1 { font-size: 2.1rem; }
	/* Vertical, 1034x1600. El tope evita que en pantallas anchas la foto crezca
	   más que el texto y vuelva a sobrar sitio debajo de la biografía. */
	.mc-sobre-foto img { max-height: 620px; width: auto; }
	/* Tres por fila con cinco pasos daba 3+2. Con los cuatro que dejó Norelys el
	   2026-08-16 daba 3+1, con «Entrega» sola y dos huecos vacíos al lado. Un
	   proceso se lee mejor en una sola fila, así que cuando hay exactamente
	   cuatro pasos van los cuatro seguidos. El selector los cuenta —«soy el
	   primero y quedan cuatro contando desde el final»—, así que la rejilla se
	   ajusta sola si mañana vuelven a ser cinco. */
	.mc-pasos { grid-template-columns: repeat(3, 1fr); }
	.mc-pasos:has(> li:first-child:nth-last-child(4)) {
		grid-template-columns: repeat(4, 1fr);
		gap: 2rem;
	}
	.mc-sangre-clara { padding-top: 4.5rem; padding-bottom: 4.5rem; }

	/* El título de banda a su columna. Ancho fijo y no fracción: así los dos
	   títulos, «Cómo trabajo» y «Plazos», arrancan en la misma vertical
	   aunque midan distinto.

	   Y el bloque llena la banda en vez de quedarse en su mitad izquierda. Con
	   una columna de texto de 36em dentro de una banda de 1290 px sobraban
	   **426 px de gris** a la derecha, y eso no se lee como aire: se lee como
	   un hueco donde debería haber algo. Medido. Ensanchando la columna del
	   título a 18rem y el texto a 44em, el sobrante baja a 242 px, que ya es
	   un margen y no un vacío. El texto queda algo más largo de la medida
	   ideal, pero son dos párrafos cortos sobre fondo claro y se sostiene.

	   👉 **Aquí es donde va la foto de Norelys pintando** cuando la mande. Es
	   la sección que habla de su proceso, así que es su sitio natural: se
	   añade una tercera columna y ya está. Mientras tanto no se pone un
	   marcador —ya hay uno en «Sobre Norelys», y dos se leen como obra a
	   medias— ni una obra terminada de relleno, que enseñaría el resultado y
	   no el proceso. */
	.mc-banda-dos {
		grid-template-columns: 18rem minmax(0, 44em);
		justify-content: start;
		gap: 3.5rem;
	}
	.mc-banda-cuerpo > p { max-width: none; }

	/* Formulario y refuerzo. El lateral se queda a la vista mientras se
	   rellenan los nueve campos, que es cuando sirve de algo. */
	.mc-form-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 2.5rem; }
	.mc-form-aside { position: sticky; top: 120px; }

	/* La cabecera de las páginas de archivo, a dos columnas ────────────────
	   Mismo tratamiento que las bandas de `/encargos/` y por el mismo motivo:
	   el texto con medida de lectura dentro de una caja de 1290 px dejaba
	   554 px de blanco a su derecha, y eso no se lee como aire sino como un
	   hueco. Con el título en su propia columna, el bloque llena la caja y el
	   texto conserva su medida.

	   ⚠️ El grid va en el `.e-con-inner`, **no en el `.e-con`**. El contenedor
	   exterior de Elementor tiene un único hijo, que es el interior, así que
	   ponerle columnas ahí no coloca nada, y el `justify-content: start` le
	   quita el centrado y lo saca de la caja: el título acababa en x=0 y el
	   texto en una columna de 280 px. Los dos widgets, el título y la
	   descripción, cuelgan del interior. */
	.e-con.mc-tienda-cabecera > .e-con-inner,
	.mc-cabecera-respaldo {
		display: grid;
		grid-template-columns: 18rem minmax(0, 44em);
		justify-content: start;
		gap: 0 3.5rem;
		align-items: start;
	}
	.e-con.mc-tienda-cabecera .elementor-widget-container { max-width: none; }
	.mc-cabecera-respaldo .rtsb-archive-description p { max-width: 44em; }
}

/* Ritmo entre secciones ───────────────────────────────────────────────────
   Dos secciones seguidas sobre blanco se leen como una sola: «Cómo funciona»
   y las condiciones se fundían, sin espacio, línea ni cambio de fondo que
   las separase. Se les da más aire y una línea fina, pero solo cuando de
   verdad van una detrás de otra sobre el mismo fondo: si la de antes es una
   banda gris, el cambio de color ya hace el trabajo y una línea sobraría. */
.mc-pag-seccion + .mc-pag-seccion {
	margin-top: 1.5rem;
	padding-top: 3.5rem;
	border-top: 1px solid rgba(0,0,0,.08);
}
.mc-sangre-clara + .mc-pag-seccion { margin-top: 0; border-top: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   BOTONES: EL ESTADO QUE FALTABA EN TODA LA WEB
   Ningún botón negro reaccionaba al pasar el ratón. Un botón que no responde
   se lee como una etiqueta, no como algo en lo que se puede pulsar, y en la
   página que tiene que cerrar un encargo de 2.400 € eso cuesta clics.

   El tratamiento es el mismo en todas partes —el negro aclara un punto y la
   pieza se levanta un pixel—, para que un botón se comporte igual esté donde
   esté. Y el foco de teclado se ve siempre: hasta ahora dependía del contorno
   por defecto del navegador, que sobre negro no se distingue.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ La clase `.mc-cta-solida` no tenía cuerpo propio: el relleno y el fondo se los daban
   reglas con contexto (`.mc-hero-cta a`, `.mc-cierre-cta a`, `.mc-vacio-salidas a`), y a
   secas solo heredaba la transición y el color de hover. Dentro de `.mc-banda-txt` no
   aplicaba ninguna de las tres, así que **el botón de encargos de la portada era un enlace
   de texto de 19 px de alto**, para el producto de 600 a 2.400 € que es la prioridad del
   lanzamiento. Los dos botones de verdad de la portada miden 57 px y llevan a obra de 100 €.

   Con la clase definida aquí funciona en cualquier sitio. Las reglas con contexto siguen
   valiendo y ganan por especificidad, así que el hero no se mueve. */
/* ⚠️ Con `:link` y `:visited`, y no `.mc-cta-solida` a secas. El tema declara
   `a:link, a:visited { color: #111 }`, que tiene especificidad (0,1,1) porque una
   pseudoclase puntúa como una clase, y le ganaba a `.mc-cta-solida`, que es (0,1,0).
   El botón salía **negro sobre negro**: el fondo sí se aplicaba y el texto no. */
/* LOS TRES NIVELES, Y CUÁNDO SE USA CADA UNO ───────────────────────────────
   Hasta el 2026-08-16 había cuatro aspectos distintos de enlace sin ninguna
   regla que dijera cuándo tocaba cada uno: negro sólido, contorno, enlace con
   flecha y enlace subrayado. El resultado es que el cierre de la rejilla de la
   portada, que lleva a toda la obra original, era un texto suelto en medio del
   blanco, y no se veía.

     1 · `.mc-cta-solida`   negro. **La acción que queremos en esa pantalla**, y
                            solo una por bloque. Comprar, encargar, enviar.
     2 · `.mc-cta-linea`    contorno, mismo tamaño. **La alternativa real** a la
                            de arriba, o el cierre de una sección de producto.
     3 · enlace de texto    dentro de un párrafo, y solo ahí. Navegación de
                            continuidad, nunca una acción de compra.

   Los dos botones miden igual y reaccionan igual al ratón: el negro aclara, el
   de contorno se rellena. Un botón se comporta igual esté donde esté. */
a.mc-cta-solida,
a.mc-cta-solida:link,
a.mc-cta-solida:visited,
a.mc-cta-linea,
a.mc-cta-linea:link,
a.mc-cta-linea:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .85rem 1.6rem;
	border: 1px solid #111;
	text-decoration: none;
	line-height: 1.3;
}

a.mc-cta-solida,
a.mc-cta-solida:link,
a.mc-cta-solida:visited {
	background: #111;
	color: #fff;
}

/* El de contorno: fondo transparente y no blanco, para que valga también sobre
   las bandas claras, que es donde vive la mitad de las veces. */
a.mc-cta-linea,
a.mc-cta-linea:link,
a.mc-cta-linea:visited {
	background: transparent;
	color: #111;
}

a.mc-cta-linea:hover,
a.mc-cta-linea:focus-visible {
	background: #111;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px -6px rgba(0,0,0,.45);
}

.mc-cta-solida,
.mc-hero-cta a,
.mc-cierre-cta a,
.mc-formulario input[type="submit"],
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce .single_add_to_cart_button {
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

/* Los sólidos: negro sobre blanco. */
.mc-cta-solida:hover,
.mc-cta-solida:focus-visible,
.mc-hero-cta a.mc-cta-solida:hover,
.mc-cierre-cta a.mc-cta-solida:hover,
.mc-formulario input[type="submit"]:hover,
.mc-formulario input[type="submit"]:focus-visible,
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce .single_add_to_cart_button:hover {
	background-color: #333;
	border-color: #333;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px -6px rgba(0,0,0,.45);
}

/* Los de contorno se rellenan, que es la respuesta que se espera de ellos. */
.mc-hero-cta a:not(.mc-cta-solida):hover,
.mc-hero-cta a:not(.mc-cta-solida):focus-visible,
.mc-cierre-cta a:not(.mc-cta-solida):hover,
.mc-cierre-cta a:not(.mc-cta-solida):focus-visible {
	background: #111;
	border-color: #111;
	color: #fff;
}

/* Al pulsar, el botón vuelve a su sitio: sin esto el clic no se nota. */
.mc-cta-solida:active,
.mc-hero-cta a:active,
.mc-cierre-cta a:active,
.mc-formulario input[type="submit"]:active,
.woocommerce .button:active,
.woocommerce .single_add_to_cart_button:active {
	transform: translateY(0);
	box-shadow: none;
}

/* Foco de teclado visible en todos ellos. Sobre negro, el contorno por
   defecto del navegador no se distingue. */
.mc-cta-solida:focus-visible,
.mc-hero-cta a:focus-visible,
.mc-cierre-cta a:focus-visible,
.mc-formulario input[type="submit"]:focus-visible,
.mc-mosaico-pieza:focus-visible,
.woocommerce .button:focus-visible,
.woocommerce .single_add_to_cart_button:focus-visible {
	outline: 2px solid #111;
	outline-offset: 3px;
}

/* Las obras del mosaico y las tarjetas también responden: son enlaces. */
.mc-mosaico-pieza img,
.mc-tipo-img img { transition: transform .35s ease, opacity .2s ease; }
.mc-mosaico-pieza:hover img,
.mc-tipo:hover .mc-tipo-img img { transform: scale(1.03); }
.mc-tipo { transition: border-color .18s ease, box-shadow .18s ease; }
.mc-tipo:hover { border-color: rgba(0,0,0,.25); box-shadow: 0 10px 28px -22px rgba(0,0,0,.55); }

@media (prefers-reduced-motion: reduce) {
	.mc-cta-solida,
	.mc-hero-cta a,
	.mc-cierre-cta a,
	.mc-formulario input[type="submit"],
	.mc-mosaico-pieza img,
	.mc-tipo,
	.mc-tipo-img img,
	.woocommerce .button,
	.woocommerce .single_add_to_cart_button { transition: none; }

	.mc-cta-solida:hover,
	.mc-formulario input[type="submit"]:hover,
	.woocommerce .button:hover,
	.mc-mosaico-pieza:hover img,
	.mc-tipo:hover .mc-tipo-img img { transform: none; }
}

/* Velo del banner en pantalla pequeña ─────────────────────────────────────
   En móvil el banner es más bajo, así que la zona oscura del degradado no
   llegaba a la línea superior del texto: «FIRMADAS Y NUMERADAS» se quedaba
   en 2,46:1 sobre la acuarela clara. Se sube el velo. */
@media (max-width: 767px) {
	.mc-banner::after {
		background: linear-gradient(to top,
			rgba(0,0,0,.90) 0%,
			rgba(0,0,0,.86) 45%,
			rgba(0,0,0,.55) 75%,
			rgba(0,0,0,.10) 100%);
	}
}

/* Botón «Finalizar compra» del carrito en bloque ───────────────────────────
   Es un <a> con fondo gris oscuro (#32373c), y el tema le impone
   a:link, a:visited { color:#111 } (0,1,1), así que el texto salía negro sobre
   oscuro, ~1,5:1. Se fuerza blanco con a.clase:link/:visited (0,2,1), que gana. */
a.wc-block-cart__submit-button:link,
a.wc-block-cart__submit-button:visited,
a.wc-block-cart__submit-button:hover,
a.wc-block-cart__submit-button:focus {
	color: #fff;
}