/* ═══════════════════════════════════════════════════════════════
   MOREAMORE — Catálogo v2 · Hoja de estilos de plantilla
   ═══════════════════════════════════════════════════════════════
   Se carga DESPUÉS de css/styles.css (hereda tokens, header y footer).
   Equivale a los estilos propios de archive-product.html en el tema
   Gutenberg: mismo theme.json, más lo específico de esta plantilla.

   ───────────────────────────────────────────────────────────────
   QUÉ CAMBIÓ RESPECTO A LA v1 Y POR QUÉ

   La v1 estaba pintada como tech premium pero estructurada como
   marketplace: breadcrumb → sidebar de checkboxes → grilla uniforme
   → paginación numérica. Ese esqueleto es el de cualquier tienda.
   La mono en los precios y el azul lavanda eran capas de pintura
   sobre una arquitectura de bodega.

   La v2 parte de una premisa distinta: si Amore es el diferenciador,
   el catálogo NO es una base de datos filtrada. Es la salida visible
   de un razonamiento. Eso produce cuatro decisiones estructurales:

   1. EL BRIEF ES EL HERO. Lo primero de la página es lo que Amore
      entendió, como estado estructurado y editable. Mostrar la
      interpretación del modelo —y dejar corregirla— es el gesto
      más "producto de IA" disponible, y no existe hoy en el
      e-commerce colombiano.

   2. RESULTADOS EN NIVELES, NO EN GRILLA UNIFORME. Tres finalistas
      con justificación, luego una grilla densa de alternativas,
      luego lo que aparecería si se relaja una restricción. La
      asimetría se lee editorial; la grilla uniforme se lee query.

   3. RAZÓN EN LUGAR DE RATING. Cada tarjeta explica por qué está
      ahí. Las estrellas y el "últimas 5 unidades" salieron: son
      las palancas de MercadoLibre. Se reemplazan por certeza
      logística, que es la señal premium equivalente.

   4. SIN PAGINACIÓN. "482 resultados / páginas 01…21" comunica
      inventario. Se reemplaza por "revisé 482, estos encajan":
      el número pasa de tamaño de bodega a trabajo hecho.

   ───────────────────────────────────────────────────────────────
   DOS ESTADOS DE LA MISMA PLANTILLA

   ·  body.has-brief   → hay sesión de Amore. Panel de razonamiento
                          desplegado, facetas en el cajón lateral.
   ·  (sin la clase)   → entrada en frío (nav directa, Google, SEO).
                          El panel se colapsa a una invitación y las
                          facetas se muestran inline. Necesario: los
                          archivos de categoría deben ser rastreables
                          y funcionar sin conversación previa.
   Este prototipo demuestra el primero.

   ───────────────────────────────────────────────────────────────
   SISTEMA TIPOGRÁFICO (tres voces, cada una con un trabajo)

   ·  Montserrat        → contenido. Lo que el usuario lee.
   ·  JetBrains Mono    → la voz del sistema. Etiquetas, cifras,
                          contadores, estados. Todo dato medible.
   ·  Playfair itálica  → la voz de Amore. Exclusivamente las
                          justificaciones. Es el contraste que
                          importa: serif humana dentro de un panel
                          técnico. Amore no habla como una base de
                          datos; habla como alguien que te conoce.
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ── Funcionales (Sistema Cromático Extendido · sección 10) ──
     Uso estrictamente sistémico: estados reales, nunca decoración. */
  --mm-verde-confirmacion: #4F8A68;
  --mm-azul-informacion:   #4F8FA3;
  --mm-ambar-advertencia:  #D89A2B;
  --mm-rojo-error:         #C63D42;

  /* ── Azules auxiliares (sección 11) ──
     El manual los reserva para "IA, Amore, microinteracciones". Son
     la paleta que separa "esto es un sistema que razona" de "esto es
     una tarjeta de producto". Usarlos acá es fidelidad de marca. */
  --mm-azul-lavanda:       #D9DDF6;
  --mm-azul-perla:         #EAF7FA;
  --mm-azul-digital-suave: #7FC6D6;
  --mm-azul-profundo:      #1D3448;

  /* ── Cian de datos ──
     Derivado de Azul Digital Suave, subido en luminosidad para que
     tenga contraste AA sobre el panel oscuro. Es el único acento del
     panel de razonamiento: cian sobre ciruela es una combinación que
     no aparece en ningún marketplace de la región. */
  --mm-cian-dato:          #8FDCEA;

  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Ritmo vertical de la plantilla */
  --gap-seccion: 72px;
  --hairline: 1px solid var(--mm-gris-seda);
}

