/* ═══════════════════════════════════════════════════════════════
   MOREAMORE — Producto (single + variable) · Hoja de plantilla
   ═══════════════════════════════════════════════════════════════
   Carga DESPUÉS de styles.css y shop.css. De shop.css hereda los
   tokens funcionales, --font-mono, .sys-label y .card (que se
   reutiliza tal cual en "los otros finalistas").

   En WordPress: templates/single-product.html.

   ───────────────────────────────────────────────────────────────
   LA TESIS DE ESTA PÁGINA

   Una página de producto normal tiene un solo trabajo: convencerte
   de comprar ESTO. Acá el trabajo es distinto, porque el usuario no
   llegó de una búsqueda: llegó de una lista donde Amore ya le dijo
   por qué. Entonces el trabajo es DOS:

     1. Expandir el razonamiento — incluido cuándo NO conviene.
     2. Quitarle el riesgo a la decisión de regalar.

   El punto 1 produce el elemento más inusual de toda la plantilla:
   un bloque de contraindicación. Una página que te dice cuándo no
   comprar construye más confianza que cualquier sello de garantía,
   y es lo que separa un asesor de un vendedor. También es la razón
   por la que el ADN se sostiene: Amore mantiene criterio propio
   incluso cuando eso cuesta una venta.

   El punto 2 reordena la jerarquía. Lo que en Woo son metadatos de
   pie de página (envío, empaque, proveedor) acá son bloques de
   primer nivel, porque en un regalo el riesgo no es el producto:
   es que llegue tarde, que llegue mal envuelto, o que la persona
   ya lo tenga.

   ───────────────────────────────────────────────────────────────
   PRODUCTO VARIABLE

   El selector de variaciones de WooCommerce es un <select> con
   "Elige una opción". Acá es un configurador donde cada opción
   muestra su CONSECUENCIA: qué le suma al precio, qué le hace a la
   fecha de entrega, y cuál recomienda Amore para este brief. La
   variación deja de ser un trámite y se vuelve parte del regalo.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Acentos premium (Sistema Cromático · sección 08) ──
     Rol declarado en el manual: "destellos, detalles premium" y
     "campañas especiales". Se usan sólo en lo que de verdad es un
     detalle de regalo (empaque, nota escrita a mano). Si el dorado
     apareciera en botones o titulares perdería exactamente lo que
     lo hace valioso: la escasez. */
  --mm-dorado:     #E8C46A;
  --mm-champagne:  #F7E6B6;

  /* "Sellers, regalos conscientes" — el bloque del proveedor. Es el
     único verde de la marca y su trabajo es señalar taller humano. */
  --mm-salvia:     #A9B99F;

  /* "Gradientes nocturnos, Amore, tech premium" */
  --mm-azul-noche: #102333;
  --mm-azul-tinta: #566B7F;
}

/* ═══════════════════════════════════════════════════════════════
   1 · BARRA DE CONTEXTO DE SESIÓN — pattern "mam/session-bar"
   ───────────────────────────────────────────────────────────────
   La pieza estructural más importante de la página, y la más fácil
   de omitir: dice que seguís dentro de una selección, no que
   aterrizaste en un SKU. Con posición ("01 de 12") y navegación
   entre los resultados sin volver al listado.

   Sin brief en sesión, este bloque no se renderiza y la página cae
   a un breadcrumb normal de categoría.
   ═══════════════════════════════════════════════════════════════ */
.pd-context {
  padding: calc(var(--header-h) + 14px) 0 14px;
  background: var(--mm-ciruela);
  color: rgba(255,255,255,0.8);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.pd-context-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.pd-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  transition: color 0.2s;
}
.pd-back:hover { color: var(--mm-cian-dato); }

/* Posición dentro del ranking: el dato que convierte una página de
   producto en "el paso 1 de una recomendación". */
.pd-position {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.55);
}
.pd-position strong { color: var(--mm-cian-dato); }

