<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GoBee Sales — Automatización de Ventas en LinkedIn</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=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300&display=swap" rel="stylesheet">
<style>
  :root {
    --black: #0a0a0a;
    --off-white: #fafafa;
    --cream: #f5f0e8;
    --accent: #f5d000;
    --accent-dark: #c9aa00;
    --accent-hover: #ffe033;
    --gray-mid: #6b6b6b;
    --gray-light: #e0ddd6;
    --text: #1a1a1a;
  }
 
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
  html { scroll-behavior: smooth; }
 
  body {
    background: var(--off-white);
    color: var(--text);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    line-height: 1.75;
    overflow-x: hidden;
  }
 
  /* ── NAV ── */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 48px;
    backdrop-filter: blur(12px);
    background: rgba(245,243,238,.85);
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  .nav-logo {
    font-family: 'Outfit', sans-serif;
    font-weight: 800; font-size: 1.4rem; letter-spacing: -.01em;
    color: var(--black); text-decoration: none;
  }
  .nav-logo span { color: var(--accent-dark); }
  .nav-links { display: flex; gap: 32px; align-items: center; }
  .nav-links a {
    font-size: .875rem; font-weight: 500;
    color: var(--gray-mid); text-decoration: none;
    transition: color .2s;
  }
  .nav-links a:hover { color: var(--black); }
  .nav-cta {
    background: var(--black); color: var(--off-white) !important;
    padding: 10px 22px; border-radius: 100px;
    font-size: .875rem !important; font-weight: 500 !important;
    transition: background .2s, transform .15s !important;
  }
  .nav-cta:hover { background: #333 !important; transform: translateY(-1px); }
 
  /* ── HERO ── */
  .hero {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding-top: 80px;
  }
  .hero-left {
    display: flex; flex-direction: column; justify-content: center;
    padding: 80px 64px 80px 80px;
  }
  .hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--cream); border: 1px solid var(--gray-light);
    border-radius: 100px; padding: 6px 16px;
    font-size: .8rem; font-weight: 500; color: var(--gray-mid);
    margin-bottom: 32px; width: fit-content;
  }
  .hero-badge::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent-dark);
  }
  .hero-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2.8rem, 5vw, 4.5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--black);
    margin-bottom: 28px;
  }
  .hero-title em {
    font-style: normal;
    color: transparent;
    -webkit-text-stroke: 2px var(--black);
  }
  .hero-sub {
    font-size: 1.1rem; color: var(--gray-mid); font-weight: 300;
    max-width: 420px; line-height: 1.7;
    margin-bottom: 48px;
  }
  .hero-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
  .btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--black); color: var(--off-white);
    padding: 16px 32px; border-radius: 100px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem; font-weight: 500;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
  }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,.2); }
  .btn-primary svg { transition: transform .2s; }
  .btn-primary:hover svg { transform: translateX(3px); }
  .btn-secondary {
    font-size: .95rem; color: var(--gray-mid); text-decoration: none;
    font-weight: 400; border-bottom: 1px solid transparent;
    transition: color .2s, border-color .2s;
  }
  .btn-secondary:hover { color: var(--black); border-color: var(--black); }
  .hero-stats {
    display: flex; gap: 40px; margin-top: 64px;
    padding-top: 40px; border-top: 1px solid var(--gray-light);
  }
  .stat-item {}
  .stat-number {
    font-family: 'Outfit', sans-serif;
    font-size: 2.2rem; font-weight: 800; color: var(--black);
    line-height: 1.1;
  }
  .stat-label { font-size: .8rem; color: var(--gray-mid); margin-top: 4px; }
 
  .hero-right {
    position: relative;
    background: var(--black);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  .hero-right-inner {
    position: relative; z-index: 2;
    padding: 60px 48px;
    width: 100%;
  }
  .hero-graphic-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    max-width: 420px; margin: 0 auto;
  }
  .hg-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px; padding: 24px 20px;
    display: flex; flex-direction: column; gap: 12px;
    animation: floatCard 4s ease-in-out infinite;
  }
  .hg-card:nth-child(2) { animation-delay: .5s; margin-top: 24px; }
  .hg-card:nth-child(3) { animation-delay: 1s; }
  .hg-card:nth-child(4) { animation-delay: 1.5s; margin-top: 24px; }
  @keyframes floatCard {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }
  .hg-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
  }
  .hg-title { font-family: 'Outfit', sans-serif; font-size: .8rem; font-weight: 700; color: #fff; letter-spacing: .02em; }
  .hg-val { font-size: 1.4rem; font-weight: 700; color: var(--accent); font-family: 'Outfit', sans-serif; }
  .hg-bar { height: 4px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
  .hg-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; }
 
  .hero-bg-circle {
    position: absolute; border-radius: 50%;
    background: radial-gradient(circle, rgba(245,208,0,.18) 0%, transparent 70%);
  }
  .hbc1 { width: 500px; height: 500px; top: -100px; right: -100px; }
  .hbc2 { width: 300px; height: 300px; bottom: -50px; left: 50px; }
 
  /* ── SECTION SHARED ── */
  section { padding: 100px 80px; }
  .section-label {
    font-size: .75rem; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--accent-dark);
    margin-bottom: 16px;
  }
  .section-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 800; letter-spacing: -.015em;
    color: var(--black); line-height: 1.2;
    margin-bottom: 20px;
  }
  .section-sub {
    font-size: 1.05rem; color: var(--gray-mid);
    max-width: 520px; line-height: 1.7; font-weight: 300;
  }
 
  /* ── ABOUT ── */
  #acerca-de {
    background: var(--cream);
    border-top: 1px solid var(--gray-light);
    border-bottom: 1px solid var(--gray-light);
  }
  .about-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
    align-items: center; max-width: 1200px; margin: 0 auto;
  }
  .about-visual {
    position: relative;
    background: var(--black); border-radius: 24px;
    padding: 40px; overflow: hidden;
  }
  .about-visual-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.2rem; font-weight: 700; color: #fff;
    margin-bottom: 28px;
  }
  .linkedin-mock {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px; padding: 20px;
  }
  .lm-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
  .lm-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(135deg, #0077b5, #00a0dc);
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem; font-weight: 700; color: #fff;
  }
  .lm-name { font-size: .85rem; font-weight: 600; color: #fff; }
  .lm-role { font-size: .75rem; color: rgba(255,255,255,.5); }
  .lm-msg {
    font-size: .82rem; color: rgba(255,255,255,.75); line-height: 1.5;
    padding: 12px; background: rgba(255,255,255,.05); border-radius: 8px;
    margin-bottom: 10px;
  }
  .lm-tag {
    display: inline-block; background: rgba(245,208,0,.15);
    color: var(--accent); font-size: .7rem; font-weight: 600;
    padding: 4px 10px; border-radius: 100px; border: 1px solid rgba(245,208,0,.3);
  }
  .about-bg-dot {
    position: absolute; width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle, rgba(245,208,0,.12) 0%, transparent 70%);
    bottom: -40px; right: -40px;
  }
 
  /* ── STEPS ── */
  #pasos {
    background: var(--off-white);
    max-width: none;
  }
  .steps-header { max-width: 1200px; margin: 0 auto 64px; }
  .steps-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    max-width: 1200px; margin: 0 auto;
    position: relative;
  }
  .steps-grid::before {
    content: '';
    position: absolute;
    top: 28px; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gray-light) 20%, var(--gray-light) 80%, transparent);
  }
  .step-card {
    display: flex; flex-direction: column;
    padding: 0 24px;
    position: relative;
    animation: fadeUp .6s ease both;
  }
  .step-card:nth-child(1) { animation-delay: .1s; }
  .step-card:nth-child(2) { animation-delay: .2s; }
  .step-card:nth-child(3) { animation-delay: .3s; }
  .step-card:nth-child(4) { animation-delay: .4s; }
  .step-card:nth-child(5) { animation-delay: .5s; }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .step-number {
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Outfit', sans-serif; font-weight: 800; font-size: .9rem;
    margin-bottom: 24px;
    position: relative; z-index: 1;
  }
  .step-number.active {
    background: var(--black); color: var(--accent);
    box-shadow: 0 0 0 6px rgba(245,208,0,.2);
  }
  .step-number.inactive {
    background: var(--cream);
    border: 2px solid var(--gray-light);
    color: var(--gray-mid);
  }
  .step-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem; font-weight: 700; color: var(--black);
    margin-bottom: 12px; line-height: 1.4;
  }
  .step-desc {
    font-size: .85rem; color: var(--gray-mid); line-height: 1.6;
    font-weight: 300;
  }
 
  /* ── WHY ── */
  #por-que {
    background: var(--black); color: #fff;
  }
  .why-header .section-title { color: #fff; }
  .why-header .section-sub { color: rgba(255,255,255,.55); }
  .why-header .section-label { color: var(--accent); }
  .why-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
    margin-top: 64px; max-width: 1200px; margin-left: auto; margin-right: auto;
  }
  .why-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    padding: 40px 36px;
    transition: background .25s;
    cursor: default;
  }
  .why-card:hover { background: rgba(255,255,255,.08); }
  .why-card:first-child { border-radius: 16px 0 0 16px; }
  .why-card:last-child { border-radius: 0 16px 16px 0; }
  .why-icon {
    font-size: 1.8rem; margin-bottom: 20px;
    display: block;
  }
  .why-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem; font-weight: 700; color: #fff;
    margin-bottom: 14px;
  }
  .why-desc { font-size: .9rem; color: rgba(255,255,255,.55); line-height: 1.65; font-weight: 300; }
 
  /* ── CONTACT ── */
  #contacto {
    background: var(--cream);
    border-top: 1px solid var(--gray-light);
  }
  .contact-wrap {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;
  }
  .contact-info {}
  .contact-details { margin-top: 40px; display: flex; flex-direction: column; gap: 20px; }
  .cd-item { display: flex; align-items: center; gap: 14px; }
  .cd-icon {
    width: 42px; height: 42px; border-radius: 12px;
    background: var(--black); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
  }
  .cd-label { font-size: .75rem; color: var(--gray-mid); font-weight: 500; }
  .cd-val { font-size: .95rem; color: var(--black); font-weight: 400; }
 
  .contact-form {
    background: #fff;
    border: 1px solid var(--gray-light);
    border-radius: 20px; padding: 40px;
    box-shadow: 0 4px 40px rgba(0,0,0,.06);
  }
  .form-group { margin-bottom: 20px; }
  .form-group label {
    display: block; font-size: .8rem; font-weight: 600;
    color: var(--black); margin-bottom: 8px; letter-spacing: .02em;
  }
  .form-group input,
  .form-group textarea {
    width: 100%; padding: 14px 16px;
    background: var(--off-white);
    border: 1px solid var(--gray-light); border-radius: 10px;
    font-family: 'DM Sans', sans-serif; font-size: .95rem; color: var(--text);
    outline: none; transition: border-color .2s, box-shadow .2s;
    resize: none;
  }
  .form-group input:focus,
  .form-group textarea:focus {
    border-color: var(--black);
    box-shadow: 0 0 0 3px rgba(10,10,10,.07);
  }
  .form-group textarea { height: 120px; }
  .form-privacy {
    font-size: .78rem; color: var(--gray-mid); margin-bottom: 24px;
    display: flex; align-items: flex-start; gap: 10px;
  }
  .form-privacy input[type=checkbox] { margin-top: 2px; flex-shrink: 0; }
  .btn-submit {
    width: 100%; padding: 16px;
    background: var(--black); color: #fff;
    border: none; border-radius: 100px;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1rem; font-weight: 600;
    cursor: pointer; transition: transform .2s, box-shadow .2s;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
  }
  .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.2); }
 
  /* ── CTA BANNER ── */
  .cta-banner {
    background: var(--black); padding: 100px 80px;
    text-align: center;
  }
  .cta-banner-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    font-weight: 800; color: #fff;
    letter-spacing: -.02em; line-height: 1.15;
    margin-bottom: 24px;
    max-width: 700px; margin-left: auto; margin-right: auto;
  }
  .cta-banner-sub {
    color: rgba(255,255,255,.55); font-size: 1.05rem;
    margin-bottom: 48px; font-weight: 300;
  }
  .btn-accent {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--accent); color: var(--black);
    padding: 18px 40px; border-radius: 100px;
    font-size: 1rem; font-weight: 700; text-decoration: none;
    font-family: 'Outfit', sans-serif;
    transition: transform .2s, box-shadow .2s, background .2s;
    box-shadow: 0 4px 24px rgba(245,208,0,.35);
  }
  .btn-accent:hover {
    background: var(--accent-hover);
    transform: translateY(-3px);
    box-shadow: 0 10px 40px rgba(245,208,0,.45);
  }
 
  /* ── FOOTER ── */
  footer {
    background: var(--off-white);
    border-top: 1px solid var(--gray-light);
    padding: 40px 80px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .footer-logo {
    font-family: 'Outfit', sans-serif;
    font-weight: 800; font-size: 1.2rem;
    color: var(--black); text-decoration: none;
  }
  .footer-logo span { color: var(--accent-dark); }
  .footer-links { display: flex; gap: 28px; }
  .footer-links a {
    font-size: .85rem; color: var(--gray-mid);
    text-decoration: none; transition: color .2s;
  }
  .footer-links a:hover { color: var(--black); }
  .footer-copy { font-size: .8rem; color: var(--gray-light); }
 
  /* ── RESPONSIVE ── */
  @media (max-width: 900px) {
    nav { padding: 16px 24px; }
    .nav-links { display: none; }
    .hero { grid-template-columns: 1fr; min-height: auto; }
    .hero-left { padding: 60px 28px 40px; }
    .hero-right { min-height: 320px; padding: 32px 0; }
    section { padding: 60px 28px; }
    .about-grid, .contact-wrap { grid-template-columns: 1fr; gap: 40px; }
    .steps-grid { grid-template-columns: 1fr 1fr; }
    .steps-grid::before { display: none; }
    .why-grid { grid-template-columns: 1fr; gap: 2px; }
    .why-card:first-child { border-radius: 16px 16px 0 0; }
    .why-card:last-child { border-radius: 0 0 16px 16px; }
    .hero-stats { gap: 24px; }
    footer { flex-direction: column; gap: 20px; text-align: center; }
    .cta-banner { padding: 60px 28px; }
  }
  @media (max-width: 600px) {
    .steps-grid { grid-template-columns: 1fr; }
    .hero-title { font-size: 2.4rem; }
  }
</style>
</head>
<body>
 
<!-- NAV -->
<nav>
  <a href="#" class="nav-logo">
    <img src="https://ss-cnt-001c.esmsv.com/r/content/host1/044ad7dd1abaf45a9191cb6806d37db4/img/265157178406798707854320257570441730271267n.webp" alt="GoBee" style="height:44px;width:auto;max-width:180px;object-fit:contain;display:block;">
  </a>
  <div class="nav-links">
    <a href="#acerca-de">El servicio</a>
    <a href="#juan">Quién soy</a>
    <a href="#pasos">Metodología</a>
    <a href="#contacto">Contacto</a>
    <a href="https://buy.stripe.com/00g6r33JDfw46QgfYY" class="nav-cta" target="_blank">Activar cuenta →</a>
  </div>
</nav>
 
<!-- HERO -->
<section class="hero" style="padding:0;">
  <div class="hero-left">
    <img src="https://ss-cnt-001c.esmsv.com/r/content/host1/044ad7dd1abaf45a9191cb6806d37db4/img/265157178406798707854320257570441730271267n.webp" alt="GoBee" style="height:60px;width:auto;max-width:220px;object-fit:contain;display:block;margin-bottom:36px;">
    <div class="hero-badge">Fundador & Consultor LinkedIn B2B · desde 2024</div>
    <h1 class="hero-title">
      Tu pipeline de ventas,<br>
      construido sobre<br>
      <em>LinkedIn</em>
    </h1>
    <p class="hero-sub">
      Implemento sistemas de generación de leads B2B y marca personal C-Level que convierten tu perfil de LinkedIn en un activo comercial real y predecible.
    </p>
    <div class="hero-actions">
      <a href="https://buy.stripe.com/00g6r33JDfw46QgfYY" class="btn-primary" target="_blank">
        Activar GoBee Sales
        <svg width="16" height="16" fill="none" viewBox="0 0 16 16"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </a>
      <a href="#acerca-de" class="btn-secondary">Conocer más</a>
    </div>
    <div class="hero-stats">
      <div class="stat-item">
        <div class="stat-number">20+</div>
        <div class="stat-label">Clientes conseguidos en 1 año</div>
      </div>
      <div class="stat-item">
        <div class="stat-number">4</div>
        <div class="stat-label">Países: ARG, CHI, PER, COL</div>
      </div>
      <div class="stat-item">
        <div class="stat-number">B2B</div>
        <div class="stat-label">100% foco en ventas B2B</div>
      </div>
    </div>
  </div>
 
  <div class="hero-right">
    <div class="hero-bg-circle hbc1"></div>
    <div class="hero-bg-circle hbc2"></div>
    <div class="hero-right-inner">
      <div class="hero-graphic-grid">
        <div class="hg-card">
          <div class="hg-icon" style="background:rgba(245,208,0,.15)">🎯</div>
          <div class="hg-title">Segmentación</div>
          <div class="hg-val">94%</div>
          <div class="hg-bar"><div class="hg-bar-fill" style="width:94%"></div></div>
        </div>
        <div class="hg-card">
          <div class="hg-icon" style="background:rgba(0,119,181,.15)">💬</div>
          <div class="hg-title">Respuestas</div>
          <div class="hg-val">+38%</div>
          <div class="hg-bar"><div class="hg-bar-fill" style="width:38%"></div></div>
        </div>
        <div class="hg-card">
          <div class="hg-icon" style="background:rgba(245,208,0,.1)">📈</div>
          <div class="hg-title">Conversiones</div>
          <div class="hg-val">5.2x</div>
          <div class="hg-bar"><div class="hg-bar-fill" style="width:70%"></div></div>
        </div>
        <div class="hg-card">
          <div class="hg-icon" style="background:rgba(255,255,255,.08)">⚡</div>
          <div class="hg-title">Automatización</div>
          <div class="hg-val">100%</div>
          <div class="hg-bar"><div class="hg-bar-fill" style="width:100%"></div></div>
        </div>
      </div>
    </div>
  </div>
</section>
 
<!-- ABOUT -->
<section id="acerca-de">
  <div class="about-grid">
    <div class="about-visual">
      <div class="about-visual-title">GoBee Sales en acción</div>
      <div class="linkedin-mock">
        <div class="lm-header">
          <div class="lm-avatar">JV</div>
          <div>
            <div class="lm-name">Juan Pablo Vallone</div>
            <div class="lm-role">Mensaje via Sales Navigator · LinkedIn</div>
          </div>
        </div>
        <div class="lm-msg">
          "Hola, vi que liderás el equipo comercial en [Empresa]. Trabajo con CEOs y Founders para generar reuniones calificadas desde LinkedIn sin depender de referidos. ¿Tenés 15 minutos esta semana?"
        </div>
        <span class="lm-tag">✓ Prospecto segmentado</span>
        &nbsp;
        <span class="lm-tag">📊 Mensaje personalizado</span>
      </div>
      <div class="about-bg-dot"></div>
    </div>
    <div>
      <p class="section-label">El problema que resolvemos</p>
      <h2 class="section-title">¿Cuántas oportunidades estás dejando ir?</h2>
      <p class="section-sub">
        Tenés un producto que genera valor real, pero tu perfil no lo refleja. Publicás esporádicamente sin saber si genera algo concreto. Ves a otros posicionarse como referentes mientras esperás que los clientes lleguen solos.
      </p>
      <p style="color: var(--gray-mid); margin-top: 20px; font-size: .95rem; line-height: 1.8; font-weight: 300;">
        GoBee construye el sistema que falta: <strong style="color:var(--black);font-weight:600;">más reuniones calificadas</strong> con decisores que ya te conocen antes de hablar, un <strong style="color:var(--black);font-weight:600;">pipeline predecible</strong> sin depender de referidos, y un posicionamiento de marca que te pone en el radar de tu cliente ideal.
      </p>
      <div style="margin-top:32px;display:flex;gap:12px;flex-wrap:wrap;">
        <span style="background:var(--cream);border:1px solid var(--gray-light);border-radius:100px;padding:6px 16px;font-size:.82rem;font-weight:500;color:var(--black);">Founders & CEOs</span>
        <span style="background:var(--cream);border:1px solid var(--gray-light);border-radius:100px;padding:6px 16px;font-size:.82rem;font-weight:500;color:var(--black);">Equipos comerciales</span>
        <span style="background:var(--cream);border:1px solid var(--gray-light);border-radius:100px;padding:6px 16px;font-size:.82rem;font-weight:500;color:var(--black);">Consultoras & Agencias</span>
        <span style="background:var(--cream);border:1px solid var(--gray-light);border-radius:100px;padding:6px 16px;font-size:.82rem;font-weight:500;color:var(--black);">Empresas medianas B2B</span>
      </div>
    </div>
  </div>
</section>
 
<!-- JUAN -->
<section id="juan" style="background:var(--black);padding:100px 80px;">
  <div style="max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1.4fr;gap:80px;align-items:center;">
    <div style="position:relative;">
      <div style="background:rgba(245,208,0,.08);border:1px solid rgba(245,208,0,.2);border-radius:24px;padding:40px 36px;">
        <div style="display:flex;align-items:center;gap:16px;margin-bottom:28px;">
          <div style="width:64px;height:64px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif;font-size:1.4rem;font-weight:800;color:var(--black);flex-shrink:0;">JV</div>
          <div>
            <div style="font-family:'Outfit',sans-serif;font-size:1.1rem;font-weight:700;color:#fff;">Juan Pablo Vallone</div>
            <div style="font-size:.82rem;color:rgba(255,255,255,.5);margin-top:2px;">Fundador & Consultor LinkedIn B2B</div>
          </div>
        </div>
        <div style="font-size:.9rem;color:rgba(255,255,255,.65);line-height:1.8;margin-bottom:24px;">
          "Soy tu socio estratégico en LinkedIn. Implemento sistemas de generación de leads B2B y construyo la marca personal C-Level que convierte tu perfil en un activo comercial real."
        </div>
        <div style="display:flex;flex-direction:column;gap:10px;">
          <div style="display:flex;align-items:center;gap:10px;font-size:.82rem;color:rgba(255,255,255,.5);">
            <span style="color:var(--accent);">✓</span> Ingeniero Industrial · UBA
          </div>
          <div style="display:flex;align-items:center;gap:10px;font-size:.82rem;color:rgba(255,255,255,.5);">
            <span style="color:var(--accent);">✓</span> 4 años como Líder Regional de Ventas LATAM en tecnología
          </div>
          <div style="display:flex;align-items:center;gap:10px;font-size:.82rem;color:rgba(255,255,255,.5);">
            <span style="color:var(--accent);">✓</span> Especialista en LinkedIn Sales Navigator & B2B Lead Gen
          </div>
          <div style="display:flex;align-items:center;gap:10px;font-size:.82rem;color:rgba(255,255,255,.5);">
            <span style="color:var(--accent);">✓</span> Clientes en Argentina, Chile, Perú y Colombia
          </div>
        </div>
        <a href="https://www.linkedin.com/in/juan-pablo-vallone-lead-generation/" target="_blank" style="display:inline-flex;align-items:center;gap:8px;margin-top:28px;background:rgba(245,208,0,.1);border:1px solid rgba(245,208,0,.3);color:var(--accent);padding:10px 20px;border-radius:100px;font-size:.85rem;font-weight:600;text-decoration:none;transition:background .2s;" onmouseover="this.style.background='rgba(245,208,0,.18)'" onmouseout="this.style.background='rgba(245,208,0,.1)'">
          <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
          Ver perfil en LinkedIn
        </a>
      </div>
    </div>
    <div>
      <p class="section-label" style="color:var(--accent);">El sistema detrás de GoBee</p>
      <h2 class="section-title" style="color:#fff;">Construido desde adentro.<br>Probado en el mercado.</h2>
      <p style="color:rgba(255,255,255,.6);font-size:1.05rem;line-height:1.8;font-weight:300;margin-bottom:28px;">
        Fundé GoBee después de replicar el mismo sistema de prospección que usé para conseguir <strong style="color:#fff;font-weight:600;">20 nuevos clientes en mi primer año</strong>. No es teoría: es el proceso exacto que funcionó, empaquetado y ejecutado para tu empresa.
      </p>
      <p style="color:rgba(255,255,255,.6);font-size:1.05rem;line-height:1.8;font-weight:300;margin-bottom:40px;">
        Vengo de liderar ventas B2B en tecnología a nivel LATAM, gestionar proyectos en el sector público y negociar contratos en empresas como YPF. Sé lo que significa construir un pipeline real en mercados exigentes.
      </p>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
        <div style="background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:20px 18px;">
          <div style="font-family:'Outfit',sans-serif;font-size:1.8rem;font-weight:800;color:var(--accent);line-height:1;">20+</div>
          <div style="font-size:.82rem;color:rgba(255,255,255,.5);margin-top:6px;">Clientes generados en el primer año</div>
        </div>
        <div style="background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:20px 18px;">
          <div style="font-family:'Outfit',sans-serif;font-size:1.8rem;font-weight:800;color:var(--accent);line-height:1;">4</div>
          <div style="font-size:.82rem;color:rgba(255,255,255,.5);margin-top:6px;">Países donde el sistema funciona hoy</div>
        </div>
        <div style="background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:20px 18px;">
          <div style="font-family:'Outfit',sans-serif;font-size:1.8rem;font-weight:800;color:var(--accent);line-height:1;">10+</div>
          <div style="font-size:.82rem;color:rgba(255,255,255,.5);margin-top:6px;">Años de experiencia en ventas B2B</div>
        </div>
        <div style="background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:20px 18px;">
          <div style="font-family:'Outfit',sans-serif;font-size:1.8rem;font-weight:800;color:var(--accent);line-height:1;">0</div>
          <div style="font-size:.82rem;color:rgba(255,255,255,.5);margin-top:6px;">Dependencia de referidos o suerte</div>
        </div>
      </div>
    </div>
  </div>
</section>
 
<!-- STEPS -->
<section id="pasos">
  <div class="steps-header">
    <p class="section-label">Nuestra metodología</p>
    <h2 class="section-title">5 pasos hacia el éxito</h2>
    <p class="section-sub">Un proceso estructurado y probado que adapta cada estrategia a tu negocio.</p>
  </div>
  <div class="steps-grid">
    <div class="step-card">
      <div class="step-number active">01</div>
      <div class="step-title">Segmentación Precisa</div>
      <div class="step-desc">Análisis exhaustivo de tu mercado para identificar y segmentar tu público objetivo con exactitud.</div>
    </div>
    <div class="step-card">
      <div class="step-number active">02</div>
      <div class="step-title">Mensajes Personalizados</div>
      <div class="step-desc">Contenido atractivo y personalizado que resuena con tu audiencia y fomenta el interés genuino.</div>
    </div>
    <div class="step-card">
      <div class="step-number active">03</div>
      <div class="step-title">Implementación</div>
      <div class="step-desc">Herramientas innovadoras y tecnología de vanguardia para ejecutar campañas con fluidez.</div>
    </div>
    <div class="step-card">
      <div class="step-number inactive">04</div>
      <div class="step-title">Análisis & Optimización</div>
      <div class="step-desc">Seguimiento detallado con ajustes en tiempo real basados en datos para maximizar resultados.</div>
    </div>
    <div class="step-card">
      <div class="step-number inactive">05</div>
      <div class="step-title">Resultados Medibles</div>
      <div class="step-desc">Evaluación completa con altas tasas de conversión y un ROI significativo y transparente.</div>
    </div>
  </div>
</section>
 
<!-- WHY -->
<section id="por-que" style="padding: 100px 80px;">
  <div class="why-header" style="max-width: 1200px; margin: 0 auto 0;">
    <p class="section-label">Por qué GoBee</p>
    <h2 class="section-title">La automatización no es<br>opcional, es necesaria</h2>
    <p class="section-sub">En un mercado competitivo, quienes automatizan inteligentemente ganan terreno. Nosotros te acompañamos en cada paso.</p>
  </div>
  <div class="why-grid" style="margin-top: 56px;">
    <div class="why-card">
      <span class="why-icon">🚀</span>
      <div class="why-title">Velocidad de mercado</div>
      <div class="why-desc">Llega a más prospectos en menos tiempo. Mientras la competencia envía emails manualmente, vos ya tenés reuniones agendadas.</div>
    </div>
    <div class="why-card">
      <span class="why-icon">🎯</span>
      <div class="why-title">Precisión quirúrgica</div>
      <div class="why-desc">Cada mensaje llega a la persona correcta en el momento correcto. Sin spam, sin desperdicio de tiempo ni recursos.</div>
    </div>
    <div class="why-card">
      <span class="why-icon">📊</span>
      <div class="why-title">Datos que importan</div>
      <div class="why-desc">Métricas claras y reportes en tiempo real. Sabés exactamente qué funciona y dónde mejorar en cada campaña.</div>
    </div>
  </div>
</section>
 
<!-- CTA BANNER -->
<div class="cta-banner">
  <img src="https://ss-cnt-001c.esmsv.com/r/content/host1/044ad7dd1abaf45a9191cb6806d37db4/img/265157178406798707854320257570441730271267n.webp" alt="GoBee" style="height:52px;width:auto;max-width:200px;object-fit:contain;display:block;margin:0 auto 32px;filter:brightness(0) invert(1);opacity:.95;">
  <h2 class="cta-banner-title">El sistema existe.<br>Lo que falta sos vos adentro.</h2>
  <p class="cta-banner-sub">Sin formularios interminables, sin demos. Activá tu cuenta y empezamos.</p>
  <a href="https://buy.stripe.com/00g6r33JDfw46QgfYY" class="btn-accent" target="_blank">
    Activar mi cuenta GoBee Sales →
  </a>
</div>
 
<!-- CONTACT -->
<section id="contacto">
  <div class="contact-wrap">
    <div class="contact-info">
      <p class="section-label">Contacto</p>
      <h2 class="section-title">¡Hablemos!</h2>
      <p class="section-sub">Dejanos tu consulta y te respondemos a la brevedad.</p>
      <div class="contact-details">
        <div class="cd-item">
          <div class="cd-icon">📍</div>
          <div>
            <div class="cd-label">Dirección</div>
            <div class="cd-val">Chingolo 480, Rincón de Milberg, Tigre</div>
          </div>
        </div>
        <div class="cd-item">
          <div class="cd-icon">📞</div>
          <div>
            <div class="cd-label">Teléfono</div>
            <div class="cd-val"><a href="tel:+5491138526187" style="color:inherit;text-decoration:none;">+54 9 11 3852-6187</a></div>
          </div>
        </div>
        <div class="cd-item">
          <div class="cd-icon">💬</div>
          <div>
            <div class="cd-label">WhatsApp</div>
            <div class="cd-val"><a href="https://wa.me/+5491138526187" target="_blank" style="color:var(--accent-dark);text-decoration:none;">Escribinos por WhatsApp →</a></div>
          </div>
        </div>
        <div class="cd-item">
          <div class="cd-icon">✉️</div>
          <div>
            <div class="cd-label">Email</div>
            <div class="cd-val"><a href="/cdn-cgi/l/email-protection#3f565159507f58505d5a5a115c5052115e4d" style="color:inherit;text-decoration:none;"><span class="__cf_email__" data-cfemail="94fdfaf2fbd4f3fbf6f1f1baf7fbf9baf5e6">[email&#160;protected]</span></a></div>
          </div>
        </div>
      </div>
    </div>
    <div class="contact-form">
      <h3 style="font-family:'Outfit',sans-serif;font-size:1.3rem;font-weight:700;color:var(--black);margin-bottom:24px;">Envianos tu consulta</h3>
      <form action="https://gobee.com.ar/#contacto" method="post">
        <div class="form-group">
          <label>Nombre</label>
          <input type="text" name="nombre" placeholder="Tu nombre completo">
        </div>
        <div class="form-group">
          <label>Correo electrónico</label>
          <input type="email" name="email" placeholder="tu@empresa.com">
        </div>
        <div class="form-group">
          <label>Mensaje</label>
          <textarea name="mensaje" placeholder="Contanos sobre tu negocio y qué necesitás…"></textarea>
        </div>
        <div class="form-privacy">
          <input type="checkbox" id="privacy">
          <label for="privacy" style="font-size:.78rem;color:var(--gray-mid);">Acepto que mis datos sean utilizados para brindarme servicios conforme a la política de privacidad.</label>
        </div>
        <button type="submit" class="btn-submit">Enviar consulta</button>
      </form>
    </div>
  </div>
</section>
 
<!-- FOOTER -->
<footer>
  <a href="#" class="footer-logo">
    <img src="https://ss-cnt-001c.esmsv.com/r/content/host1/044ad7dd1abaf45a9191cb6806d37db4/img/265157178406798707854320257570441730271267n.webp" alt="GoBee" style="height:38px;width:auto;max-width:160px;object-fit:contain;display:block;">
  </a>
  <div class="footer-links">
    <a href="#acerca-de">El servicio</a>
    <a href="#juan">Quién soy</a>
    <a href="#pasos">Metodología</a>
    <a href="#contacto">Contacto</a>
    <a href="https://www.linkedin.com/in/juan-pablo-vallone-lead-generation/" target="_blank">LinkedIn</a>
  </div>
  <div class="footer-copy">© 2025 GoBee · Juan Pablo Vallone</div>
</footer>
 
</body>
</html>