/* ==========================================================================
   GENERADO por bin/partir-woocommerce-css.py a partir de woocommerce.css — NO EDITAR.
   Hoja «tienda»: las secciones de woocommerce.css que usa esta página, en el mismo orden.
   Para cambiar un estilo, cambia woocommerce.css y vuelve a ejecutar el script.
   ========================================================================== */

/* ==========================================================================
   MI TEMA — WooCommerce
   Todos los estilos de WooCommerce. El CSS nativo de WC está desactivado.
   ========================================================================== */

/* --------------------------------------------------------------------------
   AVISOS (woocommerce-notices-wrapper)
   El JS de notices.js los convierte en toasts y oculta el wrapper original.
   Mantenemos estilos básicos para el caso en que el JS no cargue (fallback).
   -------------------------------------------------------------------------- */

/* Errores de validación del checkout inyectados por wc-checkout.js dentro de form.checkout
   (prepended como .woocommerce-NoticeGroup-checkout — NO está dentro de .woocommerce-notices-wrapper) */
.woocommerce-NoticeGroup-checkout {
  margin-bottom: var(--mt-space-5);
}

.woocommerce-NoticeGroup-checkout ul.woocommerce-error,
.woocommerce-NoticeGroup-checkout .woocommerce-error {
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-1);
  padding: var(--mt-space-3) var(--mt-space-5);
  border-radius: var(--mt-radius-md);
  border-left: 4px solid var(--mt-color-error);
  background-color: color-mix(in srgb, var(--mt-color-error) 8%, white);
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-body);
  box-shadow: var(--mt-shadow-sm);
  list-style: none;
  margin: 0;
}

.woocommerce-NoticeGroup-checkout ul.woocommerce-error li,
.woocommerce-NoticeGroup-checkout .woocommerce-error li {
  padding: var(--mt-space-1) 0;
}

.woocommerce-notices-wrapper[hidden] {
  display: none !important;
}

/* Fallback sin JS */
.woocommerce-notices-wrapper:not([hidden]) .woocommerce-message,
.woocommerce-notices-wrapper:not([hidden]) .woocommerce-info {
  display: flex;
  align-items: center;
  gap: var(--mt-space-3);
  padding: var(--mt-space-3) var(--mt-space-5);
  border-radius: var(--mt-radius-md);
  border-left: 4px solid var(--mt-color-primary);
  background-color: var(--mt-color-bg-white);
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-body);
  box-shadow: var(--mt-shadow-sm);
  margin-bottom: var(--mt-space-3);
  list-style: none;
}

.woocommerce-notices-wrapper:not([hidden]) .woocommerce-error {
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-1);
  padding: var(--mt-space-3) var(--mt-space-5);
  border-radius: var(--mt-radius-md);
  border-left: 4px solid var(--mt-color-error);
  background-color: var(--mt-color-bg-white);
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-body);
  box-shadow: var(--mt-shadow-sm);
  margin-bottom: var(--mt-space-3);
  list-style: none;
}


/* --------------------------------------------------------------------------
   ERRORES DE VALIDACIÓN INLINE
   Renderizados por notices.js bajo cada campo
   -------------------------------------------------------------------------- */

.mt-field-error {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  font-size: var(--mt-font-size-xs);
  color: var(--mt-color-error);
  font-weight: var(--mt-font-weight-medium);
  margin-top: var(--mt-space-1);
  line-height: 1.4;
}

/* Icono SVG de error pequeño (inyectado por CSS vía ::before) */
.mt-field-error::before {
  content: '';
  flex-shrink: 0;
  display: inline-block;
  width: 12px;
  height: 12px;
  /* 0.2em y no 1px: la línea del mensaje mide 1,4em y el icono 12px, así que para
     centrarlo hacen falta (16,8 - 12) / 2 = 2,4px a 12px de letra. Con 1px fijo
     quedaba alto, y además no seguía el tamaño del texto si algún día cambia. */
  margin-top: 0.2em;
  /* currentColor y no --mt-color-error: el icono debe seguir el color del
     TEXTO del mensaje, no un rojo fijo. En el boletín del pie, footer.css
     pasa este texto a blanco para que se lea sobre el azul de la franja;
     con el rojo escrito aquí, el texto salía blanco y el icono rojo. Y
     el rojo sobre aquel azul tampoco llegaba a contraste. */
  background-color: currentColor;
  mask-image: var(--mt-icon-error);
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-image: var(--mt-icon-error);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}

.mt-field-error[hidden],
.mt-field-error:empty {
  display: none !important;
}

/* Campos inválidos — borde rojo + shadow sutil */
.form-row.mt-field--invalid input.input-text,
.form-row.mt-field--invalid select,
.form-row.mt-field--invalid textarea,
.mt-voucher-field.mt-field--invalid .mt-voucher-field__input,
.mt-voucher-field.mt-field--invalid .mt-voucher-field__textarea {
  border-color: var(--mt-color-error) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.10) !important;
}

/* Campos válidos (opcional: borde verde sutil) */
.form-row.mt-field--valid input.input-text,
.form-row.mt-field--valid select,
.form-row.mt-field--valid textarea {
  border-color: var(--mt-color-success);
}

/* Label roja en campo inválido */
.form-row.mt-field--invalid > label,
.mt-voucher-field.mt-field--invalid .mt-voucher-field__label {
  color: var(--mt-color-error);
}