.pd-step {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 50%;
  background: transparent;
  color: rgba(255,255,255,0.75);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.pd-step:hover { border-color: var(--mm-cian-dato); color: #fff; background: rgba(143,220,234,0.12); }
.pd-step:disabled { opacity: 0.3; pointer-events: none; }

/* ═══════════════════════════════════════════════════════════════
   2 · LAYOUT
   ───────────────────────────────────────────────────────────────
   Dos columnas asimétricas. La izquierda es el argumento (galería,
   razonamiento, ficha, taller, empaque) y se lee en scroll. La
   derecha es la decisión y queda pegada: en un regalo configurable
   el usuario cambia opciones mientras lee, y el precio y la fecha
   nunca deben salir de vista.
   ═══════════════════════════════════════════════════════════════ */
.pd-main { padding: 34px 0 0; }

.pd-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 48px;
  align-items: start;
}

.pd-col-left { min-width: 0; }

.pd-buy {
  position: sticky;
  top: calc(var(--header-h) + 18px);
}

/* Bloque genérico de la columna izquierda: hairline superior y
   rótulo mono. La repetición del patrón es lo que hace que la
   página se lea como un expediente y no como una landing. */
.pd-block { padding-top: 34px; margin-top: 34px; border-top: var(--hairline); }
.pd-block > .sys-label { display: block; color: var(--mm-morado); margin-bottom: 14px; }
.pd-block h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--mm-grafito);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════════════════════════
   3 · GALERÍA
   ───────────────────────────────────────────────────────────────
   4:5 vertical, no cuadrada: el formato de catálogo editorial de
   producto físico. Cuadrado es el formato de feed.

   Con fotografía real, la imagen llena el marco entero (object-fit:
   cover) — el degradado de fondo queda como respaldo si la foto no
   carga. El icono centrado al 44% era el estado "sin fotografía
   todavía"; dejó de serlo cuando entraron las fotos reales (Vik,
   2026-08-20).
   ═══════════════════════════════════════════════════════════════ */
/* Contenedor de la galería. En escritorio no hace nada —los hijos se
   apilan igual—; existe para poder moverla como una sola pieza en
   móvil. Ver el bloque responsive de 900px. */
.pd-gallery { min-width: 0; }

.pd-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border: var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--mm-rosa-bruma), var(--mm-lila));
}
.pd-frame img { width: 100%; height: 100%; object-fit: cover; }

/* Sello de posición en el ranking: hereda el lenguaje de .card-rank
   del catálogo para que la continuidad sea explícita. */
.pd-seal {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--mm-morado);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pd-fav {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border: var(--hairline);
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: grid;
  place-items: center;
  color: var(--mm-gris);
  transition: color 0.2s, border-color 0.2s;
}
.pd-fav:hover, .pd-fav.on { color: var(--mm-coral); border-color: var(--mm-coral); }
.pd-fav.on svg { fill: currentColor; }

.pd-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.pd-thumb {
  aspect-ratio: 1;
  border: var(--hairline);
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 0;
  transition: border-color 0.2s;
}
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumb:hover { border-color: var(--mm-malva); }
.pd-thumb.active { border-color: var(--mm-morado); border-width: 1.5px; }

/* ═══════════════════════════════════════════════════════════════
   4 · POR QUÉ TE LO RECOMENDÉ — pattern "mam/amore-rationale"
   ───────────────────────────────────────────────────────────────
   Versión larga de la razón que ya vio en el listado. Tres partes:

     · el argumento, en Playfair itálica (la voz de Amore)
     · CONTRA QUÉ COINCIDIÓ — los campos del brief, verificables
     · CUÁNDO NO — la contraindicación

   El tercero es el que importa. Ver shop.css/producto.css arriba:
   un asesor dice cuándo no; un vendedor nunca.
   ═══════════════════════════════════════════════════════════════ */
.pd-why {
  margin-top: 26px;
  border: 1px solid var(--mm-azul-lavanda);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--mm-blanco-perla);
}

.why-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 20px;
  background: linear-gradient(90deg, var(--mm-azul-lavanda), rgba(217,221,246,0.35));
  border-bottom: 1px solid var(--mm-azul-lavanda);
}
.why-avatar {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #FFE6F2, var(--mm-coral) 46%, var(--mm-morado) 100%);
}
.why-head .sys-label { color: var(--mm-uva); }

.why-body { padding: 20px 22px 22px; }

.why-arg {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--mm-gris-texto);
}
.why-arg + .why-arg { margin-top: 12px; }

