/* Demo de bot de WhatsApp · VisionForge */
@font-face{font-family:Fraunces;src:url(fonts/Fraunces-400-normal-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Fraunces;src:url(fonts/Fraunces-400-italic-latin.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Schibsted;src:url(fonts/SchibstedGrotesk-400-normal-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Schibsted;src:url(fonts/SchibstedGrotesk-500-normal-latin.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Schibsted;src:url(fonts/SchibstedGrotesk-600-normal-latin.woff2) format("woff2");font-weight:600;font-display:swap}
:root{--negro:#0E0F12;--tarjeta:#16181D;--linea:rgba(255,255,255,.09);--texto:#F2F1EE;--suave:rgba(242,241,238,.68);--tenue:rgba(242,241,238,.45);--ambar:#FFB547;--wa:#25D366;
  --wa-fondo:#0B141A;--wa-cab:#1F2C34;--wa-bot:#202C33;--wa-yo:#005C4B;--wa-txt:#E9EDEF;--wa-tenue:#8696A0;--curva:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--negro);color:var(--texto);font:15px/1.5 Schibsted,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
.fondo{position:fixed;inset:0;z-index:-1;background:radial-gradient(60% 50% at 75% 20%,rgba(37,211,102,.12),transparent 70%),radial-gradient(50% 40% at 15% 85%,rgba(255,181,71,.10),transparent 70%)}

.cab{display:flex;align-items:center;justify-content:space-between;padding:18px max(16px,calc((100% - 1240px)/2))}
.vf{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--texto);font-weight:600;letter-spacing:.01em}
.vf__k{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--ambar);color:#1a1206;font-weight:700}
.cab__demo{font-size:12.5px;color:var(--tenue);padding:6px 12px;border:1px solid var(--linea);border-radius:99px}

.escena{display:grid;grid-template-columns:1fr;gap:28px;padding:10px 16px 60px;max-width:1240px;margin:0 auto}
@media (min-width:1080px){.escena{grid-template-columns:minmax(0,1fr) 380px minmax(0,1fr);align-items:start;gap:40px;padding-top:30px}}
.intro h1{font:clamp(32px,5.4vw,50px)/1.05 Fraunces,serif;letter-spacing:-.025em;margin:0 0 14px;animation:entra .8s var(--curva) both}
.intro h1 em{color:var(--wa);font-style:italic}
.intro p{color:var(--suave);margin:0 0 22px;max-width:44ch;animation:entra .8s var(--curva) both .12s}
@keyframes entra{from{opacity:0;transform:translateY(16px)}}
.negocios{display:grid;gap:10px}
.negocios button{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;border:1px solid var(--linea);background:var(--tarjeta);text-align:left;transition:border-color .25s,background .25s,transform .25s;animation:entra .7s var(--curva) both}
.negocios button:nth-child(2){animation-delay:.08s}.negocios button:nth-child(3){animation-delay:.16s}
.negocios button:hover{transform:translateX(4px)}
.negocios button[aria-selected="true"]{border-color:var(--c);background:color-mix(in srgb,var(--c) 14%,var(--tarjeta))}
.neg__av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;font:600 17px/1 Schibsted}
.negocios b{display:block;font-weight:600}
.negocios small{color:var(--tenue);font-size:12.5px}
@media (max-width:1079px){.negocios{grid-template-columns:repeat(3,minmax(0,1fr))}.negocios button{flex-direction:column;text-align:center;gap:6px;padding:12px 8px}.negocios button:hover{transform:none}.negocios small{display:none}}

/* Móvil */
.movil-zona{display:flex;justify-content:center}
.movil{position:relative;width:min(380px,100%);height:min(740px,calc(100svh - 120px));min-height:560px;border-radius:46px;padding:12px;background:#050506;border:1px solid #2a2b2f;box-shadow:0 40px 90px -30px rgba(0,0,0,.8),inset 0 0 0 2px #1b1c20;display:flex;flex-direction:column;overflow:hidden;animation:entra 1s var(--curva) both .15s}
.movil__isla{position:absolute;z-index:3;top:20px;left:50%;transform:translateX(-50%);width:96px;height:26px;border-radius:99px;background:#000}
.chat-cab{display:flex;align-items:center;gap:10px;padding:46px 14px 10px;background:var(--wa-cab);border-radius:34px 34px 0 0;color:var(--wa-txt)}
.chat-cab__av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;font-weight:600}
.chat-cab b{display:block;font-weight:600;font-size:15px}
.chat-cab small{color:var(--wa-tenue);font-size:12px}
.chat-cab__verif{margin-left:auto;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--wa);color:#05210f;font-size:12px;font-weight:700}
.chat{flex:1;overflow-y:auto;padding:10px 10px 6px;background:var(--wa-fondo);background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);background-size:18px 18px;display:flex;flex-direction:column;gap:6px;scroll-behavior:smooth;scrollbar-width:none}
.chat::-webkit-scrollbar{display:none}
.salto{align-self:center;margin:6px 0;padding:4px 10px;border-radius:8px;background:#182229;color:var(--wa-tenue);font-size:11.5px;animation:entra .4s var(--curva)}
.salto--agente{background:#103529;color:#7fe0a8}
.aviso-e2e{align-self:center;max-width:90%;text-align:center;padding:6px 10px;border-radius:8px;background:#182229;color:#d9c48a;font-size:11.5px;margin-bottom:4px}
.msg{position:relative;max-width:82%;padding:6px 9px 18px;border-radius:10px;color:var(--wa-txt);font-size:14px;line-height:1.38;animation:msg .32s var(--curva) both;word-wrap:break-word}
.msg p{margin:0}.msg p+p{margin-top:4px}
.msg--bot{align-self:flex-start;background:var(--wa-bot);border-top-left-radius:3px}
.msg--yo{align-self:flex-end;background:var(--wa-yo);border-top-right-radius:3px}
@keyframes msg{from{opacity:0;transform:translateY(8px) scale(.97)}}
.msg__de{display:block;font-size:12px;font-weight:600;color:#7fe0a8;margin-bottom:2px}
.msg__h{position:absolute;right:8px;bottom:3px;font-size:10.5px;color:var(--wa-tenue);white-space:nowrap}
.ticks{font-style:normal;letter-spacing:-3px;margin-left:3px;color:var(--wa-tenue);transition:color .4s}
.ticks.leido{color:#53BDEB}
.escribiendo{display:flex;gap:4px;padding:12px 14px}
.escribiendo i{width:7px;height:7px;border-radius:50%;background:var(--wa-tenue);animation:bota 1.1s infinite}
.escribiendo i:nth-child(2){animation-delay:.15s}.escribiendo i:nth-child(3){animation-delay:.3s}
@keyframes bota{30%{transform:translateY(-4px);opacity:.6}}
.msg--rica{padding:4px 4px 18px;min-width:230px}
.msg--rica p{padding:4px 5px 0}
.msg__img{width:100%;max-width:250px;border-radius:8px;display:block}
.tarjeta{display:flex;flex-direction:column;gap:5px;padding:10px 10px 4px;border-left:3px solid var(--wa);border-radius:6px;background:rgba(0,0,0,.18)}
.tarjeta b{font-size:14.5px;margin-bottom:2px}
.tarjeta__f{display:flex;justify-content:space-between;gap:14px;font-size:13px}
.tarjeta__f span:first-child{color:var(--wa-tenue)}
.tarjeta__f span:last-child{text-align:right}
.tarjeta small{color:var(--wa-tenue);font-size:11.5px;margin-top:4px}
.enlace{display:flex;gap:10px;align-items:center;padding:8px;border-radius:8px;background:rgba(0,0,0,.2);color:var(--wa-txt);text-decoration:none}
.enlace__img img{width:52px;height:52px;border-radius:6px;object-fit:cover;display:block}
.enlace b{display:block;font-size:13.5px}
.enlace small{color:#53BDEB;font-size:12px}
.mapa{display:flex;flex-direction:column;gap:2px;padding:0 0 4px}
.mapa__dib{position:relative;height:110px;border-radius:8px;margin-bottom:6px;background:linear-gradient(90deg,transparent 47%,#3b4a52 47% 53%,transparent 53%),linear-gradient(0deg,transparent 45%,#3b4a52 45% 51%,transparent 51%),linear-gradient(30deg,transparent 62%,#33424a 62% 66%,transparent 66%),#26343b}
.mapa__dib i{position:absolute;left:50%;top:44%;width:18px;height:18px;border-radius:50% 50% 50% 0;background:#ea4335;transform:translate(-50%,-50%) rotate(-45deg);box-shadow:0 3px 8px rgba(0,0,0,.5);animation:pin 1.6s var(--curva) infinite alternate}
@keyframes pin{to{transform:translate(-50%,-80%) rotate(-45deg)}}
.mapa b,.mapa small{padding:0 6px}
.mapa small{color:var(--wa-tenue);font-size:12px}
.productos{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px}
.producto{display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:8px;background:rgba(0,0,0,.2);font-size:12.5px}
.producto img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;margin-bottom:3px}
.producto__cafe{display:grid;place-items:center;aspect-ratio:1;border-radius:6px;background:linear-gradient(135deg,#6b4423,#3a2412);font-size:34px;margin-bottom:3px}
.producto span{color:var(--wa)}
.pago{display:flex;flex-direction:column;gap:3px;padding:12px;border-radius:8px;background:linear-gradient(135deg,#1d3b31,#123027)}
.pago__k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#7fe0a8}
.pago__i{font:26px/1.1 Fraunces,serif}
.pago small{color:var(--wa-tenue);font-size:11.5px}
.envio{display:flex;flex-direction:column;gap:8px;padding:10px}
.envio__pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.envio__pasos span{position:relative;padding-top:12px;font-size:11.5px;color:var(--wa-tenue);text-align:center}
.envio__pasos span::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;border-radius:3px;background:#33424a}
.envio__pasos span.ok{color:var(--wa-txt)}
.envio__pasos span.ok::before{background:var(--wa);animation:carga 1s var(--curva) both;transform-origin:left}
@keyframes carga{from{transform:scaleX(0)}}
.envio small{color:var(--wa-tenue);font-size:12px}
.opciones{display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px 4px;background:var(--wa-fondo);min-height:12px}
.opciones button{padding:8px 13px;border-radius:99px;background:var(--wa-bot);border:1px solid #2c3a42;color:#53BDEB;font-size:13.5px;font-weight:500;animation:msg .35s var(--curva) both;transition:background .2s}
.opciones button:nth-child(2){animation-delay:.05s}.opciones button:nth-child(3){animation-delay:.1s}.opciones button:nth-child(4){animation-delay:.15s}
.opciones button:hover{background:#2a3942}
.escribir{display:flex;gap:6px;padding:6px 8px 10px;background:var(--wa-fondo);border-radius:0 0 34px 34px}
.escribir input{flex:1;min-width:0;height:42px;padding:0 16px;border-radius:99px;border:0;background:var(--wa-bot);color:var(--wa-txt);font:inherit;font-size:14.5px;outline:0}
.escribir input::placeholder{color:var(--wa-tenue)}
.escribir button{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#00A884;color:#fff;flex:none;transition:transform .2s}
.escribir button:active{transform:scale(.9)}

/* Lo que ve el negocio */
.negocio-ve{padding:20px;border-radius:24px;background:var(--tarjeta);border:1px solid var(--linea);animation:entra .9s var(--curva) both .3s}
.negocio-ve h2{font:26px/1.15 Fraunces,serif;letter-spacing:-.02em;margin:0 0 6px}
.negocio-ve__sub{color:var(--suave);margin:0 0 16px;font-size:14px}
.metricas{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:16px}
.metricas div{padding:10px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--linea)}
.metricas b{display:block;font:22px/1.1 Fraunces,serif;font-weight:400;color:var(--ambar)}
.metricas span{font-size:11.5px;color:var(--tenue)}
.eventos{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px;max-height:340px;overflow-y:auto}
.eventos li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;padding:11px 12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--linea);animation:evento .6s cubic-bezier(.34,1.3,.5,1) both}
.eventos li:first-child:not(.eventos__vacio){border-color:rgba(37,211,102,.45);box-shadow:0 0 0 3px rgba(37,211,102,.08)}
@keyframes evento{from{opacity:0;transform:translateX(24px) scale(.97)}}
.ev__ico{font-size:20px;line-height:1.2}
.eventos b{display:block;font-weight:600;font-size:13.5px}
.eventos small{color:var(--tenue);font-size:12px}
.eventos time{font-size:11.5px;color:var(--tenue)}
.eventos__vacio{display:block!important;color:var(--tenue);font-size:13.5px;text-align:center;padding:22px 12px!important;border-style:dashed!important;animation:none!important}
.cta{display:block;text-align:center;padding:14px 18px;border-radius:14px;background:var(--wa);color:#05210f;font-weight:600;text-decoration:none;transition:transform .2s,filter .2s}
.cta:hover{transform:translateY(-2px);filter:brightness(1.05)}
:focus-visible{outline:2px solid var(--ambar);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.aviso-neg{position:fixed;z-index:20;left:50%;top:14px;transform:translateX(-50%);width:min(calc(100% - 32px),380px);display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;padding:12px 14px;border-radius:16px;background:rgba(22,24,29,.96);border:1px solid rgba(37,211,102,.45);box-shadow:0 14px 34px -10px rgba(0,0,0,.6);text-align:left;animation:avisoEntra .5s cubic-bezier(.34,1.3,.5,1);transition:opacity .4s,transform .4s}
.aviso-neg span:first-child{grid-row:span 2;font-size:22px}
.aviso-neg span:nth-child(2){font-weight:600;font-size:13.5px}
.aviso-neg small{color:var(--wa);font-size:12px}
.aviso-neg.fuera{opacity:0;transform:translate(-50%,-10px)}
@keyframes avisoEntra{from{opacity:0;transform:translate(-50%,-16px)}}

/* 29-10 · Mejoras de experiencia: demostración automática, notas de voz, estado y pista */
.auto{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px;padding:13px 16px;border-radius:14px;background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.4);color:#7fe0a8;font-weight:600;transition:background .2s,transform .2s;animation:entra .7s var(--curva) both .25s}
.auto:hover{background:rgba(37,211,102,.2)}
.auto.on{background:rgba(255,181,71,.12);border-color:rgba(255,181,71,.45);color:var(--ambar)}
.chat-cab small.escribe{color:#7fe0a8}
.chat-cab__mudo{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:15px;margin-left:6px;background:rgba(255,255,255,.06)}
.chat-cab__verif{margin-left:auto}
.micro{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--wa-tenue);background:var(--wa-bot);transition:color .2s,transform .2s}
.micro:hover{color:var(--wa-txt)}
.micro:active{transform:scale(.9);color:var(--wa)}
.msg--voz{min-width:250px}
.voz{display:flex;align-items:center;gap:8px;padding:2px 0}
.voz__play{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.15);font-size:12px;flex:none}
.voz__onda{flex:1;display:flex;align-items:center;gap:2px;height:26px}
.voz__onda i{flex:1;height:var(--h);border-radius:2px;background:rgba(233,237,239,.55);transform-origin:center;animation:onda .9s ease-in-out both;animation-delay:calc(var(--h) * 0.004s)}
@keyframes onda{from{transform:scaleY(.2)}}
.voz__t{font-size:11.5px;color:rgba(233,237,239,.7)}
.voz__tr{margin-top:6px!important;padding-top:6px;border-top:1px solid rgba(255,255,255,.12);font-size:12.5px;color:rgba(233,237,239,.8);font-style:italic}
.opciones button.pista{position:relative;animation:latido 1.4s ease-in-out infinite;border-color:#53BDEB}
.opciones button.pista::after{content:"Toca aquí";position:absolute;left:50%;top:-30px;transform:translateX(-50%);padding:4px 9px;border-radius:8px;background:#53BDEB;color:#04131c;font-size:11.5px;font-weight:600;white-space:nowrap}
@keyframes latido{50%{box-shadow:0 0 0 6px rgba(83,189,235,.18)}}
.opciones button.tocado{background:#2a3942;transform:scale(.95)}