/* --------------------------------------------------------------------------
   BOTONES WOOCOMMERCE
   -------------------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
a.mt-btn,
button.mt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mt-space-2);
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-lg);
  font-weight: var(--mt-font-weight-regular);
  letter-spacing: var(--mt-letter-spacing-wider);
  /* Explícito y no heredado de "normal": sin esto, la altura real de un
     botón pill depende de métricas de línea implícitas de la fuente (que
     varían) en lugar de su propio padding/font-size — por eso
     "Afegeix a la cistella" y "Selecciona opcions" se renderizaban a
     alturas distintas pese a tener el mismo padding. `--mt-line-height-
     tight` (1.2) y no `1` exacto: sobre Bebas Neue, line-height:1 dejaba
     el texto demasiado pegado a la línea y se veía pequeño/comprimido en los botones
     grandes (p. ej. "Vés a caixa" en el carrito, font-size xl) — 1.2 mantiene
     la altura determinista pero con algo más de aire vertical. */
  line-height: var(--mt-line-height-tight);
  text-decoration: none;
  border: none;
  border-radius: var(--mt-radius-pill);
  padding: var(--mt-space-3) var(--mt-space-8);
  cursor: pointer;
  transition: var(--mt-transition-colors);
  white-space: nowrap;
  background-color: var(--mt-color-bg-light);
  color: var(--mt-color-text-body);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--mt-color-border);
  color: var(--mt-color-text-body);
}

/* Botón primario — CTA */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce a.button.checkout-button,
.woocommerce .checkout-button,
a.mt-btn--primary,
button.mt-btn--primary {
  background-color: var(--mt-color-primary-dark);
  color: var(--mt-color-white);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.checkout-button:hover,
.woocommerce .checkout-button:hover,
a.mt-btn--primary:hover,
button.mt-btn--primary:hover {
  background-color: var(--mt-color-primary-darker);
  color: var(--mt-color-white);
}

/* Botón desactivado */
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   PRECIOS
   -------------------------------------------------------------------------- */

.woocommerce-Price-amount {
  font-family: var(--mt-font-body);
  font-weight: var(--mt-font-weight-semibold);
  color: var(--mt-color-text-heading);
}

del .woocommerce-Price-amount {
  color: var(--mt-color-text-secondary);
  font-weight: var(--mt-font-weight-regular);
}

ins {
  text-decoration: none;
}

/* Precio de oferta en turquesa de marca, no en rojo: el rojo es el color
   de los errores del formulario y en la tienda hacía que el descuento pareciera un aviso.
   primary-dark porque es el turquesa para TEXTO sobre blanco (5,06:1, AA); en
   alto contraste el token pasa a #00232a y ya cumple AAA sin tocar nada. */
ins .woocommerce-Price-amount {
  color: var(--mt-color-primary-dark);
}

/* --------------------------------------------------------------------------
   INPUT CANTIDAD
   -------------------------------------------------------------------------- */

.quantity {
  display: inline-flex;
  align-items: center;
}

/* WooCommerce pinta <div class="quantity hidden"> con un input type="hidden" dentro
   cuando min === max: un vale, o cualquier producto sold_individually. La
   cantidad no se puede cambiar, y por eso no la quiere enseñar.

   Quien oculta ese div es la hoja de WooCommerce, que en este tema está
   desactivada (CLAUDE.md, "CSS WooCommerce desactivado"). Sin esta regla el
   contenedor se quedaba visible: reset.css solo cubre el atributo [hidden], y
   esto es una clase. El resultado era una caja vacía con los botones +/- que
   inyecta main.js y ningún número a la vista — y el + seguía subiendo el valor del
   campo oculto, así que el formulario enviaba cantidad 100 mientras el carrito
   solo añadía uno. */
.quantity.hidden {
  display: none;
}

.quantity .qty {
  width: 72px;
  padding: var(--mt-space-2) var(--mt-space-3);
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-base);
  font-weight: var(--mt-font-weight-medium);
  color: var(--mt-color-text-heading);
  background-color: var(--mt-color-white);
  border: var(--mt-border);
  border-radius: var(--mt-radius-md);
  text-align: center;
  transition: border-color 0.2s ease;
  -moz-appearance: textfield;
}

.quantity .qty:focus {
  outline: none;
  /* primary-dark: el borde es el indicador de foco, y con el turquesa de marca
     se quedaba en 2,49:1 (WCAG 1.4.11 pide 3:1). */
  border-color: var(--mt-color-primary-dark);
  box-shadow: 0 0 0 3px rgba(20, 181, 197, 0.15);
}

.quantity .qty::-webkit-inner-spin-button,
.quantity .qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

/* --------------------------------------------------------------------------
   BOTONES +/- (inyectados vía JS en todos los .quantity)

   --mt-qty-h define la altura compartida entre el input y los botones para
   garantizar igualdad exacta independientemente de las quirks del navegador.
   Cálculo: padding-block (8px × 2) + font-size (16px) + borders (1px × 2) = 34px.
   -------------------------------------------------------------------------- */

.quantity {
  --mt-qty-h: calc(var(--mt-space-2) * 2 + var(--mt-font-size-base) + 2px);
}

/* Cuando los botones están presentes, eliminamos border-radius del input */
.quantity:has(.mt-qty-btn) .qty {
  height: var(--mt-qty-h);
  border-radius: 0;
  line-height: var(--mt-qty-h);
  padding-block: 0;
}

.mt-qty-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: var(--mt-qty-h);
  background-color: var(--mt-color-white);
  border: var(--mt-border);
  color: var(--mt-color-text-heading);
  font-size: var(--mt-font-size-base);
  font-weight: var(--mt-font-weight-regular);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}

/* E7 — área táctil mínima 44×44 (caja visible 36×34): pseudo-elemento
   invisible. No expandimos hacia el lado que toca el input .qty (para no
   robarle clics), solo hacia el lado exterior y verticalmente. */
.mt-qty-btn::after {
  content: '';
  position: absolute;
  top: -5px;
  bottom: -5px;
}

.mt-qty-btn--minus::after {
  left: -8px;
  right: 0;
}

.mt-qty-btn--plus::after {
  left: 0;
  right: -8px;
}