/* ── Coincidencias: el razonamiento hecho auditable ──
     Cada línea es un campo del brief contra un dato del producto.
     Es la diferencia entre "confía en mí" y "mirá por qué". */
.why-match {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed var(--mm-gris-seda);
  display: grid;
  gap: 9px;
}
.why-match li {
  display: grid;
  grid-template-columns: 18px 108px 1fr;
  align-items: baseline;
  gap: 10px;
  list-style: none;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mm-gris-texto);
}
.why-match svg { color: var(--mm-verde-confirmacion); transform: translateY(2px); }
.why-match .mk {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mm-gris);
}
.why-match .mv strong { font-weight: 600; color: var(--mm-grafito); }

/* ── Contraindicación ──
     Ámbar funcional, no rojo: no es un error, es un criterio. */
.why-against {
  margin-top: 18px;
  padding: 15px 17px;
  border-left: 2px solid var(--mm-ambar-advertencia);
  border-radius: 0 10px 10px 0;
  background: #FDF6E7;
}
.why-against .sys-label {
  display: block;
  color: #8A5F16;
  margin-bottom: 7px;
}
.why-against p {
  font-size: 13px;
  line-height: 1.6;
  color: #6E4F14;
}
.why-against p + p { margin-top: 7px; }

.why-swap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 11px;
  padding-bottom: 1px;
  border: none;
  background: none;
  border-bottom: 1px solid currentColor;
  color: #8A5F16;
  font-size: 12.5px;
  font-weight: 600;
  transition: opacity 0.2s;
}
.why-swap:hover { opacity: 0.7; }

/* ═══════════════════════════════════════════════════════════════
   5 · FICHA DEL REGALO — pattern "mam/gift-dossier"
   ───────────────────────────────────────────────────────────────
   No es una ficha técnica. SKU, peso y dimensiones no le importan
   a nadie que esté eligiendo un regalo; lo que importa es de qué
   está hecho, cuánto dura y cómo se cuida. Los datos que sí son
   técnicos (medidas) van al final y en mono.

   WooCommerce: atributos de producto + campos ACF por categoría.
   ═══════════════════════════════════════════════════════════════ */
.dossier {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 34px;
}
.dossier div {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 11px 0;
  border-top: 1px solid var(--mm-gris-nube);
}
.dossier dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mm-gris);
}
.dossier dd { font-size: 13.5px; line-height: 1.5; color: var(--mm-gris-texto); }
.dossier dd.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════
   6 · QUIÉN LO HACE — pattern "mam/maker"
   ───────────────────────────────────────────────────────────────
   Salvia Curada, el color que el manual asigna a "sellers, regalos
   conscientes". Cumple la promesa del footer ("impulsamos el talento
   local") con un dato concreto en vez de un eslogan, y ataca de
   frente el anonimato que hace que un marketplace se sienta bodega.
   ═══════════════════════════════════════════════════════════════ */
.maker {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 18px;
  padding: 20px 22px;
  border: 1px solid rgba(169, 185, 159, 0.55);
  border-left: 3px solid var(--mm-salvia);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: linear-gradient(100deg, rgba(169,185,159,0.14), rgba(169,185,159,0.03));
}
.maker-avatar {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--mm-blanco-perla);
  border: 1px solid rgba(169,185,159,0.6);
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 22px;
  color: #4E6046;
}
.maker h3 { font-size: 15px; font-weight: 600; color: var(--mm-grafito); }
.maker .maker-place {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5C6E54;
}
.maker p {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--mm-gris-texto);
}
.maker-stats {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(169,185,159,0.45);
}
.maker-stats div { display: flex; flex-direction: column; gap: 2px; }
.maker-stats .ms-n {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #3F5039;
}
.maker-stats .ms-l {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6B7C63;
}

/* ═══════════════════════════════════════════════════════════════
   7 · CÓMO LLEGA — pattern "mam/arrival"
   ───────────────────────────────────────────────────────────────
   Único lugar de la plantilla con Dorado Detalle. En regalos, el
   momento de recibir es parte del producto, y ese momento es lo
   único que justifica un acento premium literal. Si el dorado
   apareciera también en botones dejaría de significar algo.
   ═══════════════════════════════════════════════════════════════ */
