<style>
.cs-landing {
  --mi-bg: #0A0A0A;
  --mi-panel: #141414;
  --mi-card: #1A1A1A;
  --mi-text: #FFFFFF;
  --mi-muted: #A1A1AA;
  --mi-green: #25D366;
  --mi-border: #27272A;
  background: var(--mi-bg);
  color: var(--mi-text);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  border: 1px solid var(--mi-border);
  border-radius: 16px;
  overflow: hidden;
  line-height: 1.6;
}
.cs-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 36px;
  background: var(--mi-panel);
  border-bottom: 1px solid var(--mi-border);
}
.cs-brand {
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.03em;
  color: var(--mi-text);
}
.cs-brand span {
  color: var(--mi-green);
}
.cs-nav-links {
  display: flex;
  gap: 28px;
}
.cs-nav-links a {
  color: var(--mi-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}
.cs-cta-pill {
  background: var(--mi-green);
  color: #0A0A0A;
  font-weight: 700;
  font-size: 12px;
  padding: 9px 18px;
  border-radius: 99px;
  text-decoration: none;
}
.cs-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 36px;
  padding: 56px 36px;
  align-items: center;
  border-bottom: 1px solid var(--mi-border);
}
.cs-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--mi-border);
  background: var(--mi-card);
  color: var(--mi-muted);
  font-family: monospace;
  font-size: 11px;
  padding: 5px 12px;
  border-radius: 99px;
  margin-bottom: 18px;
}
.cs-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mi-green);
}
.cs-hero h1 {
  margin: 0 0 16px;
  font-size: clamp(30px, 3.8vw, 48px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.08;
  color: var(--mi-text);
}
.cs-hero h1 span {
  color: var(--mi-green);
}
.cs-hero p {
  margin: 0 0 24px;
  color: var(--mi-muted);
  font-size: 15px;
  max-width: 520px;
}
.cs-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.cs-btn-primary {
  background: var(--mi-green);
  color: #0A0A0A;
  font-weight: 700;
  font-size: 13px;
  padding: 12px 22px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
}
.cs-btn-outline {
  background: transparent;
  color: var(--mi-text);
  font-weight: 600;
  font-size: 13px;
  padding: 12px 22px;
  border-radius: 10px;
  border: 1px solid var(--mi-border);
  cursor: pointer;
}
.cs-hero-media {
  position: relative;
}
.cs-hero-img {
  width: 100%;
  height: 310px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--mi-border);
  display: block;
}
.cs-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 28px 36px;
  background: var(--mi-panel);
  border-bottom: 1px solid var(--mi-border);
}
.cs-metric-box {
  padding: 14px;
  border-left: 2px solid var(--mi-green);
}
.cs-metric-box strong {
  display: block;
  font-size: 26px;
  font-weight: 900;
  color: var(--mi-text);
}
.cs-metric-box span {
  font-size: 12px;
  color: var(--mi-muted);
}
.cs-section {
  padding: 52px 36px;
  border-bottom: 1px solid var(--mi-border);
}
.cs-section-header {
  margin-bottom: 32px;
}
.cs-section-header small {
  display: block;
  font-family: monospace;
  font-size: 11px;
  color: var(--mi-green);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.cs-section-header h2 {
  margin: 0;
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.cs-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cs-card {
  background: var(--mi-card);
  border: 1px solid var(--mi-border);
  border-radius: 14px;
  padding: 24px;
}
.cs-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  color: var(--mi-text);
}
.cs-card p {
  margin: 0;
  font-size: 13px;
  color: var(--mi-muted);
}
.cs-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cs-gallery-item {
  background: var(--mi-card);
  border: 1px solid var(--mi-border);
  border-radius: 14px;
  overflow: hidden;
}
.cs-gallery-item img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}
.cs-gallery-caption {
  padding: 16px;
}
.cs-gallery-caption h4 {
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--mi-text);
}
.cs-gallery-caption p {
  margin: 0;
  font-size: 12px;
  color: var(--mi-muted);
}
.cs-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cs-price-card {
  background: var(--mi-card);
  border: 1px solid var(--mi-border);
  border-radius: 14px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}
.cs-price-card.is-featured {
  border-color: var(--mi-green);
}
.cs-price-tag {
  font-size: 34px;
  font-weight: 900;
  color: var(--mi-text);
  margin: 12px 0;
}
.cs-price-tag small {
  font-size: 12px;
  color: var(--mi-muted);
  font-weight: 400;
}
.cs-price-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 24px;
  font-size: 13px;
  color: var(--mi-muted);
}
.cs-price-list li {
  margin-bottom: 8px;
}
.cs-faq-list {
  display: grid;
  gap: 12px;
}
.cs-faq-item {
  background: var(--mi-card);
  border: 1px solid var(--mi-border);
  border-radius: 10px;
  padding: 16px 20px;
}
.cs-faq-item summary {
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  color: var(--mi-text);
}
.cs-faq-item p {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--mi-muted);
}
.cs-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 36px;
  background: #070707;
  font-size: 12px;
  color: var(--mi-muted);
}
</style>

<div class="cs-landing">
  <!-- 01. Navegación Superior -->
  <header class="cs-topbar">
    <div class="cs-brand">code<span>Selector.</span></div>
    <nav class="cs-nav-links">
      <a href="#arquitectura">Arquitectura Lite</a>
      <a href="#portafolio">Portafolio</a>
      <a href="#planes">Planes y Licencias</a>
      <a href="#faq">Preguntas Frecuentes</a>
    </nav>
    <a href="#contacto" class="cs-cta-pill">Probar Puente Visual</a>
  </header>

  <!-- 02. Sección Hero Principal -->
  <section class="cs-hero">
    <div class="cs-hero-copy">
      <div class="cs-badge">
        <span class="cs-dot"></span>
        <span>MARKETINCODE // VISUAL-TO-CODE BRIDGE v1.4</span>
      </div>
      <h1>Edita grandes bloques de IA con un <span>Doble Clic.</span></h1>
      <p>Haz 1 clic sobre cualquier elemento para saltar a su línea HTML, o doble clic sobre textos e imágenes para editarlos ahí mismo en vivo.</p>
      <div class="cs-hero-actions">
        <a href="#portafolio" class="cs-btn-primary">Sincronizar Elemento Ahora</a>
        <a href="#arquitectura" class="cs-btn-outline">Explorar Documentación Técnica</a>
      </div>
    </div>
    <div class="cs-hero-media">
      <img class="cs-hero-img" src="{{PLACEHOLDER_IMG}}" alt="codeSelector Hero" loading="lazy" />
    </div>
  </section>

  <!-- 03. Barra de Métricas de Rendimiento -->
  <section class="cs-metrics">
    <div class="cs-metric-box">
      <strong>0 KB</strong>
      <span>Peso extra en el Frontend público</span>
    </div>
    <div class="cs-metric-box">
      <strong>&lt; 5 ms</strong>
      <span>Tiempo de localización de línea en Ace</span>
    </div>
    <div class="cs-metric-box">
      <strong>100%</strong>
      <span>Sanitización nativa wp_kses activa</span>
    </div>
    <div class="cs-metric-box">
      <strong>v4.3+</strong>
      <span>Compatibilidad total con Elementor</span>
    </div>
  </section>

  <!-- 04. Grid de Arquitectura y Características -->
  <section id="arquitectura" class="cs-section">
    <div class="cs-section-header">
      <small>01 // INGENIERÍA LITE</small>
      <h2>Diseñado para desarrolladores exigentes y flujos con IA</h2>
    </div>
    <div class="cs-grid-3">
      <article class="cs-card">
        <h3>Edición de Texto en Vivo</h3>
        <p>Haz doble clic sobre cualquier título, párrafo o botón para escribir sobre el diseño y actualizar el texto al instante.</p>
      </article>
      <article class="cs-card">
        <h3>Blindaje Anti-XSS Nativo</h3>
        <p>Filtra scripts externos maliciosos y atributos inseguros mediante wp_kses antes de renderizar en pantalla.</p>
      </article>
      <article class="cs-card">
        <h3>Editor Rápido de Imágenes</h3>
        <p>Haz doble clic en cualquier imagen para cambiar su foto desde la Biblioteca de Medios de WordPress o por URL.</p>
      </article>
    </div>
  </section>

  <!-- 05. Galería Visual de Imágenes -->
  <section id="portafolio" class="cs-section">
    <div class="cs-section-header">
      <small>02 // GALERÍA INTERACTIVA</small>
      <h2>Haz doble clic sobre cualquier imagen para cambiarla</h2>
    </div>
    <div class="cs-gallery-grid">
      <figure class="cs-gallery-item">
        <img src="{{PLACEHOLDER_IMG}}" alt="Landing SaaS B2B" loading="lazy" />
        <figcaption class="cs-gallery-caption">
          <h4>Landing SaaS B2B</h4>
          <p>Optimización extrema con carga instantánea y estructura semántica limpia.</p>
        </figcaption>
      </figure>
      <figure class="cs-gallery-item">
        <img src="{{PLACEHOLDER_IMG}}" alt="Ecosistema Marketincode" loading="lazy" />
        <figcaption class="cs-gallery-caption">
          <h4>Ecosistema Marketincode</h4>
          <p>Integración nativa de bloques generados por IA sin dependencias pesadas.</p>
        </figcaption>
      </figure>
      <figure class="cs-gallery-item">
        <img src="{{PLACEHOLDER_IMG}}" alt="Panel de Conversión" loading="lazy" />
        <figcaption class="cs-gallery-caption">
          <h4>Panel de Conversión</h4>
          <p>Estética oscura de alto contraste con acentos en verde #25D366.</p>
        </figcaption>
      </figure>
    </div>
  </section>

  <!-- 06. Planes y Licencias -->
  <section id="planes" class="cs-section">
    <div class="cs-section-header">
      <small>03 // ESCALABILIDAD</small>
      <h2>Prueba de múltiples tarjetas y textos en la parte baja del documento</h2>
    </div>
    <div class="cs-pricing-grid">
      <div class="cs-price-card">
        <h3>Edición Personal</h3>
        <div class="cs-price-tag">$29 <small>USD / año</small></div>
        <ul class="cs-price-list">
          <li>✓ Uso en 1 sitio web profesional</li>
          <li>✓ Puente Visual-Código ilimitado</li>
          <li>✓ Sanitización nativa wp_kses</li>
        </ul>
        <a href="#contacto" class="cs-btn-outline">Seleccionar Plan Personal</a>
      </div>
      <div class="cs-price-card is-featured">
        <h3>Edición Agencia</h3>
        <div class="cs-price-tag">$79 <small>USD / año</small></div>
        <ul class="cs-price-list">
          <li>✓ Hasta 25 sitios de clientes</li>
          <li>✓ Soporte para bloques de IA extensos</li>
          <li>✓ Actualizaciones prioritarias Lite</li>
        </ul>
        <a href="#contacto" class="cs-btn-primary">Seleccionar Plan Agencia</a>
      </div>
      <div class="cs-price-card">
        <h3>Edición Enterprise</h3>
        <div class="cs-price-tag">$199 <small>USD / año</small></div>
        <ul class="cs-price-list">
          <li>✓ Sitios y dominios ilimitados</li>
          <li>✓ Auditoría de seguridad dedicada</li>
          <li>✓ Soporte directo con ingeniería</li>
        </ul>
        <a href="#contacto" class="cs-btn-outline">Seleccionar Plan Enterprise</a>
      </div>
    </div>
  </section>

  <!-- 07. Preguntas Frecuentes al Final del Código -->
  <section id="faq" class="cs-section">
    <div class="cs-section-header">
      <small>04 // PREGUNTAS FRECUENTES</small>
      <h2>Sección final para verificar el scroll profundo</h2>
    </div>
    <div class="cs-faq-list">
      <details class="cs-faq-item" open>
        <summary>¿Cómo funciona exactamente el 1 clic y doble clic en el lienzo de Elementor?</summary>
        <p>Un clic simple salta inmediatamente a la línea de código HTML. El doble clic habilita la edición en vivo de textos e imágenes.</p>
      </details>
      <details class="cs-faq-item">
        <summary>¿Cómo puedo cambiar una imagen del diseño?</summary>
        <p>Haz doble clic sobre cualquier imagen para abrir el selector flotante de codeSelector y elegir fotos de la Biblioteca de Medios de WordPress.</p>
      </details>
      <details class="cs-faq-item">
        <summary>¿Qué ocurre si alguien intenta inyectar un script externo malicioso?</summary>
        <p>El módulo CodeSelector_Sanitizer bloquea scripts, iframes, eventos inline on* y expresiones peligrosas antes de renderizar en pantalla.</p>
      </details>
    </div>
  </section>

  <!-- 08. Footer -->
  <footer class="cs-footer">
    <span>© 2026 Marketincode — Ingeniería de software ligera desde CDMX para LATAM.</span>
    <span>codeSelector. v1.4 — Puente Bidireccional Activo</span>
  </footer>
</div>
