/**
 * Página pública de ofertas.
 *
 * REGLAS DURAS, todas con una medición detrás:
 *
 *  - LA CUADRÍCULA NO TIENE BREAKPOINT. `repeat(auto-fill, minmax(clamp(...),1fr))`:
 *    el suelo de la columna crece de forma continua con el ancho, así que ningún
 *    ancho de pantalla queda huérfano por construcción. Medido: 2 columnas de 320
 *    a 460 px, 3 hasta ~700, 4 de ahí arriba. El único corte del proyecto —768 px,
 *    el mismo que las franjas y el popup— queda para el cromado.
 *  - `minmax(0, 1fr)` y `min-width: 0` en la rejilla Y EN TODOS los hijos de la
 *    tarjeta. Nunca `1fr` a secas: el suelo de min-content de una fila de precios
 *    empuja la tarjeta más allá de su columna, y sin scroll horizontal visible
 *    nadie se entera. Es exactamente el peor fallo móvil que tuvo el popup
 *    (407 px de contenido en una tarjeta de 343).
 *  - TODO lo interactivo se ancla a `.mro`. Reglas del tema del tipo
 *    `.woocommerce-page img { height: auto }` pesan (0,1,1) y ganan a una clase
 *    suelta (0,1,0). Ya rompió el logotipo de las franjas una vez.
 *  - Utilidad propia para el texto de solo lectores (`.mro-vh`). No se usa la del
 *    tema: si Kadence la renombra, los precios se quedan sin etiquetar y no lo ve
 *    nadie.
 *  - Verde de marca SIEMPRE como relleno con tinta encima. Blanco sobre #82bbac
 *    da 2,18:1 y no pasa AA.
 *  - Cero colores nuevos: son los mismos tokens medidos del popup.
 *      #15191b sobre blanco  17,70:1   ·  sobre crema 15,60:1  ·  sobre menta 15,36:1
 *      #4b5563 sobre blanco   7,56:1   (precio tachado; el consejo prohíbe #6b716e y #9ca3af)
 *      #4b5563 como borde de tarjeta: 7,56:1, muy por encima del 3:1 que pide
 *      SC 1.4.11 para el contorno de algo pulsable. #e8e0d0 daría 1,31:1.
 *      #15191b como anillo de foco: 17,70:1 (el de la franja era 1,00:1).
 *  - El ahorro NUNCA se distingue solo por color: lleva la palabra «Ahorra»,
 *    tinta sobre tinte.
 */

.mro {
	/* Tokens. El verde nunca es color de texto. */
	--mro-ink: #15191b;
	--mro-muted: #4b5563;
	--mro-brand: #82bbac;
	--mro-brand-dark: #6faa9a;
	--mro-accent: #2f6f5d;
	--mro-cream: #f5f0e8;
	--mro-mint: #e8f1ec;

	/* Salida fuerte. Las curvas de serie de CSS son flojas y se notan sin
	   intención; esta arranca rápido, que es lo que hace que una respuesta al
	   puntero se sienta inmediata. NUNCA `ease-in` en UI: retrasa el primer
	   movimiento, justo el instante que se está mirando. */
	--mro-ease-out: cubic-bezier(0.23, 1, 0.32, 1);

	box-sizing: border-box;
	max-width: 1160px;
	margin: 0 auto;
	/*
	 * FLUIDO, no escalonado. Con `padding: 28px 12px` en móvil y `40px 24px` a
	 * partir de 768 px había un salto de un píxel: medido, al pasar de 767 a 768
	 * la tarjeta ENCOGÍA de 179,8 a 169,5 px mientras la ventana crecía, porque el
	 * relleno del contenedor y el hueco de la rejilla subían de golpe. Es la misma
	 * forma de error por uno que ya quemó a este proyecto con los 720 px.
	 * Hallazgo [RWD-n4] de la segunda revisión final.
	 *
	 * ⚠️ Y no «desaparece»: SE ENCOGE Y SE MUDA. Remedido con este clamp puesto,
	 * 24 tarjetas y sin barra de desplazamiento:
	 *
	 *            borde de la tarjeta   contenido   relleno de la tarjeta
	 *   767 px         177,2 px         157,2 px          10 px
	 *   768 px         177,4 px         153,4 px          12 px
	 *
	 * El borde ya crece sin saltos —que es lo que este clamp vino a arreglar y
	 * está arreglado—, pero el contenido pega un escalón de 3,8 px porque la
	 * media query de abajo sube el relleno DE LA TARJETA de 10 a 12 px. Es
	 * deliberado (aire de escritorio) y no rompe nada; queda escrito para que
	 * nadie lo redescubra creyendo que el arreglo falló. [RWD-n11] de la tercera
	 * revisión final.
	 */
	padding: clamp(28px, 3.4vw, 40px) clamp(12px, 2vw, 24px) clamp(48px, 5.4vw, 64px);
	background: var(--mro-cream);
	color: var(--mro-ink);
	font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

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

/* Solo para lectores de pantalla. Propia, no la del tema. */
.mro .mro-vh {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Cabecera de la página ------------------------------------------------ */

.mro .mro__title {
	margin: 0 0 8px;
	font-size: 30px;
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -.5px;
	color: var(--mro-ink);
	overflow-wrap: anywhere;
}

.mro .mro__lead {
	margin: 0 0 26px;
	max-width: 62ch;
	font-size: 15px;
	line-height: 1.55;
	color: var(--mro-muted);
}

.mro .mro__cta {
	display: inline-block;
	min-height: 48px;
	padding: 14px 26px;
	border-radius: 6px;
	background: var(--mro-brand);
	color: var(--mro-ink);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .3px;
	text-decoration: none;
}

/* --- Bloque de oferta ----------------------------------------------------- */

.mro .mro__offer { margin: 0 0 34px; }

.mro .mro__offer-title {
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--mro-brand);
	font-size: 19px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -.2px;
	color: var(--mro-ink);
	overflow-wrap: anywhere;
}

.mro .mro__offer-name {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--mro-muted);
}

.mro .mro__more {
	margin: 14px 0 0;
	font-size: 14px;
	color: var(--mro-muted);
}

.mro .mro__more a { color: var(--mro-accent); }

/* --- La cuadrícula -------------------------------------------------------- */

.mro .mro-grid {
	display: grid;
	/* Sin breakpoint: el suelo crece con el ancho, de 132 px a 240 px.
	   132 y no 140: medido en el clon, el hueco útil a 320 px es de 281 px, y con
	   suelo 140 y hueco 10 hacían falta 290 — la rejilla caía a una sola columna
	   justo en el móvil más estrecho. */
	/*
	 * ⚠️ La INVERSIÓN DE DENSIDAD es inherente y se acepta.
	 *
	 * La tarjeta crece con el ancho dentro de cada tramo y ENCOGE al saltar de
	 * columna, así que las tarjetas más pequeñas del continuo no están en el móvil
	 * más estrecho sino en los saltos. Es la contrapartida directa de no tener
	 * breakpoints: con `auto-fill` la rejilla añade una columna en cuanto cabe, y
	 * ahí es donde reparte menos ancho a cada una.
	 *
	 * Medido (24 tarjetas, sin barra de desplazamiento, un ancho por carga):
	 *
	 *   435 px → 201,5 px  (2 columnas)   |   560 px → 173,3 px  (3 columnas)
	 *   436 px → 132,0 px  (3 columnas)   |   579 px → 132,8 px  (4 columnas)
	 *   ─────────────────────────────────────────────────────────────────────
	 *   la caída es de 69,5 px (−34,5 %) en UN píxel de ancho de ventana.
	 *
	 * ⚠️ Los números que había aquí —«de ~206 px a 480 px se pasa a ~164 px a
	 * 540»— NO REPRODUCÍAN, ni en valor ni en dirección: entre 480 y 540 la
	 * tarjeta no encoge, CRECE (146,7 → 166,7 px) y son las mismas tres columnas.
	 * Mandaban al siguiente lector a buscar un defecto donde no hay ninguno.
	 * Una desviación aceptada vale lo que valga la medición que lleva dentro.
	 * [RWD-n10] de la tercera revisión final.
	 *
	 * Quitarla exigiría breakpoints, que es justo lo que G11 prohíbe y por buenas
	 * razones (ningún ancho huérfano, y nada que ajustar cuando salga un teléfono
	 * nuevo). Nada desborda en ningún ancho de 280 a 1440 px, que es el requisito
	 * real. Hallazgo [RWD-n4], mitad aceptada; la otra mitad —el escalón de un
	 * píxel a 768— sí estaba mal y está arreglada arriba.
	 */
	grid-template-columns: repeat(auto-fill, minmax(clamp(132px, 22vw, 240px), 1fr));
	/* Fluido por el mismo motivo que el relleno de arriba: ver [RWD-n4]. */
	gap: clamp(8px, 1.2vw, 14px);
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

/* La tarjeta es la caja Y el objetivo táctil: el enlace vive en el <h3> y se
   estira por encima con un ::after. Ver el comentario de render_card(). */
.mro .mro-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: 10px 10px 14px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--mro-muted);
	border-radius: 10px;
	/* Solo estas tres. `all` haría transicionar también el layout. */
	transition:
		transform 160ms var(--mro-ease-out),
		box-shadow 160ms var(--mro-ease-out),
		border-color 160ms var(--mro-ease-out);
}

.mro .mro-card__link {
	color: var(--mro-ink);
	text-decoration: none;
	overflow-wrap: anywhere;
}

/*
 * Con la oferta sin abrir, el título es un <button> y no un <a>: la ficha cobra
 * otro precio y no se manda a nadie allí. Se le quita todo el aspecto de botón
 * para que la tarjeta se vea igual en los dos estados — lo que cambia es a dónde
 * lleva, no cómo se ve.
 */
.mro button.mro-card__link {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

/* La capa que hace pulsable toda la tarjeta. */
.mro .mro-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 10px;
}

/* El anillo rodea la TARJETA, no solo el título: es lo que se va a pulsar.
   `:focus-within` y no `:has()`, que si el navegador no lo entiende tira la
   regla entera. #15191b sobre blanco = 17,70:1. */
.mro .mro-card:focus-within {
	outline: 2px solid var(--mro-ink);
	outline-offset: 2px;
}

/* La pulsación se confirma en cualquier dispositivo: en táctil no había ninguna
   respuesta al tocar, y una tarjeta que es toda ella pulsable tiene que acusar
   recibo. Sutil a propósito (0,985): se siente, no se ve. */
.mro .mro-card:active {
	background: var(--mro-mint);
	transform: scale(.985);
}

/* La foto, con la caja reservada desde el primer pintado. */
.mro .mro-card__shot {
	display: block;
	position: relative;
	z-index: 0;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin-bottom: 4px;
	border-radius: 6px;
	background: var(--mro-cream);
	overflow: hidden;
}

.mro .mro-card__shot img {
	display: block;
	transition: transform 160ms var(--mro-ease-out);
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
}

.mro .mro-card__ph {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(150deg, #e8f1ec 0%, #d3e4dc 100%);
}

.mro .mro-card__name {
	margin: 0;
	min-width: 0;
	font-size: 14px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--mro-ink);
	overflow-wrap: anywhere;
}

.mro .mro-card__detail {
	margin: 0;
	min-width: 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--mro-muted);
	overflow-wrap: anywhere;
}

/* Fila de precios: puede envolver. Es la que empujaba la tarjeta en el popup. */
.mro .mro-card__prices {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	min-width: 0;
	/*
	 * ⚠️ `margin-top: auto` — precio y ahorro ANCLADOS AL FONDO de la tarjeta.
	 *
	 * La tarjeta es una columna flexible, así que antes todo iba apilado detrás
	 * del nombre: cuando un nombre ocupaba tres líneas en vez de dos, el precio y
	 * la pastilla de ahorro de esa tarjeta quedaban más abajo que los de la
	 * tarjeta de al lado. En un móvil a dos columnas eso se ve a la primera y
	 * queda desordenado.
	 *
	 * La rejilla estira todas las tarjetas de una fila a la misma altura, así que
	 * con el margen automático el bloque de precio cae siempre a la misma altura
	 * en todas. No se recorta ningún nombre: lo que varía es el hueco entre el
	 * nombre y el precio, no la posición del precio.
	 */
	margin: auto 0 0;
}

.mro .mro-card__prices del {
	min-width: 0;
	font-size: 12px;
	color: var(--mro-muted);
	text-decoration: line-through;
}

.mro .mro-card__prices ins {
	min-width: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--mro-ink);
	text-decoration: none;
	background: none;
}

/* El ahorro: tinta sobre tinte y CON la palabra. Nunca solo color. */
.mro .mro-card__save {
	align-self: flex-start;
	max-width: 100%;
	min-width: 0;
	margin: 2px 0 0;
	padding: 3px 8px;
	border-radius: 4px;
	background: var(--mro-mint);
	font-size: 12px;
	font-weight: 700;
	color: var(--mro-ink);
	overflow-wrap: anywhere;
}

/* --- El diálogo de «todavía no ha empezado» ------------------------------- */

.mro-soon {
	max-width: 22rem;
	padding: 24px;
	border: 1px solid var(--mro-muted);
	border-radius: 12px;
	background: var(--mro-cream);
	color: var(--mro-ink);
	font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	text-align: center;
}

.mro-soon::backdrop { background: rgba(21, 25, 27, .55); }

.mro-soon__label {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 700;
}

/*
 * El reloj en monoespaciada y con `tabular-nums`. Sin esto los dígitos tienen
 * anchos distintos y el contador BAILA cada segundo, que es exactamente el
 * defecto que ya costó una vuelta en la franja: allí `tabular-nums` no bastó con
 * la DM Sans del tema y hubo que poner una pila monoespaciada. Se copia aquí.
 */
.mro-soon__clock {
	margin: 0 0 14px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-variant-numeric: tabular-nums;
	font-size: 34px;
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--mro-accent);
}

.mro-soon__when {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--mro-muted);
}

.mro-soon__acciones { margin: 0; }

/* Nada aparece de la nada: entra desde 0,96 con opacidad, no desde escala 0. */
@media (prefers-reduced-motion: no-preference) {
	.mro-soon[open] {
		animation: mro-soon-in 150ms var(--mro-ease-out, ease-out);
	}
	@keyframes mro-soon-in {
		from { opacity: 0; transform: scale(.96); }
		to   { opacity: 1; transform: scale(1); }
	}
}

/* --- Cromado: el único corte del proyecto -------------------------------- */

@media (min-width: 768px) {
	.mro .mro__title { font-size: 38px; }
	.mro .mro__offer-title { font-size: 22px; }
	/*
	 * El padding es de la TARJETA, no del enlace.
	 *
	 * Esta regla se escribió cuando el enlace era el envoltorio flex que sostenía
	 * el relleno de la tarjeta. Al pasar al patrón de enlace estirado, el relleno
	 * se mudó a `.mro-card` y el enlace se quedó como un `<a>` en línea dentro del
	 * `<h3>` — con lo que aquí seguía aplicándose a un elemento que ya no juega
	 * ese papel: medido a 1024 px, el nombre del producto empezaba 12 px a la
	 * derecha de la foto y del precio, y el escritorio se quedaba con el relleno
	 * de móvil. Hallazgo [RWD-n7] de la segunda revisión final.
	 */
	.mro .mro-card { padding: 12px 12px 16px; }
	.mro .mro-card__name { font-size: 15px; }
	.mro .mro-card__prices ins { font-size: 19px; }
}

@media (hover: hover) and (pointer: fine) {
	/*
	 * El objetivo es la TARJETA ENTERA —el enlace se estira por encima de ella—,
	 * así que la respuesta va en la tarjeta y no solo en el texto. Antes era un
	 * cambio de borde instantáneo más un subrayado: correcto pero seco.
	 *
	 * Se eleva 2 px y se ilumina. Nada de rebotes: esto se ve muchas veces por
	 * visita, y una animación que se repite tanto tiene que ser corta y discreta.
	 */
	.mro .mro-card:hover {
		border-color: var(--mro-ink);
		transform: translateY(-2px);
		box-shadow: 0 6px 16px rgba(21, 25, 27, .10);
	}
	.mro .mro-card:hover .mro-card__link { text-decoration: underline; }
	/* La foto acompaña, dentro de su caja con overflow oculto. */
	.mro .mro-card:hover .mro-card__shot img { transform: scale(1.03); }
	/* Después del hover A PROPÓSITO: misma especificidad, así que al pulsar con el
	   ratón gana la pulsación y no se queda elevada. */
	.mro .mro-card:active { transform: scale(.985); }
	.mro .mro__cta:hover { background: var(--mro-brand-dark); }
}

@media (prefers-reduced-motion: reduce) {
	.mro * { transition: none !important; animation: none !important; }
	/*
	 * Quitar la transición NO quita el `transform`: sin esto, la tarjeta seguía
	 * dando el salto de 2 px, solo que de golpe — peor que con transición.
	 * Movimiento reducido es menos movimiento, no menos información: el borde,
	 * la sombra y el subrayado se quedan.
	 */
	.mro .mro-card:hover,
	.mro .mro-card:active,
	.mro .mro-card:hover .mro-card__shot img { transform: none; }
}

/* --- Cuenta atrás --------------------------------------------------------- */

/*
 * El hueco se reserva SIEMPRE, con JS y sin él: así el texto puede aparecer al
 * cargar y cambiar de longitud —«Quedan 3 h 24 min» → «Quedan 59 min»— sin mover
 * ni un píxel de la cuadrícula que tiene debajo. Está sola en su línea, así que
 * no hay nada a su lado que empujar.
 */
.mro .mro__count {
	min-height: 22px;
	margin: -6px 0 14px;
	font-size: 14px;
	line-height: 22px;
	font-weight: 700;
	color: var(--mro-accent);
}

/*
 * La pastilla de una oferta que aún no ha abierto.
 *
 * Dice «Bajará» en vez de «Ahorra» —eso lo hace el PHP— y se pinta en crema en
 * vez de en menta, para que las dos tarjetas no sean idénticas de un vistazo.
 * Sigue siendo tinta sobre tinte: nunca solo color, la palabra ya lo dice.
 *   #15191b sobre #f5f0e8 = 15,60:1
 */
.mro .mro-card__save--pronto {
	background: var(--mro-cream);
	box-shadow: inset 0 0 0 1px var(--mro-muted);
}

/*
 * El enlace de «hay N más»: es la ÚNICA salida cuando la página llega a su techo
 * de tarjetas, y era el objetivo táctil más pequeño de toda la pantalla —14 px
 * sin relleno, unos 19 px de alto— en una página hecha para tocarse con el
 * pulgar. Hallazgo [RWD-n5]. Ya está solo en su línea, así que darle 44 px no
 * mueve nada.
 */
.mro .mro__more a {
	display: inline-block;
	min-height: 44px;
	padding: 12px 4px;
	line-height: 20px;
	color: var(--mro-accent);
}

/* --- Cuando la oferta caduca con la página abierta ----------------------- */

/*
 * No basta con quitar la cuenta atrás: hay que quitar los PRECIOS. Los deja el
 * servidor puestos y los retira el navegador cuando su reloj llega al final, que
 * es la única forma de hacerlo en una página que se sirve desde caché.
 */
/*
 * ⚠️ COMBINADOR DE HIJO, no de descendencia.
 *
 * Con `.mro--caducada .mro__lead` esta regla alcanzaba también el párrafo que
 * vive DENTRO del aviso, que llevaba la misma clase, y dejaba el aviso sin la
 * frase que lo explica. El aviso tiene ahora clases propias
 * (`mro__over-lead`), pero el `>` se queda: es lo que impide
 * que vuelva a pasar si alguien reutiliza una clase de la página ahí dentro.
 */
.mro.mro--caducada > .mro__offer,
.mro.mro--caducada > .mro__lead,
.mro.mro--caducada > .mro__more {
	display: none;
}

/*
 * Una oferta que muere mientras otra sigue viva: se va su cuadrícula y su cuenta
 * atrás, se queda su titular, y el hueco dice por qué está vacío.
 */
.mro .mro__offer--caducada .mro-grid,
.mro .mro__offer--caducada .mro__count {
	display: none;
}

.mro .mro__offer-over {
	margin: 4px 0 0;
	color: #4b5563;
	font-size: 15px;
}

.mro .mro__over {
	margin: 8px 0 0;
}

/*
 * ⚠️ La frase del aviso NECESITA su propia regla.
 *
 * Al sacarla de `.mro__lead` —para que la regla de ocultación con combinador de
 * descendencia dejara de comérsela— se quedó SIN NINGUNA declaración: medido a
 * 1280 px salía a 16 px, en tinta en vez de gris y a 1.112 px de ancho, contra
 * los 15 px / gris / 531 px de la entradilla de la página. Y como el estado
 * «terminada» del servidor sigue usando `.mro__lead` para la MISMA frase, la
 * pantalla dibujada por el servidor y la dibujada por el navegador eran
 * tipográficamente dos páginas distintas para el mismo estado.
 *
 * Lo encontraron tres asientos por separado: [UIX-n8], [A11Y-5] y [MNT-5].
 */
.mro .mro__over-lead {
	margin: 0 0 20px;
	max-width: 62ch;
	font-size: 15px;
	line-height: 1.55;
	color: var(--mro-muted);
}

/*
 * ANILLO DE FOCO de los dos destinos del rescate.
 *
 * Cuando una oferta muere bajo el lector, el foco se manda al aviso —al de la
 * página si murió la última, al del bloque si murió una de varias—. Son un
 * `div` y un `p` con `tabindex="-1"`, así que sin esta regla quien navega con
 * teclado y VE la pantalla no tiene ni idea de adónde ha ido a parar.
 *
 * Va con `:focus` y con el prefijo `.mro` a propósito, no con `:focus-visible`
 * a secas: Kadence trae `.hide-focus-outline *:focus { outline: 0 }` y se pone
 * esa clase justo después de un foco programático, que es EXACTAMENTE nuestro
 * caso. Con el prefijo la regla puntúa (0,3,0) contra su (0,2,0) y gana sin
 * `!important`. Medido: el rescate de página se veía y el de bloque no, y
 * ninguno de los dos mientras la clase del tema estuviera puesta. [A11Y-3]
 *
 * `.mro__title` no entra aunque el hallazgo lo nombrara: desde que el rescate
 * por bloque va al aviso, el titular ya no recibe foco y la regla sería muerta.
 *
 * Precio de usar `:focus`: si alguien hace clic con el ratón sobre el aviso
 * —que tiene `tabindex="-1"`— también verá el anillo. Se acepta: `:focus-visible`
 * no casa de forma fiable tras un foco por código, que es el único caso que hay
 * que cubrir aquí.
 */
.mro .mro__over:focus,
.mro .mro__offer-over:focus {
	outline: 2px solid var(--mro-ink);
	outline-offset: 2px;
	border-radius: 4px;
}

/* La frase del titular que el navegador intercambia al morir la oferta. */
.mro .mro__offer-when { display: inline; }