.arrival {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.arrival article {
  padding: 18px 18px 20px;
  border: var(--hairline);
  border-radius: var(--radius);
  background: var(--mm-perla-calida);
}
.arrival .a-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  margin-bottom: 12px;
  background: var(--mm-champagne);
  color: #7A5A12;
}
.arrival h3 { font-size: 13.5px; font-weight: 600; color: var(--mm-grafito); }
.arrival p {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--mm-gris-texto);
}

/* ═══════════════════════════════════════════════════════════════
   8 · COLUMNA DE COMPRA
   ═══════════════════════════════════════════════════════════════ */
.buy-card {
  border: var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--mm-blanco-perla);
  overflow: hidden;
}

.buy-head { padding: 22px 24px 20px; border-bottom: var(--hairline); }

.buy-cat {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mm-gris);
  margin-bottom: 9px;
}
.buy-head h1 {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--mm-grafito);
}

/* Precio en vivo: cambia con la configuración, así que es tabular
   para que no salte, y con transición para que el cambio se note. */
.buy-price {
  margin-top: 14px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.buy-price .amount {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--mm-grafito);
  transition: color 0.3s;
}
.buy-price .amount.bumped { color: var(--mm-morado); }
.buy-price .in-budget {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(79, 138, 104, 0.12);
  color: var(--mm-verde-confirmacion);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.buy-price .in-budget.over {
  background: rgba(216, 154, 43, 0.14);
  color: #8A5F16;
}

/* ── 8.1 CONFIGURADOR (producto variable) ──
   Cada opción declara su consecuencia. Ver la nota de cabecera:
   esto reemplaza al <select> "Elige una opción" de WooCommerce. */
.cfg { padding: 20px 24px 4px; }

.cfg-group + .cfg-group { margin-top: 22px; }

.cfg-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}
.cfg-top .sys-label { color: var(--mm-gris-texto); }
.cfg-top .cfg-current { font-size: 12.5px; font-weight: 600; color: var(--mm-morado); }

.cfg-opts { display: grid; gap: 8px; }

.cfg-opt {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--mm-gris-seda);
  border-radius: 11px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.cfg-opt:hover { border-color: var(--mm-malva); }
.cfg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cfg-opt:has(input:checked) {
  border-color: var(--mm-morado);
  background: var(--mm-rosa-bruma);
}
.cfg-opt .o-name { font-size: 13.5px; font-weight: 500; color: var(--mm-grafito); }
.cfg-opt .o-conseq {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  color: var(--mm-gris);
}
.cfg-opt .o-delta {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mm-gris-texto);
  white-space: nowrap;
}
.cfg-opt .o-delta.free { color: var(--mm-verde-confirmacion); font-weight: 500; }

/* Agotada: se muestra, no se esconde. Saber que existe una variante
   y está agotada es información; que desaparezca del selector es
   una pequeña traición al usuario. */
.cfg-opt.out { opacity: 0.5; cursor: not-allowed; }
.cfg-opt.out .o-delta { color: var(--mm-gris); }

/* Sugerencia de Amore sobre una variación concreta */
.cfg-pick {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 10px;
  padding: 11px 13px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--mm-azul-lavanda), rgba(217,221,246,0.3));
}
.cfg-pick .p-dot {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-top: 1px;
  background: radial-gradient(circle at 34% 28%, #FFE6F2, var(--mm-coral) 46%, var(--mm-morado) 100%);
}
.cfg-pick p {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mm-uva);
}

/* ── 8.2 MENSAJE PARA QUIEN LO RECIBE ──
   El punto de mayor carga emocional de todo el flujo y el que
   ningún marketplace atiende: la tarjeta se llena a las carreras en
   el checkout, con 40 caracteres y sin ayuda. Acá Amore la redacta
   a partir del brief, y el usuario edita.
   Es también la mejor demostración del asistente en toda la compra:
   no recomienda, escribe. */
