<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="robots" content="noindex,nofollow">
  <title>VIWI AI Advisor</title>
  <style>
    .viwi-advisor-public {
      --accent: #00A88F;
      --accent-soft: #2DD4BF;
      --ink: #10201d;
      --muted: #62726d;
      --line: #dce8e5;
      --panel: #ffffff;
      --wash: #f4fbfa;
      min-height: 100vh;
      margin: 0;
      padding: 24px;
      color: var(--ink);
      background: linear-gradient(180deg, #ffffff 0%, #f4fbfa 100%);
      font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
      box-sizing: border-box;
    }
    .viwi-advisor-public * { box-sizing: border-box; }
    .viwi-advisor-public .shell { max-width: 1160px; margin: 0 auto; }
    .viwi-advisor-public .nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--line);
    }
    .viwi-advisor-public .brand {
      font-size: 16px;
      font-weight: 800;
      letter-spacing: .01em;
    }
    .viwi-advisor-public .badge {
      border: 1px solid rgba(0,168,143,.28);
      background: #ecfffb;
      color: #007a69;
      border-radius: 999px;
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 750;
      white-space: nowrap;
    }
    .viwi-advisor-public .hero {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 22px;
      align-items: center;
      padding: 38px 0 24px;
    }
    .viwi-advisor-public .eyebrow {
      color: var(--accent);
      font-size: 12px;
      font-weight: 760;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    .viwi-advisor-public .title {
      margin-top: 8px;
      font-size: 34px;
      line-height: 1.08;
      max-width: 720px;
      font-weight: 820;
    }
    .viwi-advisor-public .copy {
      margin-top: 12px;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.58;
      max-width: 680px;
    }
    .viwi-advisor-public .actions {
      margin-top: 18px;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    .viwi-advisor-public .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      padding: 9px 14px;
      border-radius: 8px;
      border: 1px solid rgba(0,168,143,.32);
      background: var(--accent);
      color: #ffffff;
      font-size: 13px;
      font-weight: 760;
      text-decoration: none;
    }
    .viwi-advisor-public .button.secondary {
      background: #ffffff;
      color: #007a69;
    }
    .viwi-advisor-public .panel {
      border: 1px solid var(--line);
      background: var(--panel);
      border-radius: 8px;
      padding: 16px;
      box-shadow: 0 14px 34px rgba(18, 42, 37, .06);
    }
    .viwi-advisor-public .grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 18px;
    }
    .viwi-advisor-public .card {
      border: 1px solid var(--line);
      background: #ffffff;
      border-radius: 8px;
      padding: 14px;
    }
    .viwi-advisor-public .label {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }
    .viwi-advisor-public .value {
      margin-top: 8px;
      font-size: 16px;
      line-height: 1.25;
      font-weight: 780;
    }
    .viwi-advisor-public .ok { color: #007a69; font-weight: 760; }
    @media (max-width: 880px) {
      .viwi-advisor-public { padding: 16px; }
      .viwi-advisor-public .hero { grid-template-columns: 1fr; padding-top: 26px; }
      .viwi-advisor-public .grid { grid-template-columns: 1fr; }
      .viwi-advisor-public .title { font-size: 28px; }
    }
  </style>
</head>
<body class="viwi-advisor-public">
  <main class="shell">
    <nav class="nav" aria-label="VIWI AI Advisor">
      <div class="brand">VIWI AI Advisor</div>
      <div class="badge">public_preview_candidate_dry_run</div>
    </nav>
    <section class="hero" aria-label="Presentacion">
      <div>
        <div class="eyebrow">Advisor SaaS · Teal Chrome</div>
        <div class="title">Asesor inteligente para mejorar negocios dentro del ecosistema VIWI.</div>
        <div class="copy">Recomendaciones, borradores, checklist, lectura de metricas y acciones sugeridas conectadas por contrato a VIWI AI Layer.</div>
        <div class="actions">
          <a class="button" href="#">Preview privado</a>
          <a class="button secondary" href="#">Planes en preparacion</a>
        </div>
      </div>
      <aside class="panel">
        <div class="label">Estado de seguridad</div>
        <div class="grid">
          <div class="card"><div class="label">DB write</div><div class="value ok">NO</div></div>
          <div class="card"><div class="label">Provider live</div><div class="value ok">NO</div></div>
          <div class="card"><div class="label">Public apply</div><div class="value ok">NO</div></div>
        </div>
      </aside>
    </section>
  </main>
</body>
</html>
