new_amoryroma/planes.html

<!DOCTYPE html>
<html lang="es-AR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Planes — Amor y Roma</title>
<meta name="description" content="Plan Esencial, Impulso, Premium y Élite. Planes recurrentes de redes sociales y contenido para cada etapa de tu negocio.">
<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">PLANES RECURRENTES</p>
      <h1 style="font-size:var(--step-4); max-width:30ch;">Distintos negocios. <br>Distintas etapas. <br>Un mismo objetivo: <span class="grad-word">crecer</span></h1>
      <p class="lede" style="margin-top:1rem;">Los cuatro planes acompañan diferentes niveles de madurez. Hacé clic en una tarjeta para ver el detalle completo.</p>
      <p style="margin-top:0.6rem; font-size:0.82rem; color:var(--text-soft);">* Precios de referencia (placeholder) — a confirmar antes de publicar.</p>
    </div>
  </section>

  <section class="section-tight">
    <div class="container">
      <div class="grid grid-4">

        <article class="plan-card" data-plan-trigger tabindex="0">
          <div>
            <h4 style="font-style:normal; font-family:var(--font-small); letter-spacing:0.02em;">Esencial</h4>
            <p class="price">Desde $45.000</p>
            <p style="color:var(--text-soft); font-size:0.88rem; margin-top:0.4rem;">Emprendedores iniciales que buscan ordenar y profesionalizar su imagen.</p>
          </div>
          <div class="details">
            <dl>
              <dt>Contenido</dt><dd>8 piezas/carruseles · 4 historias/semana</dd>
              <dt>Copywriting</dt><dd>Guías de estilo básicas y copys directos</dd>
              <dt>Automatización</dt><dd>Respuestas automáticas (FAQ en DM)</dd>
              <dt>Paid Media</dt><dd>No incluido (orgánico puro)</dd>
              <dt>Gestión</dt><dd>Programación de contenido</dd>
              <dt>Reportes</dt><dd>Mensual cuantitativo automatizado</dd>
            </dl>
            <a href="contacto.html?plan=esencial" class="btn btn-primary" style="width:100%; justify-content:center;">Quiero este plan</a>
          </div>
        </article>

        <article class="plan-card" data-plan-trigger tabindex="0">
          <div>
            <h4 style="font-style:normal; font-family:var(--font-small); letter-spacing:0.02em;">Impulso</h4>
            <p class="price">Desde $75.000</p>
            <p style="color:var(--text-soft); font-size:0.88rem; margin-top:0.4rem;">Pequeños negocios en etapa de validación y captación activa.</p>
          </div>
          <div class="details">
            <dl>
              <dt>Contenido</dt><dd>8 piezas · 4 Reels/TikToks · 6 historias/semana</dd>
              <dt>Copywriting</dt><dd>Persuasivo, con dirección de arte personalizada</dd>
              <dt>Automatización</dt><dd>Bienvenida + derivación a WhatsApp</dd>
              <dt>Paid Media</dt><dd>1 campaña de tráfico o alcance local</dd>
              <dt>Gestión</dt><dd>Moderación en horario comercial</dd>
              <dt>Reportes</dt><dd>Mensual con análisis de métricas clave</dd>
            </dl>
            <a href="contacto.html?plan=impulso" class="btn btn-primary" style="width:100%; justify-content:center;">Quiero este plan</a>
          </div>
        </article>

        <article class="plan-card" data-plan-trigger tabindex="0" data-featured="true">
          <div>
            <h4 style="font-style:normal; font-family:var(--font-small); letter-spacing:0.02em; color:var(--accent-amor);">Premium ★</h4>
            <p class="price">Desde $120.000</p>
            <p style="color:var(--text-soft); font-size:0.88rem; margin-top:0.4rem;">PyMEs con tracción comercial que buscan posicionamiento y flujo continuo.</p>
          </div>
          <div class="details">
            <dl>
              <dt>Contenido</dt><dd>10 piezas · 8 Reels/TikToks · historias diarias</dd>
              <dt>Copywriting</dt><dd>Storytelling avanzado y diseño editorial</dd>
              <dt>Automatización</dt><dd>Cualificación de leads + base de datos</dd>
              <dt>Paid Media</dt><dd>Gestión y optimización de conversión</dd>
              <dt>Gestión</dt><dd>Moderación activa de comunidad</dd>
              <dt>Reportes</dt><dd>Cualitativo + reunión de alineación (30 min)</dd>
            </dl>
            <a href="contacto.html?plan=premium" class="btn btn-primary" style="width:100%; justify-content:center;">Quiero este plan</a>
          </div>
        </article>

        <article class="plan-card" data-plan-trigger tabindex="0">
          <div>
            <h4 style="font-style:normal; font-family:var(--font-small); letter-spacing:0.02em;">Élite</h4>
            <p class="price">Desde $190.000</p>
            <p style="color:var(--text-soft); font-size:0.88rem; margin-top:0.4rem;">Empresas consolidadas que exigen liderazgo de marca y omnicanalidad.</p>
          </div>
          <div class="details">
            <dl>
              <dt>Contenido</dt><dd>12 piezas premium · 12 Reels alta producción</dd>
              <dt>Copywriting</dt><dd>Dirección creativa exclusiva y ganchos de retención</dd>
              <dt>Automatización</dt><dd>Multi-paso, etiquetado de leads y CRM</dd>
              <dt>Paid Media</dt><dd>Embudo completo (awareness, retargeting, conversión)</dd>
              <dt>Gestión</dt><dd>Protocolo prioritario y gestión de reputación</dd>
              <dt>Reportes</dt><dd>Dashboard en tiempo real + reunión ejecutiva</dd>
            </dl>
            <a href="contacto.html?plan=elite" class="btn btn-primary" style="width:100%; justify-content:center;">Quiero este plan</a>
          </div>
        </article>

      </div>

      <div style="text-align:center; margin-top:var(--space-4);">
        <a href="diagnostico.html" class="btn btn-ghost">No sé cuál elegir →</a>
      </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/planes.js"></script>
</body>
</html>