.note-block {
  margin: 22px 24px 0;
  padding: 16px 18px 18px;
  border: 1px dashed var(--mm-dorado);
  border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(247,230,182,0.34), rgba(247,230,182,0.08));
}
.note-block .sys-label { display: block; color: #7A5A12; margin-bottom: 4px; }
.note-block .n-hint { font-size: 12px; line-height: 1.5; color: #6E4F14; margin-bottom: 12px; }

.note-area {
  width: 100%;
  min-height: 82px;
  padding: 12px 13px;
  border: 1px solid rgba(232, 196, 106, 0.7);
  border-radius: 10px;
  background: var(--mm-blanco-perla);
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--mm-gris-texto);
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
}
.note-area:focus { border-color: var(--mm-morado); }
.note-area::placeholder { font-style: normal; font-family: var(--font-base); font-size: 13px; color: var(--mm-gris); }

.note-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.btn-draft {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--mm-morado);
  border-radius: 999px;
  background: transparent;
  color: var(--mm-morado);
  font-size: 12px;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}
.btn-draft:hover { background: var(--mm-morado); color: #fff; }
.btn-draft:disabled { opacity: 0.55; pointer-events: none; }
.note-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: #8A7333;
}

/* ── 8.3 ENTREGA: certeza, no urgencia ──
   Reemplaza al "últimas 5 unidades". La fecha se calcula, se nombra
   y se garantiza. Es la misma función psicológica con el registro
   invertido: en vez de miedo a perderlo, confianza en que llega. */
.delivery {
  margin: 22px 24px 0;
  padding-top: 18px;
  border-top: var(--hairline);
  display: grid;
  gap: 10px;
}
.delivery li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  align-items: start;
  list-style: none;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--mm-gris-texto);
}
.delivery svg { color: var(--mm-verde-confirmacion); transform: translateY(2px); }
.delivery li.info svg { color: var(--mm-azul-informacion); }
.delivery strong { font-weight: 600; color: var(--mm-grafito); }
.delivery .d-date {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--mm-grafito);
}

.buy-actions { padding: 20px 24px 24px; display: grid; gap: 9px; }

.btn-buy {
  padding: 15px;
  border: none;
  border-radius: 999px;
  background: var(--mm-morado);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  transition: background 0.22s;
}
.btn-buy:hover { background: var(--mm-morado-accion); }

.btn-ghost {
  padding: 13px;
  border: 1px solid var(--mm-gris-seda);
  border-radius: 999px;
  background: transparent;
  color: var(--mm-gris-texto);
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.2s, color 0.2s;
}
.btn-ghost:hover { border-color: var(--mm-morado); color: var(--mm-morado); }

.buy-fine {
  padding: 0 24px 22px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--mm-gris);
}

/* ═══════════════════════════════════════════════════════════════
   9 · LOS OTROS FINALISTAS
   ───────────────────────────────────────────────────────────────
   No "productos relacionados" (que es un algoritmo de similitud):
   los OTROS de la misma selección. Reutiliza .card de shop.css sin
   una línea nueva, y eso es a propósito — la continuidad visual
   entre listado y producto es parte del argumento.
   ═══════════════════════════════════════════════════════════════ */
.pd-siblings { padding: var(--gap-seccion) 0 0; }
.pd-siblings .tier-head { margin-bottom: 24px; }
.siblings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ═══════════════════════════════════════════════════════════════
   10 · CIERRE · preguntarle a Amore por ESTE producto
   ───────────────────────────────────────────────────────────────
   Azul Noche, el color que el manual reserva para "gradientes
   nocturnos, Amore, tech premium". Cierra el circuito de la página:
   la duda no se resuelve en un FAQ genérico, se resuelve
   preguntando. Las tres preguntas sugeridas son las que de verdad
   frenan una compra de regalo.
   ═══════════════════════════════════════════════════════════════ */
.pd-ask {
  margin-top: var(--gap-seccion);
  padding: 52px 0 58px;
  color: #fff;
  background:
    radial-gradient(ellipse 60% 80% at 20% 10%, rgba(143,220,234,0.14), transparent 62%),
    linear-gradient(140deg, var(--mm-ciruela), var(--mm-azul-noche));
}
.ask-inner { max-width: 720px; }
.pd-ask .sys-label { display: block; color: var(--mm-cian-dato); margin-bottom: 12px; }
.pd-ask h2 {
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.pd-ask h2 em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  color: var(--mm-cian-dato);
}
.ask-lead {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.68);
}

