/* DM Sans a prueba de balas: aunque el no lo cargue (widget embebido), viaja con la hoja de estilo. El navegador deduplica con el del head. */ @import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap"); /* ============================================================ Willy · de Morrison — Sistema visual del widget Marca Morrison: rojo #9A2420, tinta #1E1E1E, DM Sans. Rojo con criterio: solo acento (avatar, CTA, enviar, oferta). La conversacion vive en tinta, blanco y grises calidos. ============================================================ */ :root { /* Marca */ --red: #9a2420; --red-deep: #7e1c18; --burdeos: #722f37; --ink: #1e1e1e; --ink-2: #2a2a2a; --sale: #a01414; --stock: #008605; --green: #22b04b; /* Superficies */ --bg: #ffffff; --paper: #ffffff; --canvas: #fbfaf9; /* area de mensajes, blanco calido */ --bubble-bot: #f2f1ee; /* burbuja Willy, gris calido */ --bubble-user: #1e1e1e; /* burbuja cliente, tinta */ --field: #f4f3f0; --border: #ededea; --line: #f0efec; --muted: #6d6d6d; --muted-2: #a2a09b; /* Tipografia */ --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Sombras (calidas, no negro puro) */ --sh-sm: 0 1px 2px rgba(24, 20, 18, 0.06); --sh-md: 0 8px 24px rgba(24, 20, 18, 0.09); --sh-lg: 0 28px 64px rgba(24, 20, 18, 0.22); --sh-red: 0 8px 22px rgba(154, 36, 32, 0.34); /* Radios */ --r-bubble: 20px; --r-card: 18px; /* Safe areas del notch */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ---- Escenario demo (solo la pagina de prueba) ---- */ .demo-stage { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #1f1a14 url("assets/cabecera.jpg") center center / cover no-repeat; color: #f2f2f2; padding: 32px; } /* Oscurecido del fondo: darken general + degradado arriba (navbar) y abajo (marca) */ .demo-stage::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 0deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.18) 28%, rgba(0, 0, 0, 0) 52% ), linear-gradient( 180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 20% ), rgba(0, 0, 0, 0.24); z-index: 0; } /* Marca de demo, centrada en el tercio inferior (no compite con el banner) */ .demo-copy { position: absolute; left: 0; right: 0; bottom: 13%; z-index: 1; text-align: center; padding: 0 24px; } .demo-copy h1 { color: #fff; font-weight: 700; font-size: clamp(30px, 4.6vw, 54px); letter-spacing: -0.025em; line-height: 1; margin: 0; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.55); } .demo-sub { color: rgba(255, 255, 255, 0.9); font-weight: 500; font-size: clamp(12px, 1.6vw, 15px); letter-spacing: 0.22em; text-transform: uppercase; margin: 9px 0 0; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); } /* ---- Paripe de barra de ecommerce ---- */ .demo-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 28px; padding-top: calc(16px + env(safe-area-inset-top, 0px)); color: #fff; } .demo-nav-left { display: flex; align-items: center; gap: 12px; } .demo-nav-menu { display: none; background: none; border: none; color: #fff; padding: 0; cursor: pointer; } .demo-nav-menu svg { width: 24px; height: 24px; display: block; } .demo-logo { font-weight: 700; font-size: 22px; letter-spacing: 0.01em; } .demo-nav-links { display: flex; gap: 26px; } .demo-nav-links a { color: rgba(255, 255, 255, 0.92); text-decoration: none; font-size: 12.5px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; cursor: default; } .demo-nav-icons { display: flex; align-items: center; gap: 18px; } .demo-nav-icons svg { width: 20px; height: 20px; display: block; } .demo-nav-bag { position: relative; display: inline-flex; } .demo-bag-count { position: absolute; top: -6px; right: -8px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: flex; align-items: center; justify-content: center; } @media (max-width: 480px) { .demo-nav { padding: 14px 18px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); } .demo-nav-menu { display: inline-flex; } .demo-nav-links { display: none; } .demo-logo { font-size: 20px; } } .demo-engine { color: rgba(255, 255, 255, 0.85); font-size: 12.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; margin: 18px 0 0; text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55); } .demo-copy p { font-size: clamp(16px, 2.4vw, 22px); color: #bdbdbd; margin: 0 0 20px; } .demo-hint { display: inline-block; font-size: 14px; color: #8a8a8a; } /* ---- Contenedor flotante ---- */ #willy-root { position: fixed; right: 24px; bottom: 24px; z-index: 9999; } /* ============================================================ Launcher (cerrado) ============================================================ */ .wl-launcher { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; } .wl-greet { background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: -0.005em; padding: 12px 16px; border-radius: 18px 18px 4px 18px; border: 1px solid rgba(24, 20, 18, 0.05); box-shadow: var(--sh-md); max-width: 220px; cursor: pointer; animation: wl-rise 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .wl-launch-btn { width: 62px; height: 62px; border: none; border-radius: 50%; background: linear-gradient(158deg, #ac2924 0%, var(--red) 46%, var(--red-deep) 100%); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--sh-red); transition: transform 0.18s ease, box-shadow 0.18s ease; animation: wl-breath 3.6s ease-in-out infinite; } .wl-launch-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(154, 36, 32, 0.46); } .wl-launch-btn:active { transform: translateY(0) scale(0.96); } .wl-launch-btn svg { width: 27px; height: 27px; } @keyframes wl-breath { 0%, 100% { box-shadow: 0 8px 22px rgba(154, 36, 32, 0.34); } 50% { box-shadow: 0 13px 30px rgba(154, 36, 32, 0.5); } } /* ============================================================ Panel de chat ============================================================ */ .wl-panel { width: 408px; max-width: calc(100vw - 32px); height: 660px; max-height: calc(100vh - 48px); background: var(--canvas); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid rgba(24, 20, 18, 0.06); box-shadow: var(--sh-lg); animation: wl-pop 0.22s cubic-bezier(0.22, 0.61, 0.36, 1); } @keyframes wl-pop { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } } /* ---- Header ---- */ .wl-header { position: relative; background: linear-gradient(180deg, #262523 0%, #1a1917 100%); padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; z-index: 2; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 20px rgba(0, 0, 0, 0.14); } .wl-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; } .wl-avatar { width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(158deg, #b32b26 0%, var(--red) 52%, var(--red-deep) 100%); color: #fff; font-weight: 700; font-size: 21px; letter-spacing: 0.01em; display: flex; align-items: center; justify-content: center; line-height: 1; flex: 0 0 auto; box-shadow: 0 3px 10px rgba(154, 36, 32, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18); } .wl-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .wl-name { color: #fff; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; line-height: 1.2; } .wl-status { display: flex; align-items: center; gap: 7px; } .wl-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: 0 0 auto; } .wl-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(34, 176, 75, 0.55); animation: wl-pulse 2.4s ease-out infinite; } @keyframes wl-pulse { to { box-shadow: 0 0 0 7px rgba(34, 176, 75, 0); } } .wl-status span:not(.wl-dot) { color: #b6b4b0; font-size: 12.5px; font-weight: 500; letter-spacing: 0.005em; } .wl-close { background: rgba(255, 255, 255, 0.06); border: none; color: #d9d7d3; cursor: pointer; padding: 0; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: background 0.15s ease, color 0.15s ease; } .wl-close:hover { background: rgba(255, 255, 255, 0.14); color: #fff; } .wl-close svg { width: 18px; height: 18px; } /* ---- Mensajes ---- */ .wl-messages { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 12px; background: var(--canvas); } .wl-messages::-webkit-scrollbar { width: 6px; } .wl-messages::-webkit-scrollbar-thumb { background: rgba(24, 20, 18, 0.14); border-radius: 999px; } .wl-messages::-webkit-scrollbar-track { background: transparent; } .wl-row { display: flex; width: 100%; animation: wl-rise 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .wl-row.user { justify-content: flex-end; } @keyframes wl-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } } /* Burbujas: tinta a la derecha (cliente), gris calido a la izquierda (Willy). Rebaje de esquina (cola) al estilo iMessage. */ .wl-bubble { padding: 11px 15px; font-size: 15px; line-height: 1.5; letter-spacing: -0.006em; max-width: 82%; white-space: pre-wrap; word-wrap: break-word; } .wl-bubble.bot { background: var(--bubble-bot); color: var(--ink); border-radius: 20px 20px 20px 6px; box-shadow: var(--sh-sm); } .wl-bubble.user { background: var(--bubble-user); color: #fff; border-radius: 20px 20px 6px 20px; box-shadow: 0 2px 8px rgba(24, 20, 18, 0.18); } .wl-bubble strong { font-weight: 700; } /* ---- Chips de sugerencia ---- */ .wl-chips { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 2px; animation: wl-rise 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .wl-chip { background: var(--paper); color: var(--ink); border: 1px solid var(--border); border-radius: 999px; padding: 9px 15px; font-size: 13px; font-weight: 600; letter-spacing: -0.005em; cursor: pointer; font-family: var(--font); box-shadow: var(--sh-sm); transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.12s ease; } .wl-chip:hover { background: var(--ink); color: #fff; border-color: var(--ink); } .wl-chip:active { transform: scale(0.96); } /* ---- Tarjeta de producto ---- */ .wl-card { border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; background: var(--paper); max-width: 78%; box-shadow: var(--sh-sm); } .wl-card img { display: block; width: 100%; object-fit: cover; background: var(--field); } .wl-card.foto img { height: 240px; } .wl-card.puesta img { height: 300px; } .wl-card.video { max-width: 78%; border-color: transparent; background: #000; } .wl-card.video video { display: block; width: 100%; max-height: 360px; background: #000; } /* Par de fotos en paralelo */ .wl-pair { display: flex; gap: 8px; max-width: 92%; } .wl-pair .wl-card.pair { flex: 1 1 0; max-width: none; min-width: 0; } .wl-pair .wl-card.pair img { height: 190px; } /* ---- Precio (etiqueta) ---- */ .wl-price { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--paper); box-shadow: var(--sh-sm); max-width: 78%; } .wl-price-now { font-size: 23px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; } .wl-price-was { font-size: 14px; color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; font-variant-numeric: tabular-nums; } .wl-price-off { margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: 0.01em; color: #fff; background: var(--sale); padding: 4px 9px; border-radius: 999px; } /* ---- Mini tarjeta "Llevatelas" -> carrito Morrison ---- */ .wl-buy { display: flex; align-items: center; gap: 12px; max-width: 78%; background: var(--paper); color: var(--ink); text-decoration: none; border: 1px solid var(--border); border-radius: 16px; padding: 10px 12px; box-shadow: var(--sh-sm); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .wl-buy:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: rgba(154, 36, 32, 0.4); } .wl-buy-thumb { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; background: var(--field); flex: 0 0 auto; } .wl-buy-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } .wl-buy-name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wl-buy-size { font-size: 13px; color: var(--muted); } .wl-buy-go { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(158deg, #ac2924, var(--red-deep)); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(154, 36, 32, 0.32); transition: transform 0.16s ease; } .wl-buy:hover .wl-buy-go { transform: scale(1.06); } .wl-buy-go svg { width: 16px; height: 16px; transform: rotate(45deg); } /* ---- Indicador escribiendo ---- */ .wl-typing { display: inline-flex; gap: 5px; align-items: center; padding: 1px 0; } .wl-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); display: inline-block; animation: wl-blink 1.3s infinite ease-in-out; } .wl-typing i:nth-child(2) { animation-delay: 0.18s; } .wl-typing i:nth-child(3) { animation-delay: 0.36s; } @keyframes wl-blink { 0%, 60%, 100% { opacity: 0.28; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } } /* ---- Barra de entrada ---- */ .wl-input { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); background: var(--paper); } .wl-field { flex: 1 1 auto; min-width: 0; border: 1px solid transparent; outline: none; background: var(--field); border-radius: 22px; padding: 12px 16px; font-size: 16px; /* 16px evita el zoom automatico de iOS al enfocar */ font-family: var(--font); letter-spacing: -0.006em; color: var(--ink); transition: background 0.16s ease, border-color 0.16s ease; } .wl-field::placeholder { color: var(--muted); } .wl-field:focus { background: var(--paper); border-color: rgba(154, 36, 32, 0.35); } .wl-send { width: 44px; height: 44px; flex: 0 0 auto; border: none; border-radius: 50%; background: linear-gradient(158deg, #ac2924 0%, var(--red) 50%, var(--red-deep) 100%); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 5px 14px rgba(154, 36, 32, 0.3); transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease; } .wl-send:hover:not(:disabled) { transform: scale(1.05); box-shadow: 0 7px 18px rgba(154, 36, 32, 0.4); } .wl-send:active:not(:disabled) { transform: scale(0.95); } .wl-send:disabled { opacity: 0.4; cursor: default; box-shadow: none; } .wl-send svg { width: 20px; height: 20px; } .wl-hidden { display: none !important; } /* ============================================================ Movil: pantalla completa nativa + safe areas del notch ============================================================ */ /* ============================================================ Intro cinematografico (aparicion proactiva a los 3s) ============================================================ */ .wl-intro { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 40px; text-align: center; background: radial-gradient( 120% 100% at 50% 45%, rgba(28, 24, 22, 0.94) 0%, rgba(10, 9, 8, 0.97) 100% ); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity 0.45s ease; } .wl-intro.show { opacity: 1; } .wl-intro.hide { opacity: 0; } .wl-intro-inner { max-width: 680px; } .wl-intro-dots { display: inline-flex; gap: 13px; } .wl-intro-dots i { width: 16px; height: 16px; border-radius: 50%; background: #fff; display: inline-block; animation: wl-blink 1.2s infinite ease-in-out; } .wl-intro-dots i:nth-child(2) { animation-delay: 0.2s; } .wl-intro-dots i:nth-child(3) { animation-delay: 0.4s; } .wl-intro-text { color: #fff; font-weight: 700; font-size: clamp(24px, 5.2vw, 40px); letter-spacing: -0.02em; line-height: 1.18; min-height: 1.1em; padding: 0 18px; } /* Cursor parpadeante mientras "escribe" (a lo ChatGPT) */ .wl-intro-text.typing::after { content: ""; display: inline-block; width: 3px; height: 0.92em; margin-left: 5px; background: #fff; border-radius: 1px; vertical-align: -0.1em; animation: wl-caret 0.9s step-end infinite; } @keyframes wl-caret { 50% { opacity: 0; } } /* Modo intro dentro del popup (fondo oscuro, esperando tu respuesta) */ .wl-intro-stage { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 8px 6px; } /* Fundido suave oscuro <-> claro al pasar del intro al chat */ .wl-messages, .wl-input, .wl-field { transition: background-color 0.45s ease, border-color 0.45s ease; } .wl-panel.wl-intro-mode .wl-messages { background-color: #16130f; align-items: center; justify-content: center; text-align: center; } .wl-panel.wl-intro-mode .wl-input { background-color: #17140f; border-top-color: rgba(255, 255, 255, 0.08); } .wl-panel.wl-intro-mode .wl-field { background: rgba(255, 255, 255, 0.08); color: #fff; } .wl-panel.wl-intro-mode .wl-field::placeholder { color: rgba(255, 255, 255, 0.55); } @keyframes wl-intro-in { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } } @keyframes wl-peek-up { from { transform: translateY(100%); } to { transform: none; } } @media (max-width: 480px) { /* Fondo de la web version movil (vertical) */ .demo-stage { background-image: url("assets/cabecera-mobile.jpg"); } #willy-root { right: 16px; bottom: 16px; left: auto; } .wl-panel { position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; border-radius: 0; border: none; animation: none; } /* Peek: cuando aparece solo (proactivo a los 3s) sale a un cuarto de pantalla desde abajo. Al tocarlo, el JS quita .wl-peek y se abre entero. */ .wl-panel.wl-peek { top: auto; height: 42dvh; min-height: 280px; border-radius: 22px 22px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.28); animation: wl-peek-up 0.32s cubic-bezier(0.22, 0.61, 0.36, 1); } /* Header fijo que respeta el notch (viewport-fit=cover activo en el ) */ .wl-header { padding-top: calc(13px + var(--safe-top)); padding-bottom: 13px; padding-left: 18px; padding-right: 16px; } .wl-messages { padding: 18px 16px 20px; gap: 12px; } .wl-bubble { font-size: 16px; line-height: 1.5; max-width: 84%; } .wl-bubble.bot { max-width: 86%; } /* Piezas ricas a lo ancho */ .wl-card, .wl-price, .wl-buy, .wl-pair, .wl-card.video { max-width: 100%; } .wl-input { padding: 12px 14px calc(12px + var(--safe-bottom)); } } /* Respeto por quien prefiere menos movimiento */ @media (prefers-reduced-motion: reduce) { .wl-panel, .wl-greet, .wl-row, .wl-chips, .wl-launch-btn, .wl-dot::after, .wl-typing i { animation: none !important; } .wl-bubble, .wl-chip, .wl-buy, .wl-send, .wl-launch-btn, .wl-close { transition: none !important; } }