/* ═══════════════════════════════════════════════════════════════ MOREAMORE — Catálogo en frío · Hoja de plantilla ═══════════════════════════════════════════════════════════════ Carga DESPUÉS de styles.css y shop.css. De shop.css reutiliza sin una línea nueva: los tokens, --font-mono, .sys-label, .card y TODO el bloque de facetas (.filter-group, .filter-check, .price-out, .pill-toggles). Lo que en la versión con brief vive en un cajón, acá se renderiza inline — es el mismo markup en otro contenedor. En WordPress esto NO es otra plantilla: es archive-product.html sin la clase has-brief en . Se separa en el prototipo sólo para poder mostrarle al cliente los dos estados lado a lado. ─────────────────────────────────────────────────────────────── LA TESIS Esta es la página que ve quien entra por Google. Tiene que ser una buena página de categoría: H1 real, facetas rastreables, grilla honesta, texto de categoría indexable. Pero el riesgo de que quede BUENA es que se vuelva el camino por defecto. Si el usuario filtra, compra y nunca habla con Amore, moreAmore termina siendo un marketplace más con un chatbot que nadie usa. El diferenciador no muere por mal diseño: muere por ser opcional. Así que el trabajo de esta plantilla es doble: funcionar sola, y ofrecer el traspaso EN EL MOMENTO EN QUE EL USUARIO SIENTE EL DOLOR. No con un banner permanente — los banners se vuelven invisibles en dos visitas. ─────────────────────────────────────────────────────────────── LOS CINCO MOMENTOS DE TRASPASO (pattern "mam/handoff-*") Cada uno se dispara por una señal concreta y NOMBRA lo que el usuario acaba de hacer. Esa especificidad es toda la diferencia entre "¡Chatea con nuestro asistente IA!" —que se ignora— y "llevás seis filtros y no abriste ningún producto". M0 · Entrada · siempre visible, pero en un solo renglón M1 · Fatiga de filtro· 5+ cambios de faceta sin abrir producto M2 · Cero resultados · el estado vacío ES el traspaso M3 · Orden por precio· señal de restricción de presupuesto M4 · Paginación honda· página 3+ del listado M5 · Duda de producto· por tarjeta, el de mayor intención El M5 es el más valioso y el más barato: el usuario ya eligió un producto y lo único que le falta es saber si le va a gustar a ella. ─────────────────────────────────────────────────────────────── LA DEGRADACIÓN VISIBLE Las tarjetas acá NO llevan la razón de Amore, porque no hay brief del cual derivarla. Ese hueco es intencional: es lo que el usuario nota que le falta. Lo que sí se queda —proveedor, entrega, empaque— no depende del asistente y sostiene el ADN premium sin estrellas ni escasez. ═══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ 1 · CABECERA DE CATEGORÍA ─────────────────────────────────────────────────────────────── Acá sí hay H1 de categoría y texto rastreable. En la versión con brief el H1 es "Revisé 482 regalos" — mejor producto, peor SEO. Esta plantilla es la que Google indexa, así que la jerarquía se invierte a propósito. ═══════════════════════════════════════════════════════════════ */ .cat-head { padding: calc(var(--header-h) + 32px) 0 26px; background: var(--mm-perla-calida); border-bottom: var(--hairline); } .cat-head .breadcrumb { color: var(--mm-gris); margin-bottom: 16px; } .cat-head .breadcrumb a:hover { color: var(--mm-morado); } .cat-head .breadcrumb .current { color: var(--mm-grafito); } .cat-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; flex-wrap: wrap; } .cat-head h1 { font-size: clamp(24px, 2.7vw, 31px); font-weight: 600; letter-spacing: -0.02em; color: var(--mm-grafito); } .cat-head .cat-lead { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--mm-gris-texto); max-width: 62ch; } .cat-count { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--mm-gris); padding-bottom: 4px; white-space: nowrap; } .cat-count strong { color: var(--mm-grafito); font-weight: 700; } /* ═══════════════════════════════════════════════════════════════ 2 · M0 · ENTRADA A AMORE — pattern "mam/handoff-entry" ─────────────────────────────────────────────────────────────── Un renglón, no un panel. En la versión con brief el panel oscuro es el hero de la página; acá Amore es una oferta, no el motor, y el tamaño lo dice. Un panel grande y permanente se vuelve ceguera de banner en la segunda visita. Lleva input real, no un botón que abre un chat: escribir la primera frase acá ES el compromiso. Un botón "Habla con Amore" agrega un paso antes del único que importa. ═══════════════════════════════════════════════════════════════ */ .amore-entry { background: linear-gradient(90deg, var(--mm-azul-lavanda) 0%, rgba(217,221,246,0.40) 100%); border-bottom: 1px solid rgba(139, 48, 137, 0.12); } .ae-inner { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 15px 0; } .ae-dot { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #FFE6F2, var(--mm-coral) 46%, var(--mm-morado) 100%); } .ae-copy { min-width: 0; } .ae-copy strong { font-size: 13.5px; font-weight: 600; color: var(--mm-grafito); } .ae-copy span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--mm-uva); } .ae-row { display: flex; align-items: center; gap: 8px; width: min(420px, 100%); padding: 6px 6px 6px 15px; border: 1px solid rgba(139, 48, 137, 0.28); border-radius: 999px; background: var(--mm-blanco-perla); transition: border-color 0.2s, box-shadow 0.2s; } .ae-row:focus-within { border-color: var(--mm-morado); box-shadow: 0 0 0 3px rgba(139, 48, 137, 0.10); } .ae-row input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: 13.5px; color: var(--mm-grafito); padding: 5px 0; } .ae-row input::placeholder { color: var(--mm-gris); } .ae-send { flex-shrink: 0; width: 32px; height: 32px; 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; } .ae-send:hover { transform: scale(1.07); } /* ═══════════════════════════════════════════════════════════════ 3 · LAYOUT · facetas inline ═══════════════════════════════════════════════════════════════ */ .cat-body { padding: 28px 0 70px; } .cat-layout { display: grid; grid-template-columns: 246px 1fr; gap: 34px; align-items: start; } .cat-results { min-width: 0; } /* Contenedor de las facetas: el mismo markup del cajón, inline. Pegado, porque acá filtrar ES la navegación principal. */ .facets { position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; padding: 20px; border: var(--hairline); border-radius: var(--radius); background: var(--mm-blanco-perla); scrollbar-width: thin; } .facets-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 16px; margin-bottom: 4px; border-bottom: var(--hairline); } .facets-head h2 { font-size: 14px; font-weight: 600; color: var(--mm-grafito); } .facets-clear { border: none; background: none; font-size: 11.5px; color: var(--mm-gris); border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; } .facets-clear:hover { color: var(--mm-morado); border-color: currentColor; } /* Chips de lo aplicado: en un listado con facetas inline el usuario pierde de vista qué tiene puesto. Esto es lo que hace legible el estado — y lo que hace medible el M1. */ .applied { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; } .applied:empty { display: none; } .applied .ap { display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px 5px 12px; border-radius: 999px; border: 1px solid var(--mm-gris-seda); background: var(--mm-blanco-perla); font-size: 12px; color: var(--mm-gris-texto); } .applied .ap button { display: grid; place-items: center; width: 16px; height: 16px; border: none; border-radius: 50%; background: var(--mm-gris-nube); color: var(--mm-gris-texto); font-size: 10px; line-height: 1; transition: background 0.18s; } .applied .ap button:hover { background: var(--mm-gris-seda); } /* ── Barra de resultados ── */ .res-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; margin-bottom: 20px; border-bottom: var(--hairline); flex-wrap: wrap; } .res-bar .rb-count { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--mm-gris); } .res-bar .rb-count strong { color: var(--mm-grafito); } .sort-wrap { display: flex; align-items: center; gap: 8px; } .sort-wrap label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--mm-gris); } .sort-wrap select { appearance: none; padding: 8px 30px 8px 12px; border: var(--hairline); border-radius: 8px; background: var(--mm-blanco-perla); font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--mm-grafito); cursor: pointer; outline: none; } .sort-wrap select:focus { border-color: var(--mm-morado); } /* ── Grilla honesta: 4 columnas, sin niveles ── Acá 4 columnas es lo correcto: nadie rankeó nada, así que no hay jerarquía que representar. Fingir niveles sin brief sería mentir sobre de dónde viene el orden. */ .cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } /* Línea de proveedor: reemplaza a la razón de Amore. No depende del asistente y sostiene el ADN premium (taller con nombre y ciudad) sin estrellas ni "últimas 5 unidades". */ .card-supplier { margin-top: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.03em; color: var(--mm-gris); } /* ── M5 · Duda de producto — pattern "mam/handoff-card" ── Por tarjeta, el traspaso de mayor intención: el usuario ya eligió un producto y lo único que le falta es saber si le va a gustar a ella. Visualmente casi nada — mono, gris, 10px — porque su valor está en aparecer justo ahí, no en llamar la atención. */ .card-ask { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 0 0 1px; border: none; background: none; border-bottom: 1px dashed var(--mm-gris-seda); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mm-gris); transition: color 0.2s, border-color 0.2s; } .card-ask:hover { color: var(--mm-morado); border-color: var(--mm-morado); } .card-ask .ca-dot { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #FFE6F2, var(--mm-coral) 46%, var(--mm-morado) 100%); } /* ═══════════════════════════════════════════════════════════════ 4 · TRASPASOS DENTRO DE LA GRILLA — pattern "mam/handoff-inline" ─────────────────────────────────────────────────────────────── Los M1 y M3 se inyectan COMO UNA CELDA DE LA GRILLA, no como un banner arriba ni como un toast. Un banner es cromo y se ignora; una celda ocupa el lugar donde el ojo ya está buscando producto, así que se lee. Ocupa dos columnas: suficiente para no parecer una tarjeta rota, no tanto como para romper el ritmo del listado. ═══════════════════════════════════════════════════════════════ */ .handoff-cell { grid-column: span 2; display: flex; flex-direction: column; justify-content: center; padding: 22px 24px; border: 1px solid rgba(139, 48, 137, 0.22); border-radius: var(--radius); background: linear-gradient(135deg, var(--mm-azul-lavanda), rgba(248,234,244,0.6)); animation: hc-in 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both; } @keyframes hc-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .hc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .hc-dot { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #FFE6F2, var(--mm-coral) 46%, var(--mm-morado) 100%); } .hc-top .sys-label { color: var(--mm-uva); } .hc-close { margin-left: auto; width: 24px; height: 24px; display: grid; place-items: center; border: none; border-radius: 50%; background: rgba(255,255,255,0.6); color: var(--mm-uva); transition: background 0.2s; } .hc-close:hover { background: #fff; } /* El texto nombra lo que el usuario ACABA de hacer. Ahí está todo el valor: es la diferencia entre una oferta y un anuncio. */ .handoff-cell h3 { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--mm-grafito); } .handoff-cell p { margin-top: 7px; font-size: 13px; line-height: 1.55; color: var(--mm-gris-texto); } .hc-row { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 6px 6px 15px; border: 1px solid rgba(139, 48, 137, 0.28); border-radius: 999px; background: var(--mm-blanco-perla); } .hc-row:focus-within { border-color: var(--mm-morado); } .hc-row input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: 13px; color: var(--mm-grafito); padding: 5px 0; } .hc-row button { flex-shrink: 0; width: 30px; height: 30px; border: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--mm-coral), var(--mm-morado)); color: #fff; } /* ═══════════════════════════════════════════════════════════════ 5 · M2 · CERO RESULTADOS — pattern "mam/handoff-empty" ─────────────────────────────────────────────────────────────── El estado vacío ES el traspaso, no un mensaje con un traspaso adentro. Es el punto donde todo marketplace pierde al usuario ("0 resultados. Intenta con otros filtros") y donde Amore tiene la ventaja más clara: puede razonar sobre lo que se pidió, no sólo intersectar taxonomías. Ofrece las dos salidas reales: relajar una faceta concreta —dicha por su nombre— o contarle a Amore. Nunca "intenta con otros filtros", que le devuelve el problema al usuario. ═══════════════════════════════════════════════════════════════ */ .no-results { display: none; padding: 20px 0 40px; } .cat-results.empty .cat-grid, .cat-results.empty .pager { display: none; } .cat-results.empty .no-results { display: block; } .nr-card { padding: 34px 34px 36px; border: 1px solid rgba(139, 48, 137, 0.20); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--mm-azul-lavanda), rgba(248,234,244,0.55)); } .nr-card .hc-top { margin-bottom: 14px; } .nr-card h2 { font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--mm-grafito); max-width: 34ch; } .nr-card p { margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: var(--mm-gris-texto); max-width: 54ch; } .nr-relax { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .nr-relax button { padding: 9px 15px; border: 1px solid rgba(139, 48, 137, 0.35); border-radius: 999px; background: rgba(255,255,255,0.7); font-size: 12.5px; font-weight: 600; color: var(--mm-uva); transition: background 0.2s, border-color 0.2s; } .nr-relax button:hover { background: #fff; border-color: var(--mm-morado); } .nr-card .hc-row { max-width: 460px; margin-top: 20px; } /* ═══════════════════════════════════════════════════════════════ 6 · PAGINACIÓN ─────────────────────────────────────────────────────────────── Acá sí hay paginación numérica, al contrario que en la versión con brief: sin ranking, "ver más" no tiene sentido y las páginas son rastreables. El contador de página es también el disparador del M4. ═══════════════════════════════════════════════════════════════ */ .pager { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 40px; } .pager button, .pager a { min-width: 34px; height: 34px; padding: 0 9px; display: grid; place-items: center; border: none; border-radius: 8px; background: transparent; font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--mm-gris-texto); transition: background 0.2s, color 0.2s; } .pager button:hover, .pager a:hover { background: var(--mm-gris-nube); } .pager .on { background: var(--mm-grafito); color: #fff; font-weight: 700; } .pager .gap { color: var(--mm-gris); } .pager button:disabled { opacity: 0.32; pointer-events: none; } /* M4 · Paginación honda: aparece bajo el paginador, no encima. Quien llegó a la página 3 ya invirtió esfuerzo; interrumpirlo antes de que vea los resultados sería castigarlo por explorar. */ .deep-nudge { display: none; align-items: center; gap: 13px; margin-top: 20px; padding: 14px 18px; border-left: 2px solid var(--mm-morado); border-radius: 0 10px 10px 0; background: linear-gradient(90deg, var(--mm-azul-lavanda), rgba(217,221,246,0.2)); } .deep-nudge.on { display: flex; } .deep-nudge p { flex: 1; font-size: 13px; line-height: 1.5; color: var(--mm-gris-texto); } .deep-nudge p strong { font-weight: 600; color: var(--mm-grafito); } .deep-nudge .dn-go { flex-shrink: 0; padding: 9px 17px; border: 1.5px solid var(--mm-morado); border-radius: 999px; background: transparent; font-size: 12.5px; font-weight: 600; color: var(--mm-morado); white-space: nowrap; transition: background 0.2s, color 0.2s; } .deep-nudge .dn-go:hover { background: var(--mm-morado); color: #fff; } /* ═══════════════════════════════════════════════════════════════ 7 · TEXTO DE CATEGORÍA (SEO) ─────────────────────────────────────────────────────────────── Existe sólo en esta plantilla. La versión con brief no lo tiene porque ahí la página no es una categoría, es un resultado — y un párrafo de SEO debajo de una recomendación personalizada se lee como relleno. Editorial, no keyword stuffing: si el texto no le sirve a una persona, tampoco le va a servir a Google por mucho tiempo. ═══════════════════════════════════════════════════════════════ */ .cat-seo { margin-top: 54px; padding-top: 34px; border-top: var(--hairline); } .cat-seo > .sys-label { display: block; color: var(--mm-morado); margin-bottom: 12px; } .cat-seo h2 { font-size: 19px; font-weight: 600; color: var(--mm-grafito); margin-bottom: 14px; letter-spacing: -0.01em; } .seo-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 40px; } .cat-seo p { font-size: 13.5px; line-height: 1.7; color: var(--mm-gris-texto); } .cat-seo h3 { font-size: 14px; font-weight: 600; color: var(--mm-grafito); margin-bottom: 6px; } .cat-seo .seo-block + .seo-block { margin-top: 18px; } /* Enlaces internos: sirven al SEO y a la navegación real. */ .seo-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .seo-links a { padding: 8px 14px; border: var(--hairline); border-radius: 999px; font-size: 12.5px; color: var(--mm-gris-texto); transition: border-color 0.2s, color 0.2s, background 0.2s; } .seo-links a:hover { border-color: var(--mm-morado); color: var(--mm-morado); background: var(--mm-rosa-bruma); } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════════ */ @media (max-width: 1180px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1000px) { .ae-inner { grid-template-columns: auto 1fr; } .ae-row { grid-column: 1 / -1; width: 100%; } .cat-layout { grid-template-columns: 1fr; gap: 24px; } .facets { position: static; max-height: none; } .cat-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { .cat-head { padding-top: calc(var(--header-h) + 22px); } .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .handoff-cell { grid-column: 1 / -1; padding: 18px 18px 20px; } .card-supplier { display: none; } /* prioridad al nombre y precio */ .nr-card { padding: 24px 20px 26px; } .seo-cols { grid-template-columns: 1fr; } .deep-nudge { flex-direction: column; align-items: flex-start; } .res-bar { gap: 10px; } } @media (prefers-reduced-motion: reduce) { .handoff-cell { animation: none; } }