.mt-qty-btn:hover {
  background-color: var(--mt-color-bg-subtle);
  border-color: var(--mt-color-primary-dark);
  color: var(--mt-color-primary-dark);
}

.mt-qty-btn--minus {
  border-radius: var(--mt-radius-md) 0 0 var(--mt-radius-md);
  border-right: none;
}

.mt-qty-btn--plus {
  border-radius: 0 var(--mt-radius-md) var(--mt-radius-md) 0;
  border-left: none;
}

/* Con dedo, 44 px de caja real (revisión de móvil del 14-10): la zona invisible del
   ::after ya llegaba a 44, pero el botón que se ve medía 36×34 y parecía pequeño. */
@media (pointer: coarse) {
  .quantity {
    --mt-qty-h: 44px;
  }

  .mt-qty-btn {
    width: 44px;
  }

  .mt-qty-btn::after {
    content: none;
  }
}

/* --------------------------------------------------------------------------
   PAY YOUR PRICE — campo de precio personalizable (plugin WooCommerce PDF Vouchers)
   Da estilo a los elementos .form-row y a los botones de cantidad predefinida
   que el plugin inyecta vía woocommerce_before_add_to_cart_button.
   -------------------------------------------------------------------------- */

.vou_pay_your_price_labels_wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mt-space-2);
  margin-bottom: var(--mt-space-3);
}

.vou_pay_your_price_label {
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-secondary);
}

/* Input de precio: reutiliza el mismo estilo que .quantity .qty */
.form-row.woocommerce-form-field--text label.vou_set_pay_your_price {
  display: block;
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-semibold);
  color: var(--mt-color-text-heading);
  margin-bottom: var(--mt-space-1);
}

.form-row.woocommerce-form-field--text .woocommerce-input-wrapper {
  display: block;
}

.form-row.woocommerce-form-field--text input.input-text {
  width: 100%;
  padding: var(--mt-space-2) var(--mt-space-3);
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-base);
  font-weight: var(--mt-font-weight-medium);
  color: var(--mt-color-text-heading);
  background-color: var(--mt-color-white);
  border: var(--mt-border);
  border-radius: var(--mt-radius-md);
  transition: border-color 0.2s ease;
  margin-bottom: var(--mt-space-3);
}

.form-row.woocommerce-form-field--text input.input-text:focus {
  outline: none;
  border-color: var(--mt-color-primary);
  box-shadow: 0 0 0 3px rgba(20, 181, 197, 0.15);
}

/* Botones de cantidad predefinida (ej: 25€, 50€, 100€) */
button.vou_pay_your_amount_button {
  padding: var(--mt-space-1) var(--mt-space-3);
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-semibold);
  color: var(--mt-color-text-heading);
  background-color: var(--mt-color-white);
  border: var(--mt-border);
  border-radius: var(--mt-radius-md);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

button.vou_pay_your_amount_button:hover,
button.vou_pay_your_amount_button.is-selected {
  background-color: var(--mt-color-primary-dark);
  border-color: var(--mt-color-primary-dark);
  color: var(--mt-color-white);
}

/* ==========================================================================
   TIENDA — ARCHIVE PRODUCT
   ========================================================================== */

/* --------------------------------------------------------------------------
   LAYOUT GENERAL
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   BREADCRUMB PRODUCTO INDIVIDUAL
   -------------------------------------------------------------------------- */

.mt-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--mt-space-2);
  flex-wrap: wrap;
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-sm);
  margin-bottom: var(--mt-space-6);
}

.mt-breadcrumb__item {
  color: var(--mt-color-text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a.mt-breadcrumb__item:hover {
  color: var(--mt-color-primary-dark);
}

.mt-breadcrumb__item--current {
  color: var(--mt-color-text-primary);
  font-weight: var(--mt-font-weight-medium);
}

.mt-breadcrumb__sep {
  color: var(--mt-color-border);
  user-select: none;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   TIENDA — LAYOUT
   -------------------------------------------------------------------------- */

.mt-shop {
  padding-block: var(--mt-space-12) var(--mt-space-16);
}

/* Cabecera de la tienda (oculta cuando el título está desactivado) */
.mt-shop__header:empty {
  display: none;
}

.mt-shop__header {
  margin-bottom: var(--mt-space-8);
}

.mt-shop__title {
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-4xl);
  font-weight: var(--mt-font-weight-regular);
  color: var(--mt-color-text-heading);
  letter-spacing: var(--mt-letter-spacing-wide);
  line-height: var(--mt-line-height-tight);
  margin-bottom: var(--mt-space-2);
  /* A la izquierda, como la parrilla que hay debajo.
     ------------------------------------------------------------------------
     Antes iba centrado, y el resultado era una cabecera con TRES
     alineaciones distintas apiladas: título centrado, migas de pan centradas y
     descripción a la izquierda. Además, un título centrado encima de una parrilla
     alineada a la izquierda no encaja con nada. */
  text-align: left;
}

/* Breadcrumb dentro de la cabecera de categoría/archivo. Va encima del título
   (ver el comentario de woocommerce/archive-product.php) y con el mismo
   eje que el resto. */
.mt-shop__header .mt-breadcrumb {
  justify-content: flex-start;
  margin-bottom: var(--mt-space-3);
}

/* Descripción de la categoría/archivo */
.woocommerce-products-header__title,
.term-description p {
  font-size: var(--mt-font-size-sm);
  color: var(--mt-color-text-secondary);
  line-height: var(--mt-line-height-relaxed);
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   GRID DE PRODUCTOS
   -------------------------------------------------------------------------- */

#mt-shop ul.products,
.mt-search ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mt-space-4);
}

@media (min-width: 768px) {
  #mt-shop ul.products,
  .mt-search ul.products {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mt-space-6);
  }
}

