new_amoryroma/diagnostico.html

<!DOCTYPE html>
<html lang="es-AR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Diagnóstico — Amor y Roma</title>
<meta name="description" content="Respondé 5 preguntas y descubrí qué solución digital necesita hoy tu negocio.">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>

<header class="site-header">
  <div class="container nav-row">
    <a href="index.html" class="logo-mark" aria-label="Amor y Roma — inicio">
      <svg viewBox="0 0 80 70" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path d="M2 66V34C2 16.3 16.3 2 34 2H46C63.7 2 78 16.3 78 34V66" stroke="var(--accent-blush)" stroke-width="6" fill="none" opacity="0.55"/>
        <path d="M14 66V34C14 20.7 24.7 10 38 10H42C55.3 10 66 20.7 66 34V66" stroke="currentColor" stroke-width="6" fill="none"/>
      </svg>
      <span class="wordmark">amor&amp;roma</span>
    </a>
    <nav class="nav-links" aria-label="Navegación principal">
      <a href="index.html">Inicio</a>
      <a href="servicios.html">Servicios</a>
      <a href="planes.html">Planes</a>
      <a href="portfolio.html">Portfolio</a>
      <a href="nosotros.html">Nosotros</a>
      <a href="metodo.html">Método</a>
      <a href="contacto.html">Contacto</a>
    </nav>
    <div class="nav-actions">
      <a href="diagnostico.html" class="btn btn-primary" aria-current="page">Encontrá tu solución</a>
      <button class="theme-toggle" data-theme-toggle type="button" aria-label="Cambiar tema claro/oscuro">
        <svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
        <svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.8A9 9 0 1111.2 3a7 7 0 009.8 9.8z"/></svg>
      </button>
      <button class="nav-toggle" data-nav-toggle type="button" aria-label="Abrir menú" aria-expanded="false">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
      </button>
    </div>
  </div>
  <div class="mobile-menu" data-mobile-menu>
    <a href="index.html">Inicio</a>
    <a href="servicios.html">Servicios</a>
    <a href="planes.html">Planes</a>
    <a href="portfolio.html">Portfolio</a>
    <a href="nosotros.html">Nosotros</a>
    <a href="metodo.html">Método</a>
    <a href="diagnostico.html">Diagnóstico</a>
    <a href="contacto.html">Contacto</a>
  </div>
</header>