/* Header sólido desde el primer pixel: esta página no tiene hero
   oscuro debajo, así que no puede depender del scroll (ver main.js). */
body.no-hero .site-header {
  background: rgba(42, 15, 44, 0.96);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}

body { background: var(--mm-blanco-perla); }

/* Foco visible y consistente en toda la plantilla */
.shop-v2 :focus-visible {
  outline: 2px solid var(--mm-morado);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Etiqueta de sistema: el recurso que aparece en cada rótulo de la
   plantilla. Mono, versalitas, tracking abierto. */
.sys-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   1 · BRIEF DE AMORE — pattern "mam/amore-brief"
   ───────────────────────────────────────────────────────────────
   EL ELEMENTO FIRMA DE LA PÁGINA.

   Es un panel oscuro a sangre completa, arriba, antes que cualquier
   producto. Contiene dos columnas: lo que Amore entendió (estado
   editable) y cómo ordenó (criterios en secuencia). Debajo, una
   línea para corregir en lenguaje natural.

   La numeración 01/02/03 de los criterios sí codifica información:
   es el orden de prioridad real del ranking, no decoración.

   WooCommerce: cada campo del brief mapea a una taxonomía —
   destinatario y ocasión a product_tag (ocasión:*, para:*),
   presupuesto a meta_query de precio, señales al atributo
   pa_personalidad. Ver Guía de Categorización.
   ═══════════════════════════════════════════════════════════════ */
.amore-brief {
  position: relative;
  padding: calc(var(--header-h) + 40px) 0 38px;
  color: #fff;
  background:
    radial-gradient(ellipse 70% 90% at 78% 0%, rgba(143, 220, 234, 0.13), transparent 65%),
    linear-gradient(155deg, var(--mm-ciruela) 0%, #241A34 55%, var(--mm-azul-profundo) 100%);
  overflow: hidden;
}

/* Retícula técnica muy tenue: lenguaje de panel de control. Se
   desvanece hacia abajo para no competir con el contenido. */
.amore-brief::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(143, 220, 234, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 220, 234, 0.05) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: linear-gradient(180deg, #000, transparent 78%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 78%);
  pointer-events: none;
}

.amore-brief > .container { position: relative; z-index: 1; }

/* ── Breadcrumb sobre oscuro ── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.42);
  margin-bottom: 26px;
}
.breadcrumb a { transition: color 0.2s; }
.breadcrumb a:hover { color: var(--mm-cian-dato); }
.breadcrumb .current { color: rgba(255,255,255,0.9); }

/* ── Titular: el trabajo hecho, no el tamaño del inventario ── */
.brief-headline {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.brief-headline h1 {
  font-size: clamp(24px, 2.9vw, 34px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.brief-headline h1 em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  color: var(--mm-cian-dato);
}

/* Contador: se lee como telemetría, no como "482 resultados" */
.brief-scan {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(143, 220, 234, 0.28);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--mm-cian-dato);
  white-space: nowrap;
}
.brief-scan .live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mm-cian-dato);
  animation: brief-live 2.4s ease-in-out infinite;
}
@keyframes brief-live {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(143,220,234,0.6); }
  60%      { opacity: 0.5; box-shadow: 0 0 0 6px rgba(143,220,234,0); }
}

/* ── Cuerpo del panel: dos columnas ── */
.brief-body {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.035);
  backdrop-filter: blur(8px);
  overflow: hidden;
}

.brief-col { padding: 22px 26px 24px; }
.brief-col + .brief-col { border-left: 1px solid rgba(255,255,255,0.12); }

.brief-col > .sys-label {
  display: block;
  color: rgba(143, 220, 234, 0.72);
  margin-bottom: 16px;
}

/* ── Campos del brief: pares etiqueta/valor, valor editable ──
   El subrayado punteado es el affordance: dice "esto lo puedes
   cambiar" sin necesitar un icono de lápiz en cada línea. */