@media (min-width: 1024px) {
  #mt-shop ul.products,
  .mt-search ul.products {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------------
   PRODUCT CARD
   -------------------------------------------------------------------------- */

.mt-product-card {
  display: flex;
  flex-direction: column;
  background-color: var(--mt-color-white);
  border: var(--mt-border);
  border-radius: var(--mt-radius-xl);
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.mt-product-card:hover {
  box-shadow: var(--mt-shadow-md);
  transform: translateY(-2px);
}

/* Imagen */
.mt-product-card__image-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background-color: var(--mt-color-bg-light);
}

.mt-product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

/* Overlay hover */
.mt-product-card__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.mt-product-card__overlay-text {
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-lg);
  letter-spacing: var(--mt-letter-spacing-wider);
  color: var(--mt-color-white);
  background-color: var(--mt-color-primary-dark);
  padding: var(--mt-space-2) var(--mt-space-6);
  border-radius: var(--mt-radius-pill);
  transform: translateY(6px);
  transition: transform 0.25s ease;
}

/* Solo en dispositivos con hover real (ratón): en táctil, :hover se queda
   "enganchado" visible tras un toque porque no hay ningún "hover out". */
@media (hover: hover) {
  .mt-product-card:hover .mt-product-card__image {
    transform: scale(1.04);
  }

  .mt-product-card:hover .mt-product-card__overlay {
    opacity: 1;
  }

  .mt-product-card:hover .mt-product-card__overlay-text {
    transform: translateY(0);
  }
}

/* Badges */
.mt-product-card__badges {
  position: absolute;
  top: var(--mt-space-3);
  left: var(--mt-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--mt-space-1);
  z-index: 1;
}

.mt-product-card__badge {
  display: inline-block;
  font-family: var(--mt-font-body);
  font-size: 0.65rem;
  font-weight: var(--mt-font-weight-bold);
  letter-spacing: var(--mt-letter-spacing-wider);
  text-transform: uppercase;
  padding: 2px var(--mt-space-2);
  border-radius: var(--mt-radius-sm);
  line-height: 1.5;
}

/* Oferta: pill de marca, igual que el «Veure producte» del hover. Antes era
   un rectángulo rojo de error, que en la tienda parecía un aviso y no una
   rebaja. primary-dark y no primary: el blanco sobre #14B5C5 no llega al
   contraste mínimo, sobre #0A7A87 sí. Bebas a 0,65rem no se lee, por eso
   sube de tamaño y quita el peso (Bebas solo tiene el 400). */
.mt-product-card__badge--sale {
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-regular);
  line-height: 1.2;
  padding: var(--mt-space-1) var(--mt-space-3);
  border-radius: var(--mt-radius-pill);
  background-color: var(--mt-color-primary-dark);
  color: var(--mt-color-white);
}

.mt-product-card__badge--featured {
  background-color: var(--mt-color-primary-dark);
  color: var(--mt-color-white);
}

.mt-product-card__badge--outofstock {
  background-color: var(--mt-color-text-secondary);
  color: var(--mt-color-white);
}

/* Cuerpo de la card */
.mt-product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--mt-space-4);
  gap: var(--mt-space-2);
}

/* Categoría */
.mt-product-card__cats {
  font-size: var(--mt-font-size-xs);
  color: var(--mt-color-primary-dark);
  font-weight: var(--mt-font-weight-semibold);
  letter-spacing: var(--mt-letter-spacing-wide);
  text-transform: uppercase;
}

.mt-product-card__cats a {
  color: inherit;
  text-decoration: none;
}

.mt-product-card__cats a:hover {
  text-decoration: underline;
}

/* Nombre del producto */
.mt-product-card__name {
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-semibold);
  line-height: var(--mt-line-height-snug);
  margin: 0;
}

.mt-product-card__name a {
  color: var(--mt-color-text-heading);
  text-decoration: none;
  transition: color 0.2s ease;
}

.mt-product-card__name a:hover {
  color: var(--mt-color-primary-dark);
}

/* Valoración */
.mt-product-card__rating {
  display: flex;
  align-items: center;
}

.mt-product-card__rating .star-rating {
  font-size: var(--mt-font-size-xs);
  color: var(--mt-color-warning);
}

/* Precio */
/* "IVA inclos" junto al precio. Discreto a propósito: acompaña al precio,
   no compite con él. */
.mt-price-suffix {
  display: inline-block;
  margin-left: var(--mt-space-1);
  color: var(--mt-color-text-secondary);
  font-size: var(--mt-font-size-xs);
  font-weight: 400;
  white-space: nowrap;
}

.mt-product-card__price {
  margin-top: auto;
  font-size: var(--mt-font-size-base);
}

/* Precio por persona (mt_per_person_pricing): «40,00 € / persona». */
.mt-price-per-person__unit {
  font-size: 0.85em;
  font-weight: 500;
  color: var(--mt-color-text-secondary);
}

.mt-product-card__price del {
  color: var(--mt-color-text-secondary);
  font-size: var(--mt-font-size-sm);
  margin-right: var(--mt-space-1);
}

.mt-product-card__price ins {
  text-decoration: none;
  color: var(--mt-color-primary-dark);
}

/* Acciones — botón add-to-cart */
.mt-product-card__actions {
  padding-top: var(--mt-space-2);
}