.ask-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 8px 8px 8px 18px;
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  transition: border-color 0.22s;
}
.ask-row:focus-within { border-color: var(--mm-cian-dato); }
.ask-row input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  padding: 6px 0;
}
.ask-row input::placeholder { color: rgba(255,255,255,0.42); }
.ask-send {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--mm-coral), var(--mm-morado));
  color: #fff;
  transition: transform 0.16s;
}
.ask-send:hover { transform: scale(1.07); }

.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ask-chip {
  padding: 8px 15px;
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.82);
  font-size: 12.5px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.ask-chip:hover { background: rgba(143,220,234,0.14); border-color: rgba(143,220,234,0.6); color: #fff; }

/* Respuesta de Amore en la misma superficie oscura */
.ask-answer {
  margin-top: 18px;
  padding: 16px 18px;
  border-left: 2px solid var(--mm-cian-dato);
  border-radius: 0 10px 10px 0;
  background: rgba(255,255,255,0.06);
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,0.92);
  display: none;
}
.ask-answer.on { display: block; }

/* ═══════════════════════════════════════════════════════════════
   11 · BARRA DE COMPRA MÓVIL
   ───────────────────────────────────────────────────────────────
   En móvil la columna sticky desaparece, así que precio y acción
   pasan a una barra inferior fija. Aparece sólo cuando el botón
   original salió de vista (ver producto.js): mostrarla siempre
   tapa contenido sin necesidad.
   ═══════════════════════════════════════════════════════════════ */
.buy-dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 65;
  display: none;
  align-items: center;
  gap: 14px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(14px);
  border-top: var(--hairline);
  transform: translateY(110%);
  transition: transform 0.34s cubic-bezier(0.2,0.9,0.2,1);
}
.buy-dock.up { transform: none; }
.buy-dock .dk-price {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mm-grafito);
}
.buy-dock .dk-date {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--mm-verde-confirmacion);
}
.buy-dock .btn-buy { flex: 1; padding: 13px; font-size: 13.5px; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .pd-layout { grid-template-columns: 1fr 350px; gap: 32px; }
  .siblings-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .pd-layout { grid-template-columns: 1fr; gap: 26px; }
  .pd-buy { position: static; }

  /* ── Orden en móvil (revisión del cliente) ──
     Antes la compra subía por encima de todo, para que nadie tuviera
     que leer seis bloques antes de ver el precio. El cliente pidió la
     galería arriba, y tiene razón: en un regalo lo primero que se
     evalúa es cómo se ve. La solución no es invertir el orden entero
     sino partirlo en tres:

        1 · galería   — corta: imagen y miniaturas
        2 · compra    — precio, configurador, tarjeta, entrega
        3 · argumento — por qué, ficha, taller, cómo llega

     Así se ve el producto, se decide, y el argumento largo queda para
     quien lo necesite. Y el precio sigue estando a un scroll corto.

     display:contents disuelve .pd-col-left para que sus hijos pasen a
     ser celdas de .pd-layout y se puedan ordenar junto a .pd-buy, sin
     duplicar markup ni mover nada del HTML. */
  .pd-col-left { display: contents; }
  .pd-gallery { order: 1; }
  .pd-buy     { order: 2; }
  .pd-why     { order: 3; margin-top: 0; }
  .pd-block   { order: 4; }

  .dossier { grid-template-columns: 1fr; }
  .buy-dock { display: flex; }
  .pd-siblings { padding-bottom: 20px; }
}

@media (max-width: 680px) {
  .pd-context { padding-top: calc(var(--header-h) + 10px); }
  .pd-position { margin-left: 0; width: 100%; justify-content: space-between; }
  .pd-thumbs { grid-template-columns: repeat(4, 1fr); }
  .arrival { grid-template-columns: 1fr; }
  .why-match li { grid-template-columns: 18px 1fr; }
  .why-match .mk { grid-column: 2; margin-bottom: -6px; }
  .why-match .mv { grid-column: 2; }
  .siblings-grid { grid-template-columns: 1fr; }
  .buy-head h1 { font-size: 19px; }
  .buy-price .amount { font-size: 23px; }
  .pd-ask { padding: 40px 0 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .buy-dock, .ask-send, .buy-price .amount { transition: none !important; }
}