.brief-field {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
}
.brief-field + .brief-field { border-top: 1px solid rgba(255,255,255,0.08); }

.brief-field .fname {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.40);
}

.brief-field .fval {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  line-height: 1.45;
  border: none;
  background: none;
  padding: 1px 2px;
  margin: -1px -2px;
  text-align: left;
  border-bottom: 1px dashed rgba(143, 220, 234, 0.45);
  border-radius: 3px;
  transition: background 0.18s, border-color 0.18s;
}
.brief-field .fval:hover {
  background: rgba(143, 220, 234, 0.12);
  border-bottom-color: var(--mm-cian-dato);
}
.brief-field .fval[contenteditable="true"] {
  background: rgba(143, 220, 234, 0.16);
  border-bottom-style: solid;
  outline: none;
}
.brief-field .fval .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── Criterios de orden: secuencia real de prioridad ── */
.brief-criteria { display: flex; flex-direction: column; gap: 2px; }

.criterion {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 9px 0;
}
.criterion + .criterion { border-top: 1px solid rgba(255,255,255,0.08); }

.criterion .cnum {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mm-cian-dato);
}
.criterion p {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.78);
}
.criterion p strong { color: #fff; font-weight: 600; }

/* ── Línea de corrección en lenguaje natural ──
   Reemplaza al command bar tipo ⌘K: acá el lenguaje natural no es
   un atajo para power users, es la interfaz principal. */
.brief-correct {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.correct-row {
  flex: 1;
  min-width: 260px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 9px 9px 16px;
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  transition: border-color 0.22s, background 0.22s;
}
.correct-row:focus-within {
  border-color: rgba(143, 220, 234, 0.7);
  background: rgba(143, 220, 234, 0.08);
}
.correct-row input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  padding: 4px 0;
}
.correct-row input::placeholder { color: rgba(255,255,255,0.42); }

.correct-send {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--mm-ciruela);
  background: var(--mm-cian-dato);
  transition: transform 0.16s;
}
.correct-send:hover { transform: scale(1.08); }

.btn-manual {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 999px;
  background: transparent;
  color: rgba(255,255,255,0.82);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.btn-manual:hover {
  border-color: var(--mm-cian-dato);
  color: #fff;
  background: rgba(143, 220, 234, 0.1);
}
.btn-manual .mcount {
  font-variant-numeric: tabular-nums;
  color: var(--mm-cian-dato);
}

/* ═══════════════════════════════════════════════════════════════
   2 · RÓTULOS DE NIVEL — pattern "mam/tier-head"
   ───────────────────────────────────────────────────────────────
   Cada nivel de resultados se anuncia con su lógica explícita. El
   usuario siempre sabe por qué está viendo lo que está viendo: es
   la diferencia entre un ranking y un volcado de base de datos.
   ═══════════════════════════════════════════════════════════════ */
.tier { padding-top: var(--gap-seccion); }
.tier:first-of-type { padding-top: 52px; }

.tier-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 28px;
  border-bottom: var(--hairline);
}

.tier-head .sys-label { color: var(--mm-morado); display: block; margin-bottom: 8px; }

.tier-head h2 {
  font-size: 21px;
  font-weight: 600;
  color: var(--mm-grafito);
  letter-spacing: -0.01em;
}
.tier-head .tier-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--mm-gris);
  max-width: 42ch;
  padding-bottom: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   3 · TARJETA DE PRODUCTO — pattern "mam/product-card"
   ───────────────────────────────────────────────────────────────
   Sin estrellas y sin escasez. En su lugar:

   ·  la razón de Amore, en Playfair itálica (la voz de Amore)
   ·  certeza logística en mono (entrega, empaque, proveedor)

   Sin sombras: hairline + cambio de superficie en hover. Las
   sombras difusas y el translateY son el hover por defecto de
   cualquier tienda; el borde que se activa se lee como interfaz.

   NOTA DE PRODUCCIÓN: los iconos sobre gradiente son placeholder.
   Fotografía real con dirección de arte consistente es la inversión
   de mayor retorno de toda la plantilla — más que cualquier
   decisión de layout.
   ═══════════════════════════════════════════════════════════════ */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--mm-blanco-perla);
  border: var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.24s, background 0.24s;
}
.card:hover { border-color: var(--mm-malva); background: var(--mm-perla-calida); }
.card:focus-within { border-color: var(--mm-morado); }

