/* ========================================================================== Prido · Coachmark de onboarding del Comparador Feature-discovery estilo "spotlight" que se dispara en la 1ª visita a un listado de catálogo (tienda / categoría) y enseña el botón "Comparar" de la tarjeta de producto. - Prefijo aislado .prido-cmk-* (no choca con unified-modals ni .prido-pm). - Todo el overlay se monta en por JS (fuera del contenedor con zoom:0.9 del catálogo) y se posiciona con coords de viewport. - Theme-aware: acento teal de marca (--prido-secondary). El scrim oscuro funciona igual en light y dark. ========================================================================== */ /* ── Tokens locales (con fallback por si los globales no cargaron) ── */ .prido-cmk-root { --cmk-teal: var(--prido-secondary, #2dc6c1); --cmk-teal-deep: #189b97; --cmk-scrim: rgba(13, 20, 33, 0.72); --cmk-pop-text: #ffffff; --cmk-radius: 16px; --cmk-font-head: var(--prido-font-heading, 'Outfit', system-ui, sans-serif); --cmk-font-ui: var(--prido-font-ui, 'Noto Sans', system-ui, sans-serif); } /* ── Forzar visible la barra de acciones de la tarjeta destino ── Replica el reveal de hover/focus-within/is-touch-active del tema (grilla) para que el botón Comparar quede visible y clickeable sin hover, también en móvil. Cubre el contexto genérico y el de .prido-grilla-products. */ .prido-cmk-host .prido-grilla-actions { opacity: 1 !important; transform: none !important; pointer-events: auto !important; } /* ── Contenedor raíz del overlay (montado en body) ── */ .prido-cmk-root { position: fixed; inset: 0; z-index: 100000; /* sobre header sticky y barra flotante compare */ pointer-events: none; /* solo el globo y el botón capturan eventos */ font-family: var(--cmk-font-ui); } /* ── Spotlight: oscurece todo menos el rect del botón ── El div es transparente en su área (deja ver el botón debajo) y proyecta la sombra hacia afuera. pointer-events:none para que el clic pase al botón. */ .prido-cmk-spot { position: fixed; border-radius: 999px; pointer-events: none; box-shadow: 0 0 0 9999px var(--cmk-scrim), 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 0 6px var(--cmk-teal); transition: opacity 0.2s ease; opacity: 0; } .prido-cmk-root.is-open .prido-cmk-spot { opacity: 1; } /* Capa que captura el clic-fuera para cerrar (debajo del globo, sobre el resto). No tapa el hueco del spotlight porque el spot tiene pointer-events:none y esta capa sí, pero el botón vive en su propio stacking de la tarjeta. */ .prido-cmk-catch { position: fixed; inset: 0; pointer-events: auto; background: transparent; } /* ── Globo explicativo ── */ .prido-cmk-pop { position: fixed; pointer-events: auto; max-width: 320px; width: max-content; box-sizing: border-box; padding: 18px 20px 16px; border-radius: var(--cmk-radius); background: linear-gradient(155deg, var(--cmk-teal) 0%, var(--cmk-teal-deep) 100%); color: var(--cmk-pop-text); box-shadow: 0 18px 48px -12px rgba(13, 20, 33, 0.55), 0 2px 8px rgba(13, 20, 33, 0.25); opacity: 0; transform: translateY(6px) scale(0.98); transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.2, 0.7, 0.2, 1); } .prido-cmk-root.is-open .prido-cmk-pop { opacity: 1; transform: none; } .prido-cmk-pop__title { margin: 0 0 6px; font-family: var(--cmk-font-head); font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; } .prido-cmk-pop__text { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.92); } .prido-cmk-pop__btn { appearance: none; -webkit-appearance: none; cursor: pointer; display: inline-block; border: 0; border-radius: 999px; padding: 9px 20px; font-family: var(--cmk-font-ui); font-size: 13.5px; font-weight: 700; line-height: 1; color: var(--cmk-teal-deep); background: #ffffff; box-shadow: 0 2px 6px rgba(13, 20, 33, 0.18); transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .prido-cmk-pop__btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(13, 20, 33, 0.24); } .prido-cmk-pop__btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; } /* ── Flecha del globo (apunta al botón) ── El JS añade un modificador de lado: --bottom / --top / --left / --right. El triángulo se dibuja con un cuadrado rotado del color del globo. */ .prido-cmk-pop::after { content: ""; position: absolute; width: 14px; height: 14px; background: var(--cmk-teal); transform: rotate(45deg); } /* globo ABAJO del botón → flecha arriba */ .prido-cmk-pop--bottom::after { top: -6px; left: var(--cmk-arrow, 28px); background: var(--cmk-teal); } /* globo ARRIBA del botón → flecha abajo */ .prido-cmk-pop--top::after { bottom: -6px; left: var(--cmk-arrow, 28px); background: var(--cmk-teal-deep); } /* globo a la IZQUIERDA del botón → flecha a la derecha */ .prido-cmk-pop--left::after { right: -6px; top: var(--cmk-arrow, 24px); background: var(--cmk-teal-deep); } /* globo a la DERECHA del botón → flecha a la izquierda */ .prido-cmk-pop--right::after { left: -6px; top: var(--cmk-arrow, 24px); background: var(--cmk-teal); } /* ── Móvil: el globo ocupa el ancho con márgenes y se ancla por JS ── */ @media (max-width: 560px) { .prido-cmk-pop { max-width: none; width: calc(100vw - 28px); left: 14px !important; right: 14px !important; } /* en móvil la flecha se centra sobre/bajo el botón vía --cmk-arrow */ } /* ── Accesibilidad: sin animación si el usuario la desactiva ── */ @media (prefers-reduced-motion: reduce) { .prido-cmk-spot, .prido-cmk-pop { transition: none !important; } .prido-cmk-root.is-open .prido-cmk-pop { transform: none !important; } }