new_amoryroma/contacto.html

<!DOCTYPE html>
<html lang="es-AR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contacto — Amor y Roma</title>
<meta name="description" content="Hablemos de tu próximo proyecto. Escribinos por formulario o WhatsApp.">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>

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

<main>

  <section class="section-tight">
    <div class="container">
      <p class="eyebrow">CONTACTO</p>
      <h1 style="font-size:var(--step-3); max-width:16ch;"><span class="grad-word">Hablemos</span> de tu próximo proyecto.</h1>
    </div>
  </section>

  <section class="section-tight" style="padding-top:0;">
    <div class="container grid grid-2">
      <div>
        <form id="contact-form" class="form-grid">
          <div class="field full">
            <label for="c-motivo">Motivo de contacto</label>
            <select id="c-motivo" name="motivo">
              <option value="servicios">Quiero conocer los servicios</option>
              <option value="diagnostico">Quiero una valoración / diagnóstico</option>
              <option value="presupuesto">Quiero solicitar presupuesto</option>
              <option value="plan">Quiero contratar un plan</option>
              <option value="web">Quiero consultar por desarrollo web</option>
              <option value="otro">Otro</option>
            </select>
          </div>
          <div class="field"><label for="c-nombre">Nombre</label><input id="c-nombre" name="nombre" type="text" required></div>
          <div class="field"><label for="c-empresa">Empresa</label><input id="c-empresa" name="empresa" type="text"></div>
          <div class="field"><label for="c-email">Email</label><input id="c-email" name="email" type="email" required></div>
          <div class="field"><label for="c-whatsapp">WhatsApp</label><input id="c-whatsapp" name="whatsapp" type="tel"></div>
          <div class="field full"><label for="c-mensaje">Mensaje</label><textarea id="c-mensaje" name="mensaje" rows="4"></textarea></div>
          <div class="field full"><button type="submit" class="btn btn-primary" style="justify-content:center;">Enviar mensaje</button></div>
        </form>
        <div id="contact-confirmation" class="confirmation-box">
          <h4>Recibimos tu mensaje.</h4>
          <p style="margin-top:0.6rem; color:var(--text-soft);">Gracias por contactarte con Amor y Roma. En breve nos pondremos en contacto para continuar la conversación.</p>
        </div>
      </div>

      <div class="stack gap-3">
        <div class="card">
          <h4 style="font-size:1.1rem;">¿Preferís hablar directamente?</h4>
          <a href="https://wa.me/5491100000000" target="_blank" rel="noopener" class="btn btn-primary" style="margin-top:1rem;">Escribir por WhatsApp</a>
        </div>
        <div class="card">
          <h4 style="font-size:1.1rem;">También podés encontrarnos en</h4>
          <ul style="margin-top:0.8rem; display:flex; flex-direction:column; gap:0.5rem; font-family:var(--font-small); font-size:0.92rem;">
            <li><a href="https://instagram.com/amoryroma" target="_blank" rel="noopener">Instagram</a></li>
            <li><a href="https://facebook.com/amoryroma" target="_blank" rel="noopener">Facebook</a></li>
            <li><a href="https://linkedin.com/company/amoryroma" target="_blank" rel="noopener">LinkedIn</a></li>
          </ul>
          <p style="margin-top:1rem; font-size:0.8rem; color:var(--text-soft);">* Datos de contacto de prueba — reemplazar antes de publicar.</p>
        </div>
        <div class="card">
          <h4 style="font-size:1.1rem;">Qué ocurre después</h4>
          <ol style="margin-top:0.8rem; display:flex; flex-direction:column; gap:0.6rem; font-family:var(--font-small); font-size:0.9rem; color:var(--text-soft);">
            <li><strong style="color:var(--accent-amor);">01</strong> Recibimos tu consulta</li>
            <li><strong style="color:var(--accent-amor);">02</strong> Entendemos tu necesidad</li>
            <li><strong style="color:var(--accent-amor);">03</strong> Evaluamos la mejor solución</li>
            <li><strong style="color:var(--accent-amor);">04</strong> Coordinamos una conversación</li>
          </ol>
        </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/contacto.js"></script>
<script>
  // Prefill "motivo" si llega ?plan=xxx desde Planes
  const p = new URLSearchParams(location.search).get('plan');
  if (p) {
    const sel = document.getElementById('c-motivo');
    if (sel) sel.value = 'plan';
    const msg = document.getElementById('c-mensaje');
    if (msg) msg.value = `Me interesa el plan: ${p}`;
  }
</script>
</body>
</html>