.card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  border-bottom: var(--hairline);
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.card:hover .card-media img { transform: scale(1.05); }

/* Índice de posición: sólo en los finalistas, donde el orden
   realmente significa algo. */
.card-rank {
  position: absolute;
  top: 12px;
  left: 12px;
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 7px;
  background: rgba(42, 15, 44, 0.88);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.card-fav {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  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;
}
.card-fav:hover { color: var(--mm-coral); border-color: var(--mm-coral); }
.card-fav.on { color: var(--mm-coral); border-color: var(--mm-coral); }
.card-fav.on svg { fill: currentColor; }

.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 18px 18px;
}

.card-name {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--mm-grafito);
}

.card-price {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--mm-grafito);
}
.card-price .over { color: var(--mm-ambar-advertencia); }

/* ── La razón: la voz de Amore ──
   Serif itálica sobre un fondo lavanda apenas perceptible, con una
   regla vertical morada. Se lee como una nota escrita a mano dentro
   de una interfaz técnica: exactamente la tensión que define a
   moreAmore. Es el único lugar de la plantilla con serif. */
.card-why {
  margin-top: 14px;
  padding: 11px 13px 11px 14px;
  border-left: 2px solid var(--mm-morado);
  border-radius: 0 8px 8px 0;
  background: linear-gradient(90deg, rgba(217, 221, 246, 0.55), rgba(217, 221, 246, 0.16));
}
.card-why .sys-label {
  display: block;
  font-size: 9.5px;
  color: var(--mm-morado);
  margin-bottom: 5px;
}
.card-why p {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mm-gris-texto);
}

/* ── Certeza en lugar de escasez ──
   Reemplaza a "últimas 5 unidades". Misma función (empujar a la
   decisión) con el registro opuesto: en vez de miedo a perderlo,
   confianza en que llega bien. */
.card-trust {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.card-trust li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--mm-gris-texto);
  list-style: none;
}
.card-trust svg { flex-shrink: 0; color: var(--mm-verde-confirmacion); }
.card-trust li.info svg { color: var(--mm-azul-informacion); }

.card-actions {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-card-primary {
  flex: 1;
  padding: 11px 16px;
  border: none;
  border-radius: 999px;
  background: var(--mm-morado);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.2s;
}
.btn-card-primary:hover { background: var(--mm-morado-accion); }

/* Comparar: casilla, no botón. Es un estado de selección, no una
   acción, y el usuario debe poder marcar varias sin salir del flujo. */
.cmp-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  border: var(--hairline);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mm-gris-texto);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  white-space: nowrap;
}
.cmp-check:hover { border-color: var(--mm-morado); color: var(--mm-morado); }
.cmp-check input {
  appearance: none;
  width: 13px;
  height: 13px;
  border: 1.5px solid var(--mm-gris-seda);
  border-radius: 3px;
  transition: background 0.16s, border-color 0.16s;
}
.cmp-check input:checked { background: var(--mm-morado); border-color: var(--mm-morado); }
.cmp-check:has(input:checked) {
  border-color: var(--mm-morado);
  background: var(--mm-rosa-bruma);
  color: var(--mm-morado);
}

/* ═══════════════════════════════════════════════════════════════
   4 · NIVEL 1 · FINALISTAS — tres tarjetas amplias
   ═══════════════════════════════════════════════════════════════ */
.grid-finalistas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
/* El primer finalista lleva un acento: es la recomendación real. */
.grid-finalistas .card:first-child { border-color: var(--mm-malva); }
.grid-finalistas .card:first-child .card-rank { background: var(--mm-morado); }

/* ═══════════════════════════════════════════════════════════════
   5 · NIVEL 2 · ALTERNATIVAS — grilla densa, tarjeta compacta
   ───────────────────────────────────────────────────────────────
   Cuatro columnas acá sí es correcto: estos productos ya pasaron el
   filtro, el usuario está barriendo. La densidad es información
   ("hay más de donde elegir"), no relleno de inventario.
   ═══════════════════════════════════════════════════════════════ */
