https-codigoalfavip.com-/index.html at main · sierra4817/https-codigoalfavip.com- · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- SEO Meta Tags -->
  <title>Capital Invisible | Soberanía Financiera y Psicología del Dinero</title>
  <meta name="description" content="Aprende las reglas no escritas de la soberanía patrimonial. Descarga el Capítulo 1 del Manifiesto y domina el sistema definitivo para proteger tu capital.">
  <meta name="robots" content="index, follow">

  <!-- Stylesheets -->
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="container">

    <!-- Header -->
    <header>
      <div class="logo-wrapper">
        <!-- Logo fallback to text if image not found, styled beautifully -->
        <img id="logo-image" class="logo-img" src="logo-transp.png" alt="Capital Invisible" onerror="this.style.display='none'; document.getElementById('logo-fallback').style.display='block';">
      </div>
      <div id="logo-fallback" class="logo-text" style="display: none;">Capital Invisible</div>
    </header>

    <!-- FASE 1: CAPTACIÓN (EL GANCHO) -->
    <main class="hero" id="hero-section">
      <span class="hero-tagline">El Manifiesto de la Élite</span>

      <h1 class="hero-title">
        El dinero que se ve es el dinero que se devalúa. El verdadero poder opera en las <span class="gold-text-gradient">sombras</span>.
      </h1>

      <p class="hero-description">
        La mayoría de las personas juegan un juego financiero cuyas reglas fueron escritas para que pierdan. Existe un capital que no se ve. Un sistema de soberanía que no tributa de la forma en que te enseñaron.
      </p>

      <!-- Formulario de Suscripción Premium -->
      <!--
        NOTA PARA EL USUARIO:
        Si deseas integrar directamente el formulario de suscripción de Payhip, puedes reemplazar este bloque (<form>)
        por el código iframe o script de Newsletter que te da Payhip en su panel de administración.

        Si mantienes este formulario, el archivo script.js controlará la animación y mostrará el enlace de descarga
        y el Upsell de conversión automáticamente al hacer clic en enviar.
      -->
      <div class="form-container" id="subscription-card">

        <!-- Formulario Inicial -->
        <form id="lead-form" class="form-group" onsubmit="handleSubscription(event)">
          <label class="form-label" for="user-email">
            Obtén el Capítulo 1 del Manifiesto y la Guía de inicio gratuito
          </label>
          <input
            type="email"
            id="user-email"
            name="email"
            class="input-field"
            placeholder="Introduce tu correo privado..."
            required
            autocomplete="email"
          >
          <button type="submit" id="btn-submit-lead" class="btn-gold-minimal">
            Obtener Capítulo 1 y Guía
          </button>
        </form>

        <!-- Estado de Éxito y Descarga Directa (Fase Post-Signup) -->
        <div id="success-state" class="success-reveal">
          <div class="success-icon">†</div>
          <h3 class="gold-text-gradient" style="font-size: 1.5rem; margin-bottom: 0.5rem; font-family: var(--font-serif);">Suscripción Confirmada</h3>
          <p style="font-size: 0.9rem; margin-bottom: 1rem; color: var(--text-primary);">
            Has dado el primer paso hacia la soberanía. Tu obsequio está listo para descarga directa.
          </p>

          <div class="download-box">
            <span style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-dark);">Documento Reservado</span>
            <!--
              Enlace de descarga directa.
              Apunta a la versión del PDF alojada directamente en tu repositorio.
            -->
            <a href="PRUEBA_LIBRO_FINAL_MAQUETADO.pdf" download="Capital_Invisible_Manifiesto.pdf" id="download-gift-btn" class="download-link">
              Descargar Ebook Gratuito (PDF)
            </a>
          </div>
        </div>

      </div>
    </main>

    <!-- FASE 2: CONVERSIÓN (EL SISTEMA) -->
    <!--
      Esta sección se mantiene visible por debajo de la landing como una continuación estoica natural.
      Si el usuario se suscribe, la página hace un scroll suave automático y se enfoca en este sistema con mayor iluminación.
    -->
    <section class="conversion-section initially-hidden" id="system-section">

      <div class="transition-tagline">
        "El conocimiento gratuito te dará una ventaja. El sistema completo te dará la soberanía."
      </div>

      <div class="product-card">
        <span class="product-badge">Sistema Definitivo</span>

        <h2 class="product-title">Comprar, Pedir Prestado, Morir</h2>
        <span class="product-subtitle">Libro + Audiolibro Completo</span>

        <!-- Libro Visual 3D Minimalista -->
        <div class="product-preview">
          <div class="preview-top">Capital Invisible</div>
          <div class="preview-title">Comprar<br>Pedir Prestado<br>Morir</div>
          <div class="preview-author">M.D.</div>
        </div>

        <p style="font-size: 0.9rem; max-width: 90%; margin-bottom: var(--spacing-lg);">
          La estrategia exacta que permite a las dinastías y a las mentes financieras soberanas acumular activos, apalancarse legalmente y transferir riqueza multigeneracional sin pagar impuestos en el camino.
        </p>

        <!-- Direct Response Copy Columns / Pillars -->
        <div class="features-list">

          <div class="feature-item">
            <span class="feature-num">I.</span>
            <div class="feature-content">
              <h4 class="feature-title">Comprar Activos Inteligentes</h4>
              <p class="feature-desc">Identifica y adquiere los únicos vehículos de riqueza blindados contra la inflación y la devaluación monetaria.</p>
            </div>
          </div>

          <div class="feature-item">
            <span class="feature-num">II.</span>
            <div class="feature-content">
              <h4 class="feature-title">Pedir Prestado Contra tu Riqueza</h4>
              <p class="feature-desc">Aprende a usar la deuda soberana como escudo fiscal. Los ricos no gastan su dinero; gastan el dinero de otros respaldado por sus activos.</p>
            </div>
          </div>

          <div class="feature-item">
            <span class="feature-num">III.</span>
            <div class="feature-content">
              <h4 class="feature-title">Morir Dejando un Legado Blindado</h4>
              <p class="feature-desc">El paso final de la elusión legal. La estructura para transferir un imperio completo a tus herederos libre de confiscación estatal.</p>
            </div>
          </div>

        </div>

        <!-- Botón de conversión principal (Payhip Checkout) -->
        <!-- Reemplaza el href con el enlace directo del checkout de tu producto en Payhip -->
        <a href="https://payhip.com/CapitalInvisible" target="_blank" rel="noopener noreferrer" id="payhip-buy-btn" class="btn-gold-shimmer">
          Acceder al Sistema Completo
        </a>

        <span class="guarantee-note">Acceso instantáneo • Formato PDF y Audio de Alta Calidad</span>
      </div>

    </section>

    <!-- Footer -->
    <footer>
      <div class="footer-logo">Capital Invisible</div>
      <div class="copyright">
        © 2026 Capital Invisible. Reservados todos los derechos.<br>
        Esta página no forma parte de Facebook, Google ni ninguna institución financiera centralizada.
      </div>
    </footer>

  </div>

  <!-- JavaScript -->
  <script src="script.js"></script>
</body>
</html>