<main>
  <section class="section-tight">
    <div class="container diag-wrap">
      <p class="eyebrow" style="text-align:center;">Diagnóstico</p>
      <h1 style="font-size:var(--step-2); text-align:center;">¿Qué necesita hoy tu negocio?</h1>
      <p id="diag-context-banner" hidden style="text-align:center; margin-top:0.6rem; color:var(--accent-roma-bright); font-family:var(--font-small); font-size:0.9rem;"></p>

      <form id="diagnostico" style="margin-top:var(--space-4);">
        <div class="diag-progress"></div>

        <div class="diag-step" data-step="necesidad">
          <h4 style="text-align:left;">¿Qué estás buscando resolver?</h4>
          <div class="diag-options">
            <button type="button" class="diag-option" data-field="necesidad" data-value="marca" aria-pressed="false">Marca</button>
            <button type="button" class="diag-option" data-field="necesidad" data-value="presencia" aria-pressed="false">Presencia digital</button>
            <button type="button" class="diag-option" data-field="necesidad" data-value="contenido" aria-pressed="false">Contenido</button>
            <button type="button" class="diag-option" data-field="necesidad" data-value="web" aria-pressed="false">Web</button>
            <button type="button" class="diag-option" data-field="necesidad" data-value="captacion" aria-pressed="false">Captación de clientes</button>
            <button type="button" class="diag-option" data-field="necesidad" data-value="automatizacion" aria-pressed="false">Automatización</button>
            <button type="button" class="diag-option" data-field="necesidad" data-value="varias" aria-pressed="false">Varias cosas</button>
          </div>
        </div>

        <div class="diag-step" data-step="etapa">
          <h4 style="text-align:left;">¿En qué etapa está tu negocio?</h4>
          <div class="diag-options">
            <button type="button" class="diag-option" data-field="etapa" data-value="comenzando" aria-pressed="false">Estoy empezando</button>
            <button type="button" class="diag-option" data-field="etapa" data-value="validando" aria-pressed="false">Ya estoy vendiendo</button>
            <button type="button" class="diag-option" data-field="etapa" data-value="creciendo" aria-pressed="false">Estoy creciendo</button>
            <button type="button" class="diag-option" data-field="etapa" data-value="consolidado" aria-pressed="false">Estoy consolidado</button>
          </div>
          <div class="diag-nav"><button type="button" class="btn btn-secondary" data-action="back">← Volver</button><span></span></div>
        </div>

        <div class="diag-step" data-step="desafio">
          <h4 style="text-align:left;">¿Cuál es hoy tu principal desafío?</h4>
          <div class="diag-options"><!-- se completa dinámicamente según la necesidad --></div>
          <div class="diag-nav"><button type="button" class="btn btn-secondary" data-action="back">← Volver</button><span></span></div>
        </div>

        <div class="diag-step" data-step="objetivo">
          <h4 style="text-align:left;">¿Qué querés conseguir?</h4>
          <div class="diag-options">
            <button type="button" class="diag-option" data-field="objetivo" data-value="vender" aria-pressed="false">Vender más</button>
            <button type="button" class="diag-option" data-field="objetivo" data-value="profesionalizar" aria-pressed="false">Profesionalizar mi imagen</button>
            <button type="button" class="diag-option" data-field="objetivo" data-value="clientes" aria-pressed="false">Generar más clientes</button>
            <button type="button" class="diag-option" data-field="objetivo" data-value="tiempo" aria-pressed="false">Ahorrar tiempo con procesos</button>
            <button type="button" class="diag-option" data-field="objetivo" data-value="referente" aria-pressed="false">Posicionarme como referente</button>
          </div>
          <div class="diag-nav"><button type="button" class="btn btn-secondary" data-action="back">← Volver</button><span></span></div>
        </div>

        <div class="diag-step" data-step="madurez">
          <h4 style="text-align:left;">¿Qué tan desarrollada está tu presencia digital?</h4>
          <div class="diag-options">
            <button type="button" class="diag-option" data-field="madurez" data-value="nula" aria-pressed="false">Nula, recién empiezo</button>
            <button type="button" class="diag-option" data-field="madurez" data-value="basica" aria-pressed="false">Básica (redes o web simple)</button>
            <button type="button" class="diag-option" data-field="madurez" data-value="intermedia" aria-pressed="false">Intermedia, sin estrategia clara</button>
            <button type="button" class="diag-option" data-field="madurez" data-value="avanzada" aria-pressed="false">Avanzada, ya tengo tracción</button>
          </div>
          <div class="diag-nav"><button type="button" class="btn btn-secondary" data-action="back">← Volver</button><span></span></div>
        </div>
      </form>

      <div id="diag-result" class="diag-result" hidden></div>

      <div id="diag-capture" hidden style="margin-top:var(--space-4);">
        <form id="diag-lead-form" class="form-grid two-col">
          <input type="hidden" id="diag-plan-hidden" name="plan">
          <input type="hidden" id="diag-solucion-hidden" name="solucion">
          <div class="field"><label for="d-nombre">Nombre</label><input id="d-nombre" name="nombre" type="text" required></div>
          <div class="field"><label for="d-empresa">Empresa</label><input id="d-empresa" name="empresa" type="text"></div>
          <div class="field"><label for="d-email">Email</label><input id="d-email" name="email" type="email" required></div>
          <div class="field"><label for="d-whatsapp">WhatsApp</label><input id="d-whatsapp" name="whatsapp" type="tel"></div>
          <div class="field full"><button type="submit" class="btn btn-primary" style="justify-content:center;">Quiero hablar con Amor y Roma</button></div>
        </form>
        <div id="diag-confirmation" class="confirmation-box">
          <h4>Recibimos tu diagnóstico.</h4>
          <p style="margin-top:0.6rem; color:var(--text-soft);">Gracias por contarnos sobre tu negocio. En breve nos ponemos en contacto para conversar sobre el próximo paso.</p>
        </div>
        <div style="text-align:center; margin-top:var(--space-2);">
          <button type="button" class="btn btn-secondary" data-action="restart">Volver a empezar</button>
          <button type="button" class="btn btn-secondary" onclick="window.showReview?.()">Revisar mis respuestas</button>
        </div>
      </div>

    </div>
  </section>
</main>

<div id="footer-placeholder"></div>

<a class="whatsapp-float" href="https://wa.me/5491100000000" target="_blank" rel="noopener" aria-label="Escribir por WhatsApp">
  <svg viewBox="0 0 32 32" fill="currentColor" aria-hidden="true"><path d="M16.01 3C9.38 3 4 8.38 4 15.01c0 2.26.61 4.38 1.68 6.2L4 29l7.98-1.64a11.9 11.9 0 004.03.7c6.63 0 12.01-5.38 12.01-12.05C28.02 8.38 22.64 3 16.01 3zm0 21.8c-1.98 0-3.85-.55-5.44-1.5l-.39-.23-4.86 1 1.03-4.72-.25-.4a9.7 9.7 0 01-1.5-5.15c0-5.4 4.39-9.79 9.8-9.79 5.4 0 9.79 4.39 9.79 9.79.01 5.4-4.38 9.79-9.78 10zM21.4 18c-.28-.14-1.66-.82-1.92-.91-.26-.1-.44-.14-.63.14-.19.28-.72.9-.88 1.09-.16.19-.32.2-.6.07-.28-.14-1.17-.43-2.23-1.37-.83-.74-1.38-1.65-1.55-1.93-.16-.28-.02-.43.12-.57.13-.13.28-.33.42-.5.14-.16.19-.28.28-.47.09-.19.05-.35-.02-.5-.07-.14-.63-1.52-.87-2.08-.23-.55-.46-.47-.63-.48h-.54c-.19 0-.5.07-.76.35-.26.28-1 .98-1 2.38 0 1.4 1.02 2.76 1.16 2.95.14.19 2 3.05 4.85 4.27.68.29 1.21.47 1.62.6.68.22 1.3.19 1.79.11.55-.08 1.66-.68 1.9-1.34.24-.66.24-1.22.17-1.34-.07-.12-.25-.19-.53-.33z"/></svg>
</a>

<script src="js/main.js"></script>
<script src="js/diagnostico.js"></script>
</body>
</html>