.grid-alternativas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.card.compact .card-media { aspect-ratio: 1; }
.card.compact .card-body { padding: 13px 14px 15px; }
.card.compact .card-name { font-size: 13px; }
.card.compact .card-price { font-size: 13.5px; margin-top: 6px; }
.card.compact .card-why {
  margin-top: 10px;
  padding: 8px 10px 8px 11px;
  background: none;
  border-radius: 0;
}
.card.compact .card-why .sys-label { display: none; }
.card.compact .card-why p { font-size: 12.5px; }
.card.compact .card-trust { padding-top: 11px; }
.card.compact .card-actions { display: none; }

.tier-more {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}
.btn-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  border: 1px solid var(--mm-gris-seda);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mm-gris-texto);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.btn-more:hover {
  border-color: var(--mm-morado);
  color: var(--mm-morado);
  background: var(--mm-rosa-bruma);
}
.btn-more .num { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════
   6 · NIVEL 3 · SI AMPLÍAS EL CRITERIO — pattern "mam/tier-relax"
   ───────────────────────────────────────────────────────────────
   El nivel que ningún marketplace tiene. Muestra explícitamente qué
   aparecería si se relajara una restricción, y ofrece relajarla en
   un clic. Convierte una restricción del usuario en una decisión
   informada, y es una de las palancas de ticket promedio más
   honestas que existen: no esconde el precio, lo argumenta.
   ═══════════════════════════════════════════════════════════════ */
.tier-relax {
  margin-top: var(--gap-seccion);
  padding: 40px 0 44px;
  background: var(--mm-arena);
  border-top: var(--hairline);
  border-bottom: var(--hairline);
}
.tier-relax .tier { padding-top: 0; }
.tier-relax .tier-head { border-bottom-color: rgba(75,64,75,0.14); }

.relax-swap {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border: 1.5px solid var(--mm-morado);
  border-radius: 999px;
  background: transparent;
  color: var(--mm-morado);
  font-size: 12.5px;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.relax-swap:hover { background: var(--mm-morado); color: #fff; }

.grid-relax {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.grid-relax .card { background: var(--mm-perla-calida); }
.grid-relax .card:hover { background: var(--mm-blanco-perla); }

/* ═══════════════════════════════════════════════════════════════
   7 · BARRA DE COMPARACIÓN — pattern "mam/compare-bar"
   ───────────────────────────────────────────────────────────────
   Aparece al marcar dos productos. No compara especificaciones en
   una tabla (eso es electrónica de consumo): le pide a Amore que
   explique el trade-off para ESTE caso. La inteligencia percibida
   es alta y el costo de implementación es una sola llamada al API.
   ═══════════════════════════════════════════════════════════════ */
.compare-bar {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 70;
  transform: translate(-50%, 130%);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 13px 14px 13px 22px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: rgba(30, 12, 32, 0.94);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 40px rgba(20, 6, 22, 0.4);
  color: #fff;
  transition: transform 0.42s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.3s;
  opacity: 0;
  max-width: calc(100vw - 32px);
}
.compare-bar.visible { transform: translate(-50%, 0); opacity: 1; }

.compare-bar .cb-count {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.72);
  white-space: nowrap;
}
.compare-bar .cb-count strong { color: var(--mm-cian-dato); font-variant-numeric: tabular-nums; }

.btn-compare {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 20px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--mm-coral), var(--mm-morado));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: filter 0.2s;
}
.btn-compare:hover { filter: brightness(1.1); }
.btn-compare:disabled { opacity: 0.4; pointer-events: none; }

.cb-clear {
  border: none;
  background: none;
  color: rgba(255,255,255,0.5);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.2s;
}
.cb-clear:hover { color: #fff; }

/* ── Veredicto de la comparación ── */
.compare-panel {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 6, 22, 0.6);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s;
}
.compare-panel.open { opacity: 1; pointer-events: auto; }

.compare-card {
  width: min(560px, 100%);
  max-height: 82vh;
  overflow-y: auto;
  padding: 28px 30px 30px;
  border-radius: var(--radius-lg);
  background: var(--mm-blanco-perla);
  transform: translateY(14px) scale(0.98);
  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.compare-panel.open .compare-card { transform: none; }

.compare-card .sys-label { display: block; color: var(--mm-morado); margin-bottom: 10px; }
.compare-card h3 {
  font-size: 19px;
  font-weight: 600;
  color: var(--mm-grafito);
  margin-bottom: 18px;
}
.compare-verdict {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 16px;
  line-height: 1.6;
  color: var(--mm-gris-texto);
  padding: 16px 18px;
  border-left: 2px solid var(--mm-morado);
  background: linear-gradient(90deg, rgba(217,221,246,0.5), transparent);
  min-height: 3em;
}
.compare-close {
  margin-top: 22px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--mm-gris-seda);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mm-gris-texto);
  transition: border-color 0.2s;
}
.compare-close:hover { border-color: var(--mm-grafito); }

