<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vale — Tu empleada con IA</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;1,9..144,500&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
  :root{
    --cream:#FBF4EC; --paper:#FFFDF9; --tinta:#221C18; --coffee:#5b3a2e;
    --barro:#A8331A; --gold:#D99A4E; --gold-deep:#C2832F; --verde:#1E7A4D;
    --muted:#8a7f72; --line:#e7dccb; --cocoa:#3B2F27;
    --body:'Hanken Grotesk',sans-serif; --disp:'Fraunces',serif;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html{scroll-behavior:smooth}
  body{font-family:var(--body);color:var(--tinta);background:var(--cream);line-height:1.55;overflow-x:hidden}
  body:before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E")}
  .wrap{max-width:1140px;margin:0 auto;padding:0 26px;position:relative;z-index:2}
  a{text-decoration:none;color:inherit}
  em{font-style:italic;color:var(--barro)}

  /* ── NAV ── */
  nav{position:sticky;top:0;z-index:50;background:rgba(251,244,236,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .navin{max-width:1140px;margin:0 auto;padding:13px 26px;display:flex;align-items:center;gap:18px}
  .brand{display:flex;align-items:flex-end;gap:0;flex-direction:column}
  .bub{position:relative;background:var(--coffee);border-radius:8px;padding:5px 8px;display:flex;gap:4px;margin-left:4px}
  .bub i{width:5px;height:5px;border-radius:50%;background:var(--cream)}
  .bub:after{content:"";position:absolute;bottom:-4px;right:9px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--coffee)}
  .bword{font-weight:800;font-size:25px;letter-spacing:-.5px;color:var(--gold);line-height:.85}
  .navsp{flex:1}
  .navlinks{display:flex;align-items:center;gap:8px}
  .tog{display:flex;background:#efe6d8;border-radius:99px;padding:3px;font-weight:700;font-size:12px;margin-right:6px}
  .tog button{border:none;background:none;color:var(--muted);padding:5px 11px;border-radius:99px;cursor:pointer;font-family:var(--body);font-weight:700}
  .tog button.on{background:#fff;color:var(--tinta);box-shadow:0 1px 3px rgba(0,0,0,.08)}
  .btn{font-family:var(--body);font-weight:700;font-size:14.5px;border-radius:11px;padding:10px 17px;cursor:pointer;border:none;transition:transform .12s,box-shadow .12s,background .2s;white-space:nowrap}
  .btn:active{transform:scale(.97)}
  .btn-ghost{background:none;color:var(--tinta)}
  .btn-ghost:hover{color:var(--barro)}
  .btn-solid{background:var(--barro);color:#fff;box-shadow:0 6px 16px rgba(168,51,26,.22)}
  .btn-solid:hover{background:#92290f}

  /* ── HERO ── */
  header{position:relative;padding:64px 0 70px;overflow:hidden}
  header:before{content:"";position:absolute;top:-180px;right:-120px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(217,154,78,.28),transparent 62%);z-index:0}
  .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;position:relative;z-index:2}
  .eyebrow{font-weight:700;font-size:13px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold-deep);margin-bottom:18px}
  h1{font-family:var(--disp);font-weight:600;font-size:clamp(40px,5.4vw,66px);line-height:1.02;letter-spacing:-1px;margin-bottom:22px}
  .lead{font-size:18.5px;color:#5a5249;max-width:30em;margin-bottom:30px}
  .c-row{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
  .btn-lg{padding:15px 26px;font-size:16px;border-radius:13px}
  .btn-out{background:none;border:1.5px solid var(--coffee);color:var(--coffee)}
  .btn-out:hover{background:var(--coffee);color:var(--cream)}
  .microcopy{font-size:13px;color:var(--muted);margin-top:14px}

  /* ── INTERACTIVE CHAT ── */
  .chatcard{justify-self:end;width:350px;max-width:100%;
    border-radius:26px;overflow:hidden;
    box-shadow:0 44px 90px -36px rgba(80,40,20,.6),0 0 0 1px rgba(255,255,255,.5);
    animation:floaty 7s ease-in-out infinite}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  .chead{background:var(--cocoa);padding:15px 18px;display:flex;align-items:center;gap:11px}
  .cav{width:40px;height:40px;border-radius:99px;
    background:linear-gradient(160deg,#E7B568,var(--gold));
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;flex:0 0 auto}
  .chead-name{color:var(--gold);font-weight:700;font-size:15.5px;font-family:var(--disp)}
  .chead-status{color:#cdbba4;font-size:11.5px;display:flex;align-items:center;gap:5px;margin-top:2px}
  .gd{width:7px;height:7px;border-radius:99px;background:#4ad07f;flex:0 0 auto}

  /* scene: background transitions between chat and booking states */
  .scene{position:relative;height:420px;background:#FBF5EC;transition:background .55s ease}
  .scene.booking-state{background:#fff}

  .cbody{position:absolute;inset:0;overflow-y:auto;padding:16px;
    display:flex;flex-direction:column;gap:9px;
    transition:opacity .15s ease}
  .cbody::-webkit-scrollbar{width:0}

  .msg{max-width:84%;padding:11px 15px;font-size:14px;line-height:1.5;animation:mpop .35s cubic-bezier(.2,.8,.2,1) both}
  .msg.vale{background:var(--cocoa);color:#f3e7d8;align-self:flex-start;border-radius:18px 18px 18px 4px}
  .msg.user{background:#fff;color:var(--tinta);align-self:flex-end;
    border-radius:18px 18px 4px 18px;
    box-shadow:0 3px 12px -6px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.04)}
  @keyframes mpop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

  .msg.typing{display:flex;gap:5px;align-items:center;padding:13px 15px}
  .msg.typing span{width:7px;height:7px;border-radius:99px;background:#b9a892;animation:tblink 1.2s infinite}
  .msg.typing span:nth-child(2){animation-delay:.2s}.msg.typing span:nth-child(3){animation-delay:.4s}
  @keyframes tblink{0%,60%,100%{opacity:.3}30%{opacity:1}}

  .greenpill{align-self:flex-start;background:#e4f0e8;color:var(--verde);font-size:12px;font-weight:700;
    padding:6px 12px;border-radius:99px;display:inline-flex;align-items:center;gap:6px;animation:mpop .3s ease both}

  #chips{display:flex;flex-wrap:wrap;gap:7px;align-self:flex-end;justify-content:flex-end;margin-top:3px}
  .chip-btn{background:#fff;border:1.5px solid var(--line);color:var(--cocoa);border-radius:99px;
    padding:8px 15px;font-family:var(--body);font-size:13px;font-weight:700;cursor:pointer;
    transition:.15s;animation:mpop .32s ease both;
    box-shadow:0 2px 8px -4px rgba(0,0,0,.12)}
  .chip-btn:hover{border-color:var(--barro);color:var(--barro);transform:translateY(-2px);box-shadow:0 6px 14px -6px rgba(168,51,26,.3)}
  .chip-btn:active{transform:scale(.96)}

  .cinput{display:flex;gap:8px;align-items:center;padding:10px 12px;background:#fff;border-top:1px solid #f0e6d6}
  .cinput input{flex:1;background:#FBF5EC;border:none;border-radius:99px;padding:11px 14px;font-family:var(--body);font-size:14px;outline:none;color:var(--tinta)}
  .cinput .send{width:40px;height:40px;border-radius:99px;background:var(--barro);border:none;
    display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;
    box-shadow:0 6px 16px -8px rgba(168,51,26,.6);transition:.15s}
  .cinput .send:hover{background:#92290f}

  /* Dissolve: stagger each message out */
  .cbody.dissolve .msg{animation:diss .55s ease forwards}
  .cbody.dissolve .msg:nth-child(1){animation-delay:0s}
  .cbody.dissolve .msg:nth-child(2){animation-delay:.06s}
  .cbody.dissolve .msg:nth-child(3){animation-delay:.12s}
  .cbody.dissolve .msg:nth-child(4){animation-delay:.18s}
  .cbody.dissolve .msg:nth-child(5){animation-delay:.24s}
  .cbody.dissolve .msg:nth-child(n+6){animation-delay:.30s}
  .cbody.dissolve #chips,.cbody.dissolve .greenpill{animation:diss .4s ease forwards}
  @keyframes diss{to{opacity:0;filter:blur(6px);transform:translateY(-14px) scale(.92)}}

  /* Swirl confetti */
  #swirl{position:absolute;inset:0;pointer-events:none;z-index:5}
  #swirl i{position:absolute;left:50%;top:50%;border-radius:99px;opacity:0;
    transform:translate(-50%,-50%) rotate(var(--a)) translateX(0) scale(.3);
    animation:swirli 1.1s cubic-bezier(.22,.7,.28,1) forwards}
  @keyframes swirli{15%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(calc(var(--a) + 220deg)) translateX(var(--dist)) scale(1)}}

  /* Confirm card — appears when chat dissolves */
  .confirm{
    position:absolute;inset:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:16px;z-index:10;
    opacity:0;pointer-events:none;
  }
  /* Entering */
  .confirm.show{
    animation:cfin .65s cubic-bezier(.16,1.1,.4,1) forwards;
    pointer-events:auto;
  }
  @keyframes cfin{
    from{opacity:0;transform:translateY(28px) scale(.95)}
    to  {opacity:1;transform:none}
  }
  /* Exiting */
  .confirm.hide{
    animation:cfout .45s cubic-bezier(.4,0,.6,1) forwards;
    pointer-events:none;
  }
  @keyframes cfout{
    from{opacity:1;transform:none}
    to  {opacity:0;transform:translateY(20px) scale(.96)}
  }

  /* Ring pulse */
  .ring{position:absolute;left:50%;top:46%;width:50px;height:50px;border-radius:99px;
    border:2px solid rgba(217,154,78,.4);transform:translate(-50%,-50%) scale(0)}
  .confirm.show .ring{animation:ringout 1.1s ease-out .08s forwards}
  @keyframes ringout{0%{opacity:.8;transform:translate(-50%,-50%) scale(.15)}100%{opacity:0;transform:translate(-50%,-50%) scale(9)}}

  /* Booking card */
  .cf-card{
    background:#fff;border-radius:24px;padding:22px 20px;
    width:100%;max-width:300px;text-align:center;
    box-shadow:0 32px 60px -28px rgba(80,40,20,.55),0 0 0 1px rgba(0,0,0,.04);
    position:relative;z-index:2;
  }
  .cf-check{width:50px;height:50px;border-radius:99px;background:#e4f0e8;
    display:flex;align-items:center;justify-content:center;margin:0 auto 13px}
  .cf-card h3{font-family:var(--disp);font-weight:600;font-size:21px;letter-spacing:-.3px}
  .cf-card .cfs{color:var(--muted);font-size:13px;margin-top:3px}
  .cf-box{background:#FBF5EC;border-radius:14px;padding:3px 14px;margin:15px 0 12px;text-align:left}
  .cf-row{display:flex;justify-content:space-between;align-items:center;
    padding:10px 0;border-top:1px solid #f0e6d6;font-size:13.5px}
  .cf-row:first-child{border-top:none}
  .cf-row .k{color:var(--muted)}.cf-row .v{font-weight:700}
  .cf-code{font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:3px;
    background:var(--cocoa);color:#fff;border-radius:11px;padding:8px;margin-bottom:0}
  .cf-foot{font-size:11.5px;color:var(--muted);margin-top:12px;
    display:flex;align-items:center;justify-content:center;gap:5px}
  .cf-foot .vm{font-family:var(--disp);font-weight:600;color:var(--gold)}
  .replay{margin-top:11px;background:none;border:none;color:var(--muted);
    font-family:var(--body);font-size:12.5px;font-weight:700;cursor:pointer;
    text-decoration:underline;text-underline-offset:3px;transition:.15s}
  .replay:hover{color:var(--tinta)}

  /* ── SECTIONS ── */
  section{padding:72px 0;position:relative}
  .sec-tag{font-weight:700;font-size:12.5px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-deep);margin-bottom:13px}
  h2{font-family:var(--disp);font-weight:600;font-size:clamp(28px,3.6vw,42px);line-height:1.08;letter-spacing:-.5px;margin-bottom:14px}
  .sec-lead{font-size:17px;color:#5a5249;max-width:34em}
  .band{background:var(--tinta);color:var(--cream)}
  .band .big{font-family:var(--disp);font-weight:500;font-size:clamp(24px,3.3vw,38px);line-height:1.18;max-width:18em}
  .band .big em{color:var(--gold);font-style:italic}

  .grid4{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:42px}
  .card{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:28px;transition:transform .2s,box-shadow .2s,border-color .2s}
  .card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(45,30,20,.1);border-color:#dcae72}
  .ic{width:46px;height:46px;border-radius:13px;background:linear-gradient(160deg,#f6e2c4,#ecc485);display:grid;place-items:center;margin-bottom:16px;font-size:22px}
  .card h3{font-family:var(--disp);font-weight:600;font-size:21px;margin-bottom:7px}
  .card p{font-size:15px;color:#5f574d}

  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:46px}
  .step .n{font-family:var(--disp);font-weight:600;font-size:54px;color:var(--gold);line-height:1;opacity:.55}
  .step h3{font-family:var(--disp);font-weight:600;font-size:22px;margin:8px 0 6px}
  .step p{font-size:15px;color:#5f574d}

  .chans{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:42px}
  .chan{border:1px solid var(--line);border-radius:20px;padding:30px;background:var(--paper)}
  .chan .lab{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:15px;margin-bottom:10px}
  .dot{width:10px;height:10px;border-radius:50%}
  .chan p{color:#5f574d;font-size:15.5px}

  .chips{display:flex;flex-wrap:wrap;gap:11px;margin-top:34px}
  .chip{background:var(--paper);border:1px solid var(--line);border-radius:99px;padding:10px 18px;font-weight:600;font-size:15px}

  .prices{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px;max-width:980px}
  .price{border:1px solid var(--line);border-radius:22px;padding:32px;background:var(--paper);position:relative}
  .price.hot{border:2px solid var(--barro);box-shadow:0 18px 44px rgba(168,51,26,.12)}
  .ribbon{position:absolute;top:-13px;left:32px;background:var(--barro);color:#fff;font-size:12px;font-weight:700;padding:5px 13px;border-radius:99px}
  .price .tier{font-weight:800;font-size:16px;letter-spacing:.5px;text-transform:uppercase;color:var(--gold-deep)}
  .price .amt{font-family:var(--disp);font-weight:600;font-size:46px;margin:6px 0 2px}
  .price .amt span{font-family:var(--body);font-size:16px;font-weight:600;color:var(--muted)}
  .price ul{list-style:none;margin:18px 0 24px;display:flex;flex-direction:column;gap:9px}
  .price li{font-size:15px;color:#4f483f;padding-left:24px;position:relative}
  .price li:before{content:"✓";position:absolute;left:0;color:var(--verde);font-weight:800}
  .price .btn{width:100%;text-align:center}
  .pricenote{margin-top:18px;font-size:14px;color:var(--muted)}

  .final{background:linear-gradient(150deg,var(--barro),#7c2410);color:#fff;text-align:center;border-radius:30px;padding:64px 30px;position:relative;overflow:hidden}
  .final:after{content:"";position:absolute;bottom:-120px;left:-60px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(217,154,78,.4),transparent 60%)}
  .final h2{color:#fff;position:relative}
  .final p{position:relative;color:#f6ddd0;font-size:17px;margin:6px auto 26px;max-width:30em}
  .final .btn-solid{background:#fff;color:var(--barro);position:relative}
  .final .btn-solid:hover{background:var(--cream)}

  footer{padding:42px 0 60px;border-top:1px solid var(--line);margin-top:24px}
  .foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;color:var(--muted);font-size:14px}
  .foot a:hover{color:var(--barro)}

  .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
  .rv.in{opacity:1;transform:none}

  @media(max-width:860px){
    .hero{grid-template-columns:1fr;gap:36px}.chatcard{justify-self:center}
    .grid4,.steps,.chans,.prices{grid-template-columns:1fr}
    .navlinks .hide{display:none}
    .prices{overflow-x:hidden;width:100%}
    .price{padding:22px;min-width:0;box-sizing:border-box}
    .price .amt{font-size:38px}
  }
</style>
</head>
<body>

<nav>
  <div class="navin">
    <a href="/" class="brand">
      <div class="bub"><i></i><i></i><i></i></div>
      <div class="bword">vale</div>
    </a>
    <div class="navsp"></div>
    <div class="navlinks">
      <div class="tog"><button id="es" class="on">ES</button><button id="en">EN</button></div>
      <a href="/login" class="btn btn-ghost" data-i18n="nav_login">Entrar</a>
      <a href="/empezar" class="btn btn-solid" data-i18n="nav_signup" data-signup>Crear cuenta</a>
    </div>
  </div>
</nav>

<header>
  <div class="wrap hero">
    <div>
      <div class="eyebrow" data-i18n="eyebrow">Democratizamos la transformación digital</div>
      <h1 data-i18n="h1">La empleada con IA que <em>no deja escapar</em> ni un cliente.</h1>
      <p class="lead" data-i18n="lead">Ponemos la inteligencia artificial al alcance de los pequeños negocios. Vale contesta a tus clientes 24/7, agenda, toma pedidos y los trae de vuelta — por WhatsApp y tu web. Sin formularios, sin contratos.</p>
      <div class="c-row">
        <a href="/empezar" class="btn btn-solid btn-lg" data-i18n="cta_main" data-signup>Crear cuenta gratis</a>
        <a href="#como" class="btn btn-out btn-lg" data-i18n="cta_sec">Ver cómo funciona</a>
      </div>
      <div class="microcopy" data-i18n="micro">Probá gratis · Sin tarjeta para empezar · El chat web funciona desde el minuto cero</div>
    </div>

    <!-- INTERACTIVE DEMO -->
    <div class="chatcard">
      <div class="chead">
        <div class="cav"><img src="/img/icon.png" alt="Vale" style="width:80%;height:80%;object-fit:contain;"></div>
        <div>
          <div class="chead-name">Vale</div>
          <div class="chead-status"><span class="gd"></span> <span id="onlinetxt">en línea</span></div>
        </div>
      </div>
      <div class="scene">
        <div class="cbody" id="cbody"></div>
        <div id="swirl"></div>
        <div class="confirm" id="confirm">
          <div class="ring"></div>
          <div class="cf-card">
            <div class="cf-check">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#1E7A4D" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg>
            </div>
            <h3 id="cfTitle">Reserva confirmada</h3>
            <div class="cfs" id="cfSub">Te esperamos, sin que llamaras.</div>
            <div class="cf-box">
              <div class="cf-row"><span class="k" id="cfK1">Servicio</span><span class="v" id="cfV1">Corte + barba</span></div>
              <div class="cf-row"><span class="k" id="cfK2">Con</span><span class="v" id="cfV2">Diego</span></div>
              <div class="cf-row"><span class="k" id="cfK3">Cuándo</span><span class="v" id="cfTime">Mañana · 16:00</span></div>
            </div>
            <div class="cf-code">4PHFY9J4</div>
            <div class="cf-foot">Agendado por <span class="vm">Vale</span></div>
          </div>
          <button class="replay" onclick="resetChat()" id="replayBtn">Probar de nuevo</button>
        </div>
      </div>
      <div class="cinput">
        <input id="ci" placeholder="Escribile a Vale como un cliente…" data-i18n-ph="chat_ph">
        <button class="send" id="send">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4z"/></svg>
        </button>
      </div>
    </div>
  </div>
</header>

<section class="band">
  <div class="wrap rv">
    <p class="big" data-i18n="band">Los pequeños negocios también merecen tecnología de primer nivel — <em>a precio accesible</em>. Eso es lo que hace Vale.</p>
  </div>
</section>

<section>
  <div class="wrap">
    <div class="rv">
      <div class="sec-tag" data-i18n="f_tag">Qué hace</div>
      <h2 data-i18n="f_h2">Una empleada, no un chatbot</h2>
      <p class="sec-lead" data-i18n="f_lead">Vale no solo responde: ejecuta. Atiende, agenda, recupera y te hace crecer — sola.</p>
    </div>
    <div class="grid4">
      <div class="card rv"><div class="ic">💬</div><h3 data-i18n="f1t">Contesta sola, 24/7</h3><p data-i18n="f1p">En español e inglés, al instante, aunque estés cerrado o con las manos ocupadas.</p></div>
      <div class="card rv"><div class="ic">📅</div><h3 data-i18n="f2t">Se adapta a tu rubro</h3><p data-i18n="f2p">Agenda citas, toma reservas, pedidos o leads — según lo que necesita tu negocio.</p></div>
      <div class="card rv"><div class="ic">💸</div><h3 data-i18n="f3t">Recupera la plata que se escapa</h3><p data-i18n="f3p">Persigue a los que no volvieron y a los leads fríos, y los trae de vuelta.</p></div>
      <div class="card rv"><div class="ic">📍</div><h3 data-i18n="f4t">Optimiza tu presencia digital</h3><p data-i18n="f4p">Vale mejora tu perfil online y visibilidad en Google para que más clientes te encuentren.</p></div>
    </div>
  </div>
</section>

<section id="como" style="background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)">
  <div class="wrap">
    <div class="rv">
      <div class="sec-tag" data-i18n="h_tag">Cómo funciona</div>
      <h2 data-i18n="h_h2">Lista en una charla</h2>
      <p class="sec-lead" data-i18n="h_lead">Nada de formularios ni configuraciones. Le hablás a Vale y se arma sola.</p>
    </div>
    <div class="steps">
      <div class="step rv"><div class="n">1</div><h3 data-i18n="s1t">Elegís tu idioma</h3><p data-i18n="s1p">Entrás y Vale te recibe en español o inglés.</p></div>
      <div class="step rv"><div class="n">2</div><h3 data-i18n="s2t">Le hablás a Vale</h3><p data-i18n="s2p">Le contás de tu negocio y se configura sola mientras charlan.</p></div>
      <div class="step rv"><div class="n">3</div><h3 data-i18n="s3t">Vale atiende</h3><p data-i18n="s3p">Por WhatsApp y por tu web, desde el primer día.</p></div>
    </div>
  </div>
</section>

<section>
  <div class="wrap">
    <div class="rv">
      <div class="sec-tag" data-i18n="c_tag">Canales</div>
      <h2 data-i18n="c_h2">Donde ya están tus clientes</h2>
    </div>
    <div class="chans">
      <div class="chan rv"><div class="lab"><span class="dot" style="background:var(--verde)"></span>WhatsApp</div><p data-i18n="c1">Tus clientes te escriben por WhatsApp con tu marca. Vale contesta, agenda y captura — nativo, sin sacarlos de la app.</p></div>
      <div class="chan rv"><div class="lab"><span class="dot" style="background:var(--gold)"></span><span data-i18n="c2lab">Chat en tu web</span></div><p data-i18n="c2">Un chat en tu página que atiende y captura cada visita. Funciona desde el minuto cero, sin configurar nada.</p></div>
    </div>
  </div>
</section>

<section class="band">
  <div class="wrap">
    <div class="rv">
      <div class="sec-tag" style="color:var(--gold)" data-i18n="r_tag">Para todos</div>
      <h2 style="color:#fff" data-i18n="r_h2">Para cualquier negocio</h2>
    </div>
    <div class="chips">
      <span class="chip" style="background:#2e251f;border-color:#43372d;color:#f0e7da" data-i18n="rb1">Barberías</span>
      <span class="chip" style="background:#2e251f;border-color:#43372d;color:#f0e7da" data-i18n="rb2">Salones</span>
      <span class="chip" style="background:#2e251f;border-color:#43372d;color:#f0e7da" data-i18n="rb3">Restaurantes</span>
      <span class="chip" style="background:#2e251f;border-color:#43372d;color:#f0e7da" data-i18n="rb4">Tiendas</span>
      <span class="chip" style="background:#2e251f;border-color:#43372d;color:#f0e7da" data-i18n="rb5">Clínicas</span>
      <span class="chip" style="background:#2e251f;border-color:#43372d;color:#f0e7da" data-i18n="rb6">Talleres</span>
      <span class="chip" style="background:#2e251f;border-color:#43372d;color:#f0e7da" data-i18n="rb7">Servicios a domicilio</span>
      <span class="chip" style="background:#2e251f;border-color:#43372d;color:#f0e7da" data-i18n="rb8">y más</span>
    </div>
  </div>
</section>

<section>
  <div class="wrap">
    <div class="rv">
      <div class="sec-tag" data-i18n="p_tag">Precios</div>
      <h2 data-i18n="p_h2">De empleada a socia estratégica</h2>
      <p class="sec-lead" data-i18n="p_lead">Empezá gratis. Vale crece con tu negocio.</p>
    </div>
    <div class="prices">
      <div class="price hot rv">
        <div class="ribbon" data-i18n="p_hot">Gratis siempre</div>
        <div class="tier" data-i18n="t1_tier">Gratis</div>
        <p style="font-size:13px;color:var(--muted);margin:2px 0 10px;font-style:italic" data-i18n="t1_role">Tu asistente con IA</p>
        <div class="amt">$0<span data-i18n="per_mo">/mes</span></div>
        <ul>
          <li data-i18n="t1_f1">Vale atiende tu web 24/7</li>
          <li data-i18n="t1_f2">Agenda + Google Calendar integrado</li>
          <li data-i18n="t1_f3">Perfil de cada cliente con historial</li>
          <li data-i18n="t1_f4">Página pública de tu negocio</li>
        </ul>
        <a href="/empezar" class="btn btn-solid" data-i18n="t1_cta" data-signup>Crear cuenta gratis</a>
      </div>
      <div class="price rv">
        <div class="tier" data-i18n="t2_tier">Growth</div>
        <p style="font-size:13px;color:var(--muted);margin:2px 0 10px;font-style:italic" data-i18n="t2_role">Para salones, clínicas y más</p>
        <div class="amt">$29<span data-i18n="per_mo">/mes</span></div>
        <ul>
          <li data-i18n="t2_f1">Todo lo del plan Gratis</li>
          <li data-i18n="t2_f2">Perfil avanzado: preferencias, cumpleaños, notas</li>
          <li data-i18n="t2_f3">Recordatorios automáticos de citas</li>
          <li data-i18n="t2_f4">WhatsApp · Hasta 5 colaboradores</li>
        </ul>
        <a href="/empezar?plan=growth" class="btn btn-out" data-i18n="t2_cta" data-signup data-plan="growth">Empezar con Growth</a>
      </div>
      <div class="price rv">
        <div class="tier" data-i18n="t3_tier">Pro</div>
        <p style="font-size:13px;color:var(--muted);margin:2px 0 10px;font-style:italic" data-i18n="t3_role">Tu socia estratégica</p>
        <div class="amt">$69<span data-i18n="per_mo">/mes</span></div>
        <ul>
          <li data-i18n="t3_f1">Todo lo del plan Growth</li>
          <li data-i18n="t3_f2">WhatsApp propio + reactivación de clientes inactivos</li>
          <li data-i18n="t3_f3">Análisis: qué servicios y días venden más</li>
          <li data-i18n="t3_f4">Multi-sucursal · Hasta 15 colaboradores</li>
        </ul>
        <a href="/empezar?plan=pro" class="btn btn-out" data-i18n="t3_cta" data-signup data-plan="pro">Empezar con Pro</a>
      </div>
    </div>
    <p class="pricenote" data-i18n="p_note">Sin tarjeta · El plan Gratis no vence · Cancelás cuando querés</p>
  </div>
</section>

<section style="background:var(--cocoa);color:var(--cream);padding:80px 0">
  <div class="wrap" style="text-align:center">
    <div class="rv">
      <div class="sec-tag" style="color:var(--gold);margin-bottom:18px" data-i18n="mis_tag">Por qué existe Vale</div>
      <h2 style="color:#fff;font-size:clamp(30px,4.2vw,52px);max-width:16em;margin:0 auto 18px;line-height:1.06" data-i18n="mis_h2">Para que tú te dediques<br>a lo tuyo.</h2>
      <p style="font-size:18px;color:#c8b9a8;max-width:32em;margin:0 auto" data-i18n="mis_p">Creamos Vale — la plataforma de IA que atiende, agenda y hace crecer tu negocio. Vos te enfocás en lo que mejor sabés hacer. Vale se encarga del resto.</p>
    </div>
  </div>
</section>

<section>
  <div class="wrap rv">
    <div class="final">
      <h2 data-i18n="cta_h2">Tu próxima empleada ya está lista.</h2>
      <p data-i18n="cta_p">Creá tu cuenta y dejá que Vale se configure sola, charlando con vos.</p>
      <a href="/empezar" class="btn btn-solid btn-lg" data-i18n="cta_b" data-signup>Crear cuenta gratis</a>
    </div>
  </div>
</section>

<footer>
  <div class="wrap foot">
    <div><strong>Vale</strong> · <span data-i18n="foot_by">una creación de Supraide</span></div>
    <div style="display:flex;gap:16px;flex-wrap:wrap;">
      <a href="/privacy" data-i18n="foot_privacy">Privacidad</a>
      <a href="/terms" data-i18n="foot_terms">Términos</a>
      <a href="/login" data-i18n="foot_login">Entrar</a>
    </div>
    <div>© 2026 Supraide</div>
  </div>
</footer>

<script>
(function(){
  /* ── i18n ── */
  var DICT={
    es:{
      nav_login:'Entrar',nav_signup:'Crear cuenta',
      eyebrow:'Democratizamos la transformación digital',
      h1:'La empleada con IA que <em>no deja escapar</em> ni un cliente.',
      lead:'Ponemos la inteligencia artificial al alcance de los pequeños negocios. Vale contesta a tus clientes 24/7, agenda, toma pedidos y los trae de vuelta — por WhatsApp y tu web. Sin formularios, sin contratos.',
      cta_main:'Crear cuenta gratis',cta_sec:'Ver cómo funciona',
      micro:'Probá gratis · Sin tarjeta para empezar · El chat web funciona desde el minuto cero',
      band:'Los pequeños negocios también merecen tecnología de primer nivel — <em>a precio accesible</em>. Eso es lo que hace Vale.',
      f_tag:'Qué hace',f_h2:'Una empleada, no un chatbot',f_lead:'Vale no solo responde: ejecuta. Atiende, agenda, recupera y te hace crecer — sola.',
      f1t:'Contesta sola, 24/7',f1p:'En español e inglés, al instante, aunque estés cerrado o con las manos ocupadas.',
      f2t:'Se adapta a tu rubro',f2p:'Agenda citas, toma reservas, pedidos o leads — según lo que necesita tu negocio.',
      f3t:'Recupera la plata que se escapa',f3p:'Persigue a los que no volvieron y a los leads fríos, y los trae de vuelta.',
      f4t:'Optimiza tu presencia digital',f4p:'Vale mejora tu perfil online y visibilidad en Google para que más clientes te encuentren.',
      h_tag:'Cómo funciona',h_h2:'Lista en una charla',h_lead:'Nada de formularios ni configuraciones. Le hablás a Vale y se arma sola.',
      s1t:'Elegís tu idioma',s1p:'Entrás y Vale te recibe en español o inglés.',
      s2t:'Le hablás a Vale',s2p:'Le contás de tu negocio y se configura sola mientras charlan.',
      s3t:'Vale atiende',s3p:'Por WhatsApp y por tu web, desde el primer día.',
      c_tag:'Canales',c_h2:'Donde ya están tus clientes',
      c1:'Tus clientes te escriben por WhatsApp con tu marca. Vale contesta, agenda y captura — nativo, sin sacarlos de la app.',
      c2lab:'Chat en tu web',c2:'Un chat en tu página que atiende y captura cada visita. Funciona desde el minuto cero, sin configurar nada.',
      r_tag:'Para todos',r_h2:'Para cualquier negocio',
      rb1:'Barberías',rb2:'Salones',rb3:'Restaurantes',rb4:'Tiendas',rb5:'Clínicas',rb6:'Talleres',rb7:'Servicios a domicilio',rb8:'y más',
      p_tag:'Precios',p_h2:'De empleada a socia estratégica',p_lead:'Empezá gratis. Vale crece con tu negocio.',
      per_mo:'/mes',
      p_hot:'Gratis siempre',
      t1_tier:'Gratis',t1_role:'Tu asistente con IA',t1_f1:'Vale atiende tu web 24/7',t1_f2:'Agenda + Google Calendar integrado',t1_f3:'Perfil de cada cliente con historial',t1_f4:'Página pública de tu negocio',t1_cta:'Crear cuenta gratis',
      t2_tier:'Growth',t2_role:'Para salones, clínicas y más',t2_f1:'Todo lo del plan Gratis',t2_f2:'Perfil avanzado: preferencias, cumpleaños, notas',t2_f3:'Recordatorios automáticos de citas',t2_f4:'WhatsApp · Hasta 5 colaboradores',t2_cta:'Empezar con Growth',
      t3_tier:'Pro',t3_role:'Tu socia estratégica',t3_f1:'Todo lo del plan Growth',t3_f2:'WhatsApp propio + reactivación de clientes inactivos',t3_f3:'Análisis: qué servicios y días venden más',t3_f4:'Multi-sucursal · Hasta 15 colaboradores',t3_cta:'Empezar con Pro',
      p_note:'Sin tarjeta · El plan Gratis no vence · Cancelás cuando querés',
      mis_tag:'Por qué existe Vale',mis_h2:'Para que tú te dediques a lo tuyo.',mis_p:'Creamos Vale — la plataforma de IA que atiende, agenda y hace crecer tu negocio. Vos te enfocás en lo que mejor sabés hacer. Vale se encarga del resto.',
      cta_h2:'Tu próxima aliada ya está lista.',cta_p:'Empezá gratis hoy. Vale se configura sola charlando con vos — y crece a medida que tu negocio crece.',cta_b:'Crear cuenta gratis',
      foot_by:'una creación de Supraide',foot_login:'Entrar',foot_privacy:'Privacidad',foot_terms:'Términos',
      online:'en línea',chat_ph:'Escribile a Vale como un cliente…',
      c_intro:"¡Hola! 👋 Soy Vale, la asistente de la barbería. ¿Para qué día querés sacar un turno?",
      c_day1:"Mañana",c_day2:"Esta semana",
      c_r1:"¡Perfecto! Para mañana tengo disponibles 10:30 y 16:00. ¿Cuál te queda mejor?",
      c_t1:"10:30",c_t2:"16:00",
      c_r2:"¡Buenísimo! ¿A nombre de quién hago la reserva?",
      c_r3:"¡Listo, {{N}}! 🎉 Quedaste agendado para {{D}} a las {{T}}. Te esperamos.",
      c_pill:"Cita confirmada por Vale",
      c_cfTitle:"Reserva confirmada",c_cfSub:"Todo listo. Sin llamadas, sin esperas.",
      c_cfK1:"Servicio",c_cfV1:"Corte + barba",c_cfK2:"Nombre",c_cfV2:"",c_cfK3:"Cuándo",
      c_replay:"Probar de nuevo"
    },
    en:{
      nav_login:'Log in',nav_signup:'Sign up',
      eyebrow:'Democratizing digital transformation',
      h1:'The AI employee that <em>never lets</em> a customer slip away.',
      lead:'We bring artificial intelligence to every small business. Vale answers your customers 24/7, books, takes orders and brings them back — on WhatsApp and your site. No forms, no contracts.',
      cta_main:'Create free account',cta_sec:'See how it works',
      micro:'Try free · No card to start · The web chat works from minute zero',
      band:'Small businesses deserve world-class technology too — <em>at an accessible price</em>. That\'s what Vale is for.',
      f_tag:'What it does',f_h2:'An employee, not a chatbot',f_lead:'Vale doesn\'t just reply: it acts. Answers, books, recovers and grows your business — on its own.',
      f1t:'Answers on its own, 24/7',f1p:'In Spanish and English, instantly, even when you\'re closed or hands-full.',
      f2t:'Adapts to your business',f2p:'Books appointments, takes reservations, orders or leads — to fit what you do.',
      f3t:'Recovers money you\'re losing',f3p:'Chases the ones who didn\'t come back and cold leads, and brings them in.',
      f4t:'Optimizes your digital presence',f4p:'Vale improves your online profile and Google visibility so more customers find you.',
      h_tag:'How it works',h_h2:'Ready in one conversation',h_lead:'No forms, no setup. You talk to Vale and it builds itself.',
      s1t:'Pick your language',s1p:'You enter and Vale greets you in Spanish or English.',
      s2t:'You talk to Vale',s2p:'Tell it about your business and it configures itself as you chat.',
      s3t:'Vale takes over',s3p:'On WhatsApp and your site, from day one.',
      c_tag:'Channels',c_h2:'Where your customers already are',
      c1:'Your customers message you on WhatsApp with your brand. Vale answers, books and captures — native, without leaving the app.',
      c2lab:'Chat on your site',c2:'A chat on your page that answers and captures every visit. Works from minute zero, nothing to set up.',
      r_tag:'For everyone',r_h2:'For any business',
      rb1:'Barbershops',rb2:'Salons',rb3:'Restaurants',rb4:'Shops',rb5:'Clinics',rb6:'Garages',rb7:'Home services',rb8:'and more',
      p_tag:'Pricing',p_h2:'From employee to strategic partner',p_lead:'Start free. Vale grows with your business.',
      per_mo:'/mo',
      p_hot:'Always free',
      t1_tier:'Free',t1_role:'Your AI assistant',t1_f1:'Vale answers your site 24/7',t1_f2:'Booking + Google Calendar built-in',t1_f3:'Client profile with appointment history',t1_f4:'Public business page',t1_cta:'Create free account',
      t2_tier:'Growth',t2_role:'For salons, clinics & more',t2_f1:'Everything in Free',t2_f2:'Advanced profiles: preferences, birthdays, notes',t2_f3:'Automatic appointment reminders',t2_f4:'WhatsApp · Up to 5 team members',t2_cta:'Start with Growth',
      t3_tier:'Pro',t3_role:'Your strategic partner',t3_f1:'Everything in Growth',t3_f2:'Your own WhatsApp + win-back inactive clients',t3_f3:'Analytics: which services & days sell most',t3_f4:'Multi-location · Up to 15 team members',t3_cta:'Start with Pro',
      p_note:'No card · Free plan never expires · Cancel anytime',
      mis_tag:'Why Vale exists',mis_h2:'So you can focus on what you do best.',mis_p:'We built Vale — the AI platform that handles customer care, bookings and follow-ups for your business. You focus on what you do best. Vale handles the rest.',
      cta_h2:'Your next ally is ready.',cta_p:'Start free today. Vale sets itself up just by chatting with you — and grows as your business grows.',cta_b:'Create free account',
      foot_by:'made by Supraide',foot_login:'Log in',foot_privacy:'Privacy',foot_terms:'Terms',
      online:'online',chat_ph:'Write to Vale as a customer…',
      c_intro:"Hi! 👋 I'm Vale, the barbershop assistant. What day would you like to book?",
      c_day1:"Tomorrow",c_day2:"This week",
      c_r1:"Perfect! Tomorrow I have 10:30 and 4:00 PM available. Which works better?",
      c_t1:"10:30",c_t2:"4:00 PM",
      c_r2:"Great! What name should I put the booking under?",
      c_r3:"All set, {{N}}! 🎉 You're booked for {{D}} at {{T}}. We'll see you then.",
      c_pill:"Appointment confirmed by Vale",
      c_cfTitle:"Booking confirmed",c_cfSub:"All done. No calls, no waiting.",
      c_cfK1:"Service",c_cfV1:"Cut + beard",c_cfK2:"Name",c_cfV2:"",c_cfK3:"When",
      c_replay:"Try again"
    }
  };

  var curLang = 'es';

  function apply(lang){
    curLang = lang;
    document.documentElement.lang = lang;
    var d = DICT[lang];
    document.querySelectorAll('[data-i18n]').forEach(function(el){
      var k=el.getAttribute('data-i18n'); if(d[k]!=null) el.innerHTML=d[k];
    });
    document.querySelectorAll('[data-i18n-ph]').forEach(function(el){
      var k=el.getAttribute('data-i18n-ph'); if(d[k]!=null) el.placeholder=d[k];
    });
    document.getElementById('onlinetxt').textContent = d.online;
    // CTAs
    var lp = lang === 'en' ? '?lang=en' : '';
    document.querySelectorAll('[data-signup]').forEach(function(a){
      var plan = a.getAttribute('data-plan') || '';
      var sep  = lp ? '&' : '?';
      a.href = '/empezar' + lp + (plan ? sep + 'plan=' + plan : '');
    });
    // Reset chat in new language
    resetChat();
  }

  document.getElementById('es').addEventListener('click',function(){
    apply('es');this.classList.add('on');document.getElementById('en').classList.remove('on');
  });
  document.getElementById('en').addEventListener('click',function(){
    apply('en');this.classList.add('on');document.getElementById('es').classList.remove('on');
  });

  /* ── Scroll reveal ── */
  var io = new IntersectionObserver(function(es){
    es.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); }});
  },{threshold:.12});
  document.querySelectorAll('.rv').forEach(function(el){ io.observe(el); });

  /* ── Interactive chat ── */
  var chatBody   = document.getElementById('cbody');
  var ci         = document.getElementById('ci');
  var scene      = chatBody.parentNode;          // .scene
  var confirmEl  = document.getElementById('confirm');
  var busy = false, bookingDone = false, actions = [];
  var selectedTime = '', selectedName = '';

  function scroll(){ chatBody.scrollTop = chatBody.scrollHeight; }
  function removeChips(){ var c = document.getElementById('chips'); if(c) c.remove(); }

  function addUser(t){
    removeChips();
    var m = document.createElement('div'); m.className = 'msg user'; m.textContent = t;
    chatBody.appendChild(m); scroll();
  }

  function valeSay(t, cb, delay){
    removeChips(); busy = true;
    var tp = document.createElement('div');
    tp.className = 'msg vale typing';
    tp.innerHTML = '<span></span><span></span><span></span>';
    chatBody.appendChild(tp); scroll();
    var d = delay || 820;
    setTimeout(function(){
      tp.classList.remove('typing'); tp.textContent = t; scroll();
      busy = false; if(cb) setTimeout(cb, 260);
    }, d);
  }

  function greenPill(t){
    var p = document.createElement('div'); p.className = 'greenpill';
    p.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#1E7A4D" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg> ' + t;
    chatBody.appendChild(p); scroll();
  }

  function setActions(arr){
    actions = arr; removeChips();
    if(!arr.length) return;
    var c = document.createElement('div'); c.id = 'chips';
    arr.forEach(function(a){
      var b = document.createElement('button'); b.className = 'chip-btn';
      b.textContent = a.label;
      b.onclick = function(){ if(!busy && !bookingDone) a.fn(a.label); };
      c.appendChild(b);
    });
    chatBody.appendChild(c); scroll();
  }

  /* ── Conversation flow ── */
  function startChat(){
    var d = DICT[curLang];
    bookingDone = false; selectedTime = ''; selectedName = '';
    valeSay(d.c_intro, function(){
      setActions([
        {label: d.c_day1, fn: flowDay},
        {label: d.c_day2, fn: flowDay}
      ]);
    }, 700);
  }

  function flowDay(day){
    var d = DICT[curLang];
    addUser(day);
    valeSay(d.c_r1, function(){
      setActions([
        {label: d.c_t1, fn: function(t){ flowTime(day, t); }},
        {label: d.c_t2, fn: function(t){ flowTime(day, t); }}
      ]);
    });
  }

  function flowTime(day, time){
    var d = DICT[curLang];
    selectedTime = time;
    addUser(time);
    valeSay(d.c_r2, function(){
      setActions([
        {label: 'Carlos', fn: function(n){ flowName(day, time, n); }},
        {label: 'Ana',    fn: function(n){ flowName(day, time, n); }}
      ]);
    });
  }

  function flowName(day, time, name){
    var d = DICT[curLang];
    selectedName = name;
    addUser(name);
    var confirmMsg = d.c_r3.replace('{{N}}', name).replace('{{D}}', day).replace('{{T}}', time);
    valeSay(confirmMsg, function(){
      greenPill(d.c_pill);
      bookingDone = true;
      // Fill booking card
      document.getElementById('cfTitle').textContent = d.c_cfTitle;
      document.getElementById('cfSub').textContent   = d.c_cfSub;
      document.getElementById('cfK1').textContent    = d.c_cfK1;
      document.getElementById('cfV1').textContent    = d.c_cfV1;
      document.getElementById('cfK2').textContent    = d.c_cfK2;
      document.getElementById('cfV2').textContent    = name;
      document.getElementById('cfK3').textContent    = d.c_cfK3;
      document.getElementById('cfTime').textContent  = day + ' · ' + time;
      document.getElementById('replayBtn').textContent = d.c_replay;
      setTimeout(doTransition, 900);
    });
  }

  /* ── Transition: chat → booking ── */
  function doTransition(){
    removeChips();
    // 1. Dissolve messages with stagger
    chatBody.classList.add('dissolve');
    // 2. Mid-dissolve: switch scene background
    setTimeout(function(){ scene.classList.add('booking-state'); }, 300);
    // 3. Confetti
    setTimeout(spawnSwirl, 350);
    // 4. Show booking card once chat is invisible
    setTimeout(function(){
      confirmEl.classList.remove('hide');
      confirmEl.classList.add('show');
    }, 680);
  }

  function spawnSwirl(){
    var s = document.getElementById('swirl'); s.innerHTML = '';
    var cols = ['#D99A4E','#A8331A','#E9D9C2','#D8B36A','#F0E2CB','#c9962f'];
    for(var i = 0; i < 18; i++){
      var el = document.createElement('i');
      el.style.setProperty('--a', (Math.random()*360) + 'deg');
      el.style.setProperty('--dist', (50 + Math.random()*80) + 'px');
      el.style.background = cols[i % cols.length];
      var sz = 4 + Math.random()*8;
      el.style.width = sz + 'px'; el.style.height = sz + 'px';
      el.style.animationDelay = (Math.random() * .2) + 's';
      s.appendChild(el);
    }
    setTimeout(function(){ s.innerHTML = ''; }, 1500);
  }

  /* ── Reset: booking → chat ── */
  function resetChat(){
    // 1. Animate booking card out
    confirmEl.classList.remove('show');
    confirmEl.classList.add('hide');
    // 2. Mid-exit: start reverting scene bg
    setTimeout(function(){ scene.classList.remove('booking-state'); }, 200);
    // 3. After booking is gone, clear and restart chat
    setTimeout(function(){
      confirmEl.classList.remove('hide');
      chatBody.classList.remove('dissolve');
      chatBody.innerHTML = '';
      document.getElementById('swirl').innerHTML = '';
      startChat();
    }, 500);
  }
  window.resetChat = resetChat;

  /* ── Input handling ── */
  function handleInput(){
    var v = ci.value.trim();
    if(!v || busy || bookingDone || !actions.length) return;
    ci.value = '';
    actions[0].fn(v);
  }
  ci.addEventListener('keydown', function(e){ if(e.key === 'Enter') handleInput(); });
  document.getElementById('send').onclick = handleInput;

  apply('es');
})();
</script>
</body>
</html>