.mt-product-card__actions a.button {
  display: flex;
  width: 100%;
  justify-content: center;
  /* Móvil: texto como "SELECCIONA OPCIONS" no cabe con el padding/font-size de
     desktop (32px/16px heredados de .woocommerce a.button) en el ancho real
     de la columna de la parrilla a 2 columnas — desborda el pill. Reducido
     proporcionalmente y restaurado a los valores de desktop a partir de 768px. */
  font-size: var(--mt-font-size-sm);
  /* El texto no cabía: a 320 px el white-space: nowrap de .button recortaba
     «Selecciona opcions» por los dos lados («ELECCIONA OPCION», WCAG 1.4.10), y a
     390 px «Seleccionar opciones» se salía del relleno y tocaba los bordes de la
     píldora. Con menos relleno (el botón ocupa todo el ancho y el texto va centrado,
     así que el relleno solo cuenta cuando no cabe) y algo menos de espaciado, el
     catalán sigue en una línea a 390 px; lo que aun así no cabe se parte en dos
     líneas centradas en lugar de cortarse. En escritorio, como antes. */
  padding-inline: var(--mt-space-2);
  letter-spacing: var(--mt-letter-spacing-wide);
  padding-block: var(--mt-space-3);
  background-color: var(--mt-color-primary-dark);
  color: var(--mt-color-white);
  border-radius: var(--mt-radius-pill);
  transition: background-color 0.2s ease;
  white-space: normal;
  text-align: center;
  text-wrap: balance;
  align-items: center;
}

@media (min-width: 768px) {
  .mt-product-card__actions a.button {
    font-size: var(--mt-font-size-base);
    padding-inline: var(--mt-space-8);
    letter-spacing: var(--mt-letter-spacing-wider);
    white-space: nowrap;
  }
}

.mt-product-card__actions a.button:hover {
  background-color: var(--mt-color-primary-darker);
  color: var(--mt-color-white);
}

.mt-product-card__actions a.button.added {
  background-color: var(--mt-color-success);
}

.mt-product-card__actions .button.loading {
  opacity: 0.75;
  cursor: wait;
}

/* --------------------------------------------------------------------------
   ESTADO VACÍO
   -------------------------------------------------------------------------- */

.mt-shop__empty {
  text-align: center;
  padding-block: var(--mt-space-16);
}

.mt-shop__empty .woocommerce-info {
  display: inline-flex;
  text-align: left;
}

/* --------------------------------------------------------------------------
   PAGINACIÓN
   -------------------------------------------------------------------------- */

.mt-shop__pagination {
  margin-top: var(--mt-space-12);
}

.woocommerce-pagination {
  display: flex;
  justify-content: center;
}

.woocommerce-pagination ul.page-numbers {
  display: flex;
  align-items: center;
  gap: var(--mt-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-pagination ul.page-numbers li .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-family: var(--mt-font-body);
  font-size: var(--mt-font-size-sm);
  font-weight: var(--mt-font-weight-medium);
  color: var(--mt-color-text-body);
  background-color: var(--mt-color-white);
  border: var(--mt-border);
  border-radius: var(--mt-radius-md);
  text-decoration: none;
  transition: var(--mt-transition-colors);
}

.woocommerce-pagination ul.page-numbers li .page-numbers:hover {
  background-color: var(--mt-color-primary-light);
  border-color: var(--mt-color-primary);
  color: var(--mt-color-primary-dark);
}

.woocommerce-pagination ul.page-numbers li .page-numbers.current {
  background-color: var(--mt-color-primary-dark);
  border-color: var(--mt-color-primary-dark);
  color: var(--mt-color-white);
}

.woocommerce-pagination ul.page-numbers li .page-numbers.dots {
  border-color: transparent;
  background-color: transparent;
  cursor: default;
}

/* --------------------------------------------------------------------------
   STAR RATING global
   -------------------------------------------------------------------------- */

.star-rating {
  overflow: hidden;
  position: relative;
  height: 1em;
  line-height: 1;
  font-size: var(--mt-font-size-sm);
  width: 5.4em;
  font-family: 'star';
}

.star-rating::before {
  content: '\53\53\53\53\53';
  opacity: 0.25;
  float: left;
  top: 0;
  left: 0;
  position: absolute;
}

.star-rating span {
  overflow: hidden;
  float: left;
  top: 0;
  left: 0;
  position: absolute;
  padding-top: 1.5em;
}

.star-rating span::before {
  content: '\53\53\53\53\53';
  top: 0;
  position: absolute;
  left: 0;
  color: var(--mt-color-warning);
}

/* ==========================================================================
   PORTADA — entradilla y bloque "Com funciona" (D4)
   La portada de esta tienda es el archivo de producto, así que estos
   estilos viven aquí y no en style.css: se cargan exactamente donde se usan.
   Ver inc/home-sections.php.
   ========================================================================== */

.mt-shop__intro {
  max-width: 60ch;
  /* auto en los laterales, no 0: con max-width y márgenes a cero la entradilla
     quedaba arrimada a la izquierda bajo un título que sí va centrado. */
  margin: var(--mt-space-3) auto 0;
  font-size: var(--mt-font-size-md);
  line-height: var(--mt-line-height-relaxed);
  color: var(--mt-color-text-secondary);
  text-align: center;
}

/* La portada rompe el eje central del resto del archivo.
   ------------------------------------------------------------------------
   En las categorías el título centrado está bien: son páginas de listado y el
   título solo etiqueta. En la portada no: era una plana de rectángulos
   centrados iguales, sin ningún punto donde el ojo se pare primero.

   Aquí el título pasa a tamaño de display y se alinea a la izquierda, y la foto
   le hace costado. El eje izquierdo lo marca la tipografía, no un contenedor.
   Solo .home: las categorías siguen como estaban. */
.home .mt-shop__title {
  /* Bebas es condensada: aguanta este tamaño sin comerse la página. */
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 0.92;
  margin-bottom: var(--mt-space-4);
}

.home .mt-shop__intro {
  /* Ninguno de los dos márgenes automáticos: bajo un título alineado a la izquierda,
     centrar la entradilla la dejaría flotando. */
  margin-inline: 0;
  max-width: 42ch;
  text-align: left;
}

.mt-shop__hero {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--mt-space-6);
  /* Radio más grande que el de las tarjetas a propósito: así el radio codifica
     la jerarquía (pieza grande, radio grande) en lugar de ser el mismo valor
     repetido en todas partes. */
  border-radius: var(--mt-radius-xl);
}