/* Cursor de escritura mientras Amore "responde" */
.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  vertical-align: -0.14em;
  background: var(--mm-morado);
  animation: caret 0.9s step-end infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* ═══════════════════════════════════════════════════════════════
   8 · CAJÓN DE FILTROS MANUALES — pattern "mam/filters-drawer"
   ───────────────────────────────────────────────────────────────
   Las facetas no desaparecen: se degradan. Siguen existiendo en el
   HTML (rastreables, y necesarias para quien quiere control) pero
   dejan de ser la navegación primaria. En el estado SIN brief este
   mismo markup se renderiza inline en lugar de en el cajón.
   ═══════════════════════════════════════════════════════════════ */
.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(20, 6, 22, 0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.drawer-scrim.open { opacity: 1; pointer-events: auto; }

.filters-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  width: min(390px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--mm-blanco-perla);
  transform: translateX(100%);
  transition: transform 0.36s cubic-bezier(0.3, 0.9, 0.2, 1);
  box-shadow: -18px 0 50px rgba(20, 6, 22, 0.18);
}
.filters-drawer.open { transform: none; }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 24px 18px;
  border-bottom: var(--hairline);
}
.drawer-head h2 { font-size: 16px; font-weight: 600; color: var(--mm-grafito); }
.drawer-head p {
  margin-top: 3px;
  font-size: 12px;
  color: var(--mm-gris);
}
.drawer-close {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: var(--hairline);
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-items: center;
  color: var(--mm-gris-texto);
  transition: border-color 0.2s, color 0.2s;
}
.drawer-close:hover { border-color: var(--mm-grafito); color: var(--mm-grafito); }

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 24px 26px;
}

.filter-group + .filter-group {
  margin-top: 24px;
  padding-top: 24px;
  border-top: var(--hairline);
}
.filter-group > .sys-label {
  display: block;
  color: var(--mm-gris-texto);
  margin-bottom: 13px;
}

.filter-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--mm-gris-texto);
}
.filter-check input {
  appearance: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 1.5px solid var(--mm-gris-seda);
  border-radius: 4px;
  display: grid;
  place-items: center;
  transition: border-color 0.2s, background 0.2s;
}
.filter-check input::after {
  content: '';
  width: 8px;
  height: 8px;
  background: #fff;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 45% 62%);
  transform: scale(0);
  transition: transform 0.15s;
}
.filter-check input:checked { background: var(--mm-morado); border-color: var(--mm-morado); }
.filter-check input:checked::after { transform: scale(1); }
.filter-check .fc-icon { width: 20px; height: 20px; object-fit: contain; opacity: 0.85; }
.filter-check .fc-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--mm-gris);
}

.price-out {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--mm-gris);
  margin-bottom: 12px;
}
.price-out strong { font-size: 14px; color: var(--mm-morado); }

input[type="range"] {
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: var(--mm-gris-seda);
  appearance: none;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--mm-morado);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--mm-morado);
  cursor: pointer;
}

.pill-toggles { display: flex; flex-wrap: wrap; gap: 7px; }
.pill-toggle {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--mm-gris-seda);
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: var(--mm-gris-texto);
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.pill-toggle:hover { border-color: var(--mm-malva); }
.pill-toggle.active { background: var(--mm-morado); border-color: var(--mm-morado); color: #fff; }

.drawer-foot {
  display: flex;
  gap: 10px;
  padding: 16px 24px 20px;
  border-top: var(--hairline);
  background: var(--mm-perla-calida);
}
.drawer-foot button {
  flex: 1;
  padding: 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  transition: background 0.2s, border-color 0.2s;
}
.btn-reset {
  border: 1px solid var(--mm-gris-seda);
  background: transparent;
  color: var(--mm-gris-texto);
}
.btn-reset:hover { border-color: var(--mm-grafito); }
.btn-apply { border: none; background: var(--mm-morado); color: #fff; }
.btn-apply:hover { background: var(--mm-morado-accion); }

/* ═══════════════════════════════════════════════════════════════
   9 · CIERRE · volver a la conversación
   ───────────────────────────────────────────────────────────────
   Cierra el circuito: si nada de esto sirvió, el camino de salida
   no es otra página de resultados, es hablar con Amore otra vez.
   Una lista vacía o insatisfactoria es una invitación a actuar.
   ═══════════════════════════════════════════════════════════════ */
.shop-outro {
  padding: var(--gap-seccion) 0 78px;
  text-align: center;
}
.shop-outro .sys-label { display: block; color: var(--mm-morado); margin-bottom: 12px; }
.shop-outro h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--mm-grafito);
  max-width: 28ch;
  margin: 0 auto;
  line-height: 1.3;
}
.shop-outro p {
  margin: 12px auto 24px;
  max-width: 46ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--mm-gris);
}
.btn-outro {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border: none;
  border-radius: 999px;
  background: var(--mm-grafito);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  transition: background 0.22s;
}
.btn-outro:hover { background: var(--mm-morado); }

/* ═══════════════════════════════════════════════════════════════
   10 · LANZADOR FLOTANTE DE AMORE
   ───────────────────────────────────────────────────────────────
   Se esconde cuando la barra de comparación está visible: dos
   elementos flotantes compitiendo en la misma esquina es ruido.
   ═══════════════════════════════════════════════════════════════ */
.amore-launcher {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 60;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 34% 28%, #FFE6F2, var(--mm-coral) 44%, var(--mm-morado) 100%);
  box-shadow: 0 8px 26px rgba(139, 48, 137, 0.34);
  color: #fff;
  transition: transform 0.22s, opacity 0.22s;
}
.amore-launcher:hover { transform: scale(1.06); }
.amore-launcher::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(252, 89, 89, 0.4);
  animation: launcher-pulse 2.4s ease-out infinite;
}
@keyframes launcher-pulse {
  0%   { transform: scale(0.92); opacity: 1; }
  100% { transform: scale(1.32); opacity: 0; }
}
body.comparing .amore-launcher { opacity: 0; pointer-events: none; transform: scale(0.8); }

/* Recalculando: el grid se atenúa mientras Amore reordena. Ver el
   sistema entrar en estado de trabajo es lo que produce la lectura
   de "hay algo pensando", más que cualquier spinner. */
.recalculating {
  opacity: 0.32;
  filter: blur(1.5px);
  transition: opacity 0.3s, filter 0.3s;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  :root { --gap-seccion: 58px; }
  .grid-alternativas { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .brief-body { grid-template-columns: 1fr; }
  .brief-col + .brief-col { border-left: none; border-top: 1px solid rgba(255,255,255,0.12); }
  .grid-finalistas { grid-template-columns: 1fr; }
  .grid-relax { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  :root { --gap-seccion: 46px; }
  .amore-brief { padding-top: calc(var(--header-h) + 26px); }
  .brief-headline { margin-bottom: 22px; }
  .brief-col { padding: 18px 18px 20px; }
  .brief-field { grid-template-columns: 78px 1fr; gap: 10px; }
  .btn-manual { width: 100%; justify-content: center; }
  .grid-alternativas { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .grid-relax { grid-template-columns: 1fr; }
  .card.compact .card-why { display: none; }   /* la razón se lee en el detalle */
  .compare-bar { left: 16px; right: 16px; transform: translateY(130%); bottom: 16px; padding: 12px 14px; }
  .compare-bar.visible { transform: none; }
  .compare-bar .cb-count { flex: 1; }
  .cb-clear { display: none; }
  .amore-launcher { width: 48px; height: 48px; right: 16px; bottom: 16px; }
  .tier-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .recalculating { filter: none; }
}