@media (min-width: 768px) {
  .home .mt-shop__header {
    display: grid;
    /* Desiguales, no 50/50: el texto manda y la foto acompaña. */
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: var(--mt-space-10);
    margin-bottom: var(--mt-space-12);
  }

  /* Título y entradilla se juntan en el centro de la altura de la foto en lugar de
     estirarse cada uno media columna. */
  .home .mt-shop__title {
    grid-area: 1 / 1;
    align-self: end;
  }

  .home .mt-shop__intro {
    grid-area: 2 / 1;
    align-self: start;
  }

  .home .mt-shop__hero {
    grid-area: 1 / 2 / span 2;
    margin-top: 0;
  }
}

/* La parrilla deja de flotar entre dos secciones.
   ------------------------------------------------------------------------
   Sin ningún límite, los cuatro productos quedaban colgados entre las familias
   y el bloque de pasos, y no se entendía si eran algo nuevo o los mismos
   de antes. Ahora son una sección con título propio y fondo de color.

   El fondo va a todo el ancho con box-shadow + clip-path y NO con 100vw:
   100vw incluye el ancho de la barra de desplazamiento y provoca desbordamiento
   horizontal —lo mismo que ya rompió el header sticky una vez—.
   Una sombra de 100vmax pinta la banda hacia los lados, el clip-path la corta
   arriba y abajo, y ninguna de las dos cosas genera scroll.

   Solo .home: en las categorías la parrilla es toda la página y una banda de
   color no separaría nada de nada. */
.home .mt-shop__catalog {
  position: relative;
  /* Contexto de apilamiento propio, para que el ::before con z-index -1 se quede
     detrás del contenido de la sección y no detrás de toda la página. */
  isolation: isolate;
  margin-top: var(--mt-space-12);
  /* Igual de grande que el fundido (96px): si fuera más pequeño, el título y las fichas
     caerían dentro de la zona donde el color aún no ha llegado del todo. */
  padding-top: var(--mt-space-24);
  padding-bottom: var(--mt-space-24);
}

/* El fondo va en el pseudoelemento y no en la sección: la máscara debe desvanecer SOLO
   el color, no las fichas de producto que hay encima. */
.home .mt-shop__catalog::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--mt-color-primary-light);
  box-shadow: 0 0 0 100vmax var(--mt-color-primary-light);
  clip-path: inset(0 -100vmax);
  /* La máscara, por defecto, se recorta al border-box (mask-clip: border-box),
     y eso se llevaba la sombra que pinta la banda hacia los lados: el color se
     quedaba exactamente al ancho del contenedor. Con no-clip la máscara
     deja de recortar, y con repeat-x se repite solo en horizontal —si se
     repitiera también en vertical, el color volvería a salir por arriba y por abajo
     de la sección—. */
  -webkit-mask-clip: no-clip;
  mask-clip: no-clip;
  /* Solo el degradado lineal se repite hacia los lados: es el que estira la
     banda más allá del contenedor. Las manchas NO se repiten, y cada una
     cabe entera dentro del 0-100% (centro más/menos radio nunca toca el borde). Si
     se repetían, el corte de la mancha en el borde del contenedor se veía como un
     rectángulo con los lados rectos justo bajo la banda. */
  -webkit-mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x;
  mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x;
  /* Mismo fundido que el cristal de la cabecera: ocho paradas con curva, no dos.
     Con un degradado de dos paradas se ve una raya horizontal donde
     empieza el color; con la curva, no. En px y no en %, que la altura de la
     sección depende de cuántos productos haya. El fundido mide 96px.

     Encima del fundido van cuatro manchas radiales que se suman
     (mask-composite: add): donde hay mancha, el color sube antes y el borde deja
     de ser una recta.

     CLAVE: el centro de cada mancha va DENTRO de la caja, a la misma distancia
     del borde que su radio vertical, de manera que la opacidad de la mancha
     llega a cero exactamente en el borde. Con el centro por fuera —como estaban
     al principio— la mancha aún tenía opacidad alta allí donde la máscara deja
     de pintar, y el corte se veía como una raya recta: justo lo contrario
     de lo que se quería. */
  -webkit-mask-image:
    radial-gradient(17% 60px at 24% 60px, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.28) 55%, transparent 100%),
    radial-gradient(13% 60px at 60% 60px, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.22) 55%, transparent 100%),
    radial-gradient(15% 60px at 38% calc(100% - 60px), rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.22) 55%, transparent 100%),
    radial-gradient(14% 60px at 78% calc(100% - 60px), rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.28) 55%, transparent 100%),
    linear-gradient(
      to bottom,
      transparent 0,
      rgba(0, 0, 0, 0.05) 9px,
      rgba(0, 0, 0, 0.18) 22px,
      rgba(0, 0, 0, 0.42) 40px,
      rgba(0, 0, 0, 0.70) 60px,
      rgba(0, 0, 0, 0.90) 78px,
      #000 96px,
      #000 calc(100% - 96px),
      rgba(0, 0, 0, 0.90) calc(100% - 78px),
      rgba(0, 0, 0, 0.70) calc(100% - 60px),
      rgba(0, 0, 0, 0.42) calc(100% - 40px),
      rgba(0, 0, 0, 0.18) calc(100% - 22px),
      rgba(0, 0, 0, 0.05) calc(100% - 9px),
      transparent 100%
    );
  mask-image:
    radial-gradient(17% 60px at 24% 60px, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.28) 55%, transparent 100%),
    radial-gradient(13% 60px at 60% 60px, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.22) 55%, transparent 100%),
    radial-gradient(15% 60px at 38% calc(100% - 60px), rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.22) 55%, transparent 100%),
    radial-gradient(14% 60px at 78% calc(100% - 60px), rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.28) 55%, transparent 100%),
    linear-gradient(
      to bottom,
      transparent 0,
      rgba(0, 0, 0, 0.05) 9px,
      rgba(0, 0, 0, 0.18) 22px,
      rgba(0, 0, 0, 0.42) 40px,
      rgba(0, 0, 0, 0.70) 60px,
      rgba(0, 0, 0, 0.90) 78px,
      #000 96px,
      #000 calc(100% - 96px),
      rgba(0, 0, 0, 0.90) calc(100% - 78px),
      rgba(0, 0, 0, 0.70) calc(100% - 60px),
      rgba(0, 0, 0, 0.42) calc(100% - 40px),
      rgba(0, 0, 0, 0.18) calc(100% - 22px),
      rgba(0, 0, 0, 0.05) calc(100% - 9px),
      transparent 100%
    );
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

.mt-shop__catalog-title {
  margin: 0 0 var(--mt-space-6);
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-2xl);
  font-weight: var(--mt-font-weight-regular);
  letter-spacing: var(--mt-letter-spacing-wide);
  line-height: var(--mt-line-height-tight);
  color: var(--mt-color-text-heading);
}

/* Familias de producto, antes de la parrilla.
   ------------------------------------------------------------------------
   En la portada los cuatro productos salían mezclados en una sola parrilla,
   sin que se entendiera que hay DOS cosas a la venta: vales de regalo y
   merchandising. Estas dos tarjetas lo dicen antes de que haga falta leer ningún
   nombre de producto.

   El zoom del hover no lleva ninguna regla de prefers-reduced-motion: el reset ya
   neutraliza TODAS las transiciones del sitio cuando se pide menos movimiento
   (reset.css, punto 14), y repetirlo aquí solo sería ruido. */
.mt-home-cats {
  display: grid;
  gap: var(--mt-space-4);
  margin-bottom: var(--mt-space-10);
}

@media (min-width: 768px) {
  .mt-home-cats {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  /* Dos familias: NO van al 50/50. Una tiene tres productos y la otra uno, y
     el tamaño lo debe decir antes que ningún texto. El :has() acota la regla al caso
     de dos tarjetas exactas; con tres o más vuelve a la parrilla regular. */
  .mt-home-cats:has(> :nth-child(2):last-child) {
    grid-template-columns: 1.6fr 1fr;
  }
}

.mt-home-cats__card {
  position: relative;
  display: block;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--mt-radius-lg);
  text-decoration: none;
  /* Sin box-shadow: la foto con el velo ya es un objeto sólido, y la misma
     sombra gris bajo cada tarjeta es precisamente lo que hacía que todo pareciera
     el mismo rectángulo repetido. */
}

.mt-home-cats__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* Velo que baja de casi limpio a oscuro: arriba se ve la foto, abajo está el
   texto y hace falta contraste. Así no hace falta oscurecer la imagen entera. */
.mt-home-cats__card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Negro y no el turquesa oscuro: con la banda de color, el bloque de pasos y
     las dos fotos —que ya llevan mar— el azul se acumulaba en toda la página.
     El negro deja que el color lo pongan las fotos. */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.10) 0%,
    rgba(0, 0, 0, 0.42) 55%,
    rgba(0, 0, 0, 0.78) 100%
  );
}

.mt-home-cats__card:hover .mt-home-cats__img,
.mt-home-cats__card:focus-visible .mt-home-cats__img {
  transform: scale(1.05);
}

/* Los dos nombres, exactamente igual: abajo, a la izquierda y al mismo tamaño.
   La jerarquía entre las dos familias ya la dice el ancho de la columna
   (1.6fr contra 1fr); repetirla también con el tamaño del texto hacía que las
   tarjetas parecieran dos cosas diferentes en lugar de dos familias. */
.mt-home-cats__body {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 320px;
  padding: var(--mt-space-6);
}

.mt-home-cats__name {
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-xl);
  letter-spacing: var(--mt-letter-spacing-wide);
  line-height: var(--mt-line-height-tight);
  color: var(--mt-color-white);
}



/* La sección pasa a ser un panel con la foto del local de fondo.
   ------------------------------------------------------------------------
   Panel redondeado DENTRO del contenedor y no a sangre: una banda a todo el
   ancho pide `100vw`, que incluye el ancho de la barra de
   desplazamiento y provoca desbordamiento horizontal —exactamente el problema
   que ya rompió el header sticky una vez—. Un panel redondeado además
   encaja con el resto del tema, que ya va de tarjetas y pills. */
.mt-home-steps {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: var(--mt-space-16);
  padding: var(--mt-space-12) var(--mt-space-6) var(--mt-space-10);
  border-radius: var(--mt-radius-xl);
}

.mt-home-steps__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Solo el valor de socorro: el bueno lo pone el PHP en línea, foto por foto,
     en mt_home_steps_fotos(). El panel es mucho más bajo que la foto, o sea
     que el recorte vertical es real y un solo valor para todas corta a
     alguna; con la foto rotando, aún más. */
  object-position: center 55%;
}

/* Velo oscuro para que el contraste del texto NO dependa de la foto.
   Es el turquesa de marca oscurecido, no un gris: la foto ya lleva ese tono
   en el agua y el conjunto se lee como una pieza, no como un filtro encima. */
.mt-home-steps::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(4, 46, 51, 0.74) 0%,
    rgba(4, 46, 51, 0.50) 52%,
    rgba(4, 46, 51, 0.70) 100%
  );
}

.mt-home-steps__title {
  margin: 0 0 var(--mt-space-8);
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-2xl);
  letter-spacing: var(--mt-letter-spacing-wide);
  /* Blanco sobre el velo, no el color de título habitual. */
  color: var(--mt-color-white);
  text-align: center;
}

.mt-home-steps__list {
  list-style: none;
  display: grid;
  gap: var(--mt-space-8);
  margin: 0;
  padding: 0;
}

.mt-home-steps__item {
  position: relative;
  padding: var(--mt-space-8) var(--mt-space-6) var(--mt-space-6);
  /* Casi opaco y no un cristal translúcido de verdad: el texto de estas
     tarjetas debe ser legible sobre CUALQUIER punto de la foto, y con un
     fondo semitransparente el contraste dependería de lo que haya detrás.
     Así se comporta como cristal a la vista pero el contraste está garantizado. */
  background-color: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: var(--mt-radius-lg);
  box-shadow: var(--mt-shadow-lg);
  text-align: center;
}

/* El número es decorativo: el orden real lo lleva la <ol>, que es la que
   lee un lector de pantalla. Por eso va aria-hidden en el marcado. */
.mt-home-steps__num {
  position: absolute;
  top: calc(var(--mt-space-4) * -1);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--mt-radius-pill);
  /* Oscuro y no el tono claro: aquí va un número encima, y con #14B5C5 el
     contraste era 2,49:1 (AA pide 4,5:1 para texto). */
  background-color: var(--mt-color-primary-dark);
  color: var(--mt-color-white);
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-md);
  line-height: 1;
  /* La cifra no quedaba centrada verticalmente dentro del círculo. No es que el
     centrado flex falle: centra la CAJA DE LÍNEA, y Bebas Neue reparte
     el ascendente y el descendente de manera asimétrica, así que el glifo queda
     alto dentro de esa caja. Con box-sizing: border-box, un padding superior
     desplaza el contenido hacia abajo la mitad de su valor.

     0.15em sale de MEDIRLO en el navegador, no de estimar: con este valor el
     centro de la tinta del dígito queda a 0,16 px del centro del círculo. Se probó también
     `text-box: trim-both cap alphabetic`, que parecía la solución
     "de verdad", y EMPEORA: recorta a la altura de mayúscula declarada, pero en
     Bebas Neue los dígitos son más altos que esa métrica y el número queda
     1,5 px arriba. Por eso aquí no hay ningún @supports. */
  padding-top: 0.15em;
}

.mt-home-steps__icon {
  display: block;
  margin: 0 auto var(--mt-space-4);
  color: var(--mt-color-primary-dark);
}

.mt-home-steps__item-title {
  margin: 0 0 var(--mt-space-2);
  font-family: var(--mt-font-heading);
  font-size: var(--mt-font-size-lg);
  letter-spacing: var(--mt-letter-spacing-wide);
  color: var(--mt-color-text-heading);
}

.mt-home-steps__item-text {
  margin: 0;
  font-size: var(--mt-font-size-sm);
  line-height: var(--mt-line-height-relaxed);
  color: var(--mt-color-text-body);
}

/* A partir de tableta los tres pasos van en fila. Por debajo van apilados,
   que es como se lee una secuencia en una pantalla estrecha. */
@media (min-width: 768px) {
  .mt-home-steps__list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mt-space-6);
  }
}

@media (min-width: 1024px) {
  .mt-home-steps__list {
    gap: var(--mt-space-8);
  }

  .mt-home-steps__title {
    font-size: var(--mt-font-size-3xl);
  }
}

/* --------------------------------------------------------------------------
   PORTADA EN EL MÓVIL — ritmo (revisión de móvil del 14-10)

   1. Los huecos. La banda de color del catálogo lleva 96 px de relleno arriba y abajo
      para su fundido, más 48 de margen; con los 64 de margen de «Com funciona», en el
      móvil quedaban unos 150 px vacíos antes de «Tots els productes» y otros tantos
      antes de los pasos. Aquí se quedan en la mitad: el fundido sigue igual, solo que el
      título cae donde el tinte, muy claro, aún está llegando.
   2. «Com funciona» ocupaba dos pantallas y media: tres tarjetas altas, cada una con su
      icono, dentro del panel de la foto. En el móvil pasa a ser una sola superficie con
      tres filas (número, título y texto). El número se queda: aquí la secuencia es
      información. El icono sobra al lado del número y se esconde.
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  .mt-home-cats {
    margin-bottom: var(--mt-space-6);
  }

  .home .mt-shop__catalog {
    margin-top: 0;
    padding-top: var(--mt-space-12);
    padding-bottom: var(--mt-space-12);
  }

  .mt-home-steps {
    margin-top: var(--mt-space-8);
    padding: var(--mt-space-8) var(--mt-space-4) var(--mt-space-6);
  }

  .mt-home-steps__title {
    margin-bottom: var(--mt-space-5);
  }

  .mt-home-steps__list {
    gap: 0;
    padding: var(--mt-space-1) var(--mt-space-5);
    background-color: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: var(--mt-radius-lg);
    box-shadow: var(--mt-shadow-lg);
  }

  .mt-home-steps__item {
    display: grid;
    grid-template-columns: 32px 1fr;
    column-gap: var(--mt-space-4);
    align-items: start;
    padding: var(--mt-space-4) 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: 0;
    box-shadow: none;
    text-align: left;
  }

  .mt-home-steps__item + .mt-home-steps__item {
    border-top: 1px solid var(--mt-color-border);
  }

  .mt-home-steps__num {
    position: static;
    grid-row: 1 / span 2;
    transform: none;
  }

  .mt-home-steps__icon {
    display: none;
  }

  .mt-home-steps__item-title {
    grid-column: 2;
    margin: var(--mt-space-1) 0 2px;
  }

  .mt-home-steps__item-text {
    grid-column: 2;
    line-height: var(--mt-line-height-normal);
  }
}