Files
ayr2026/planes.html
T
2026-09-21 11:08:17 -03:00

514 lines
24 KiB
HTML

<!DOCTYPE html>
<html lang="es" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Planes de gestión de redes sociales de Amor y Roma. Soluciones escalables desde $250.000/mes.">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css">
<title>Planes - Amor y Roma</title>
<link rel="icon" href="/assets/img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style/main.css">
<link rel="stylesheet" href="style/planes.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body>
<div id="fluid-bg" aria-hidden="true">
<canvas id="fluidCanvas"></canvas>
</div>
<div id="menu-container"></div>
<main>
<!-- Sección 1: Hero -->
<section id="planes-hero" class="planes-hero">
<div class="planes-hero-content">
<span class="planes-hero-tag">Planes de Redes Sociales</span>
<h1 class="planes-hero-title">Gestión profesional de tus redes</h1>
<p class="planes-hero-subtitle">Elegí el plan que se adapte a tu etapa de crecimiento. Todos incluyen estrategia, diseño y dirección de arte personalizada.</p>
<a href="#planes-selector" class="btn btn-primary planes-hero-cta">Ver planes disponibles</a>
</div>
</section>
<!-- Sección 2: Selector de planes -->
<section id="planes-selector" class="planes-selector-section">
<div class="planes-selector-container">
<!-- Tabs desktop -->
<div class="planes-tabs" role="tablist" aria-label="Selector de planes">
<button class="plan-tab active" role="tab" aria-selected="true" aria-controls="panel-esencial" data-plan="esencial">
<span class="tab-label">Plan Esencial</span>
<span class="tab-precio">$250k</span>
</button>
<button class="plan-tab" role="tab" aria-selected="false" aria-controls="panel-impulso" data-plan="impulso">
<span class="tab-label">Plan Impulso</span>
<span class="tab-precio">$420k</span>
</button>
<button class="plan-tab" role="tab" aria-selected="false" aria-controls="panel-premium" data-plan="premium">
<span class="tab-label">Plan Premium</span>
<span class="tab-precio">$650k</span>
</button>
<button class="plan-tab" role="tab" aria-selected="false" aria-controls="panel-elite" data-plan="elite">
<span class="tab-label">Plan Élite</span>
<span class="tab-precio">$1M</span>
</button>
</div>
<!-- Pills mobile (scroll horizontal) -->
<div class="planes-pills" role="tablist" aria-label="Selector de planes mobile">
<button class="plan-pill active" role="tab" aria-selected="true" aria-controls="panel-esencial" data-plan="esencial">
<span>Esencial</span>
<span class="pill-precio">$250k</span>
</button>
<button class="plan-pill" role="tab" aria-selected="false" aria-controls="panel-impulso" data-plan="impulso">
<span>Impulso</span>
<span class="pill-precio">$420k</span>
</button>
<button class="plan-pill" role="tab" aria-selected="false" aria-controls="panel-premium" data-plan="premium">
<span>Premium</span>
<span class="pill-precio">$650k</span>
</button>
<button class="plan-pill" role="tab" aria-selected="false" aria-controls="panel-elite" data-plan="elite">
<span>Élite</span>
<span class="pill-precio">$1M</span>
</button>
</div>
</div>
</section>
<!-- Sección 3: Panel de contenido dinámico -->
<section id="planes-panel" class="planes-panel-section">
<div class="planes-panel-container">
<!-- Panel: Plan Esencial -->
<div class="plan-panel active" id="panel-esencial" role="tabpanel" data-plan="esencial">
<div class="panel-header">
<span class="panel-categoria">Para emprendedores iniciales</span>
<h2 class="panel-titulo">Plan Esencial</h2>
<p class="panel-subtitulo">Ordená y profesionalizá tu imagen digital con una presencia activa y coherente.</p>
</div>
<div class="panel-grid-dimensiones">
<!-- Dimensión 1: Contenido -->
<div class="dimension-card">
<h3 class="dimension-titulo"><i class="fas fa-images"></i> Generación de Contenido</h3>
<ul class="dimension-lista">
<li><i class="fas fa-check"></i> 8 piezas gráficas/carruseles mensuales</li>
<li><i class="fas fa-check"></i> 4 historias estratégicas por semana</li>
<li><i class="fas fa-check"></i> Dirección de arte básica</li>
</ul>
</div>
<!-- Dimensión 2: Copywriting -->
<div class="dimension-card">
<h3 class="dimension-titulo"><i class="fas fa-pen-fancy"></i> Copywriting & Arte</h3>
<ul class="dimension-lista">
<li><i class="fas fa-check"></i> Guías de estilo básicas</li>
<li><i class="fas fa-check"></i> Redacción de copys directos</li>
<li><i class="fas fa-check"></i> Identidad visual coherente</li>
</ul>
</div>
<!-- Dimensión 3: Automatizaciones -->
<div class="dimension-card">
<h3 class="dimension-titulo"><i class="fas fa-robot"></i> Automatizaciones</h3>
<ul class="dimension-lista">
<li><i class="fas fa-check"></i> Configuración de respuestas automáticas</li>
<li><i class="fas fa-check"></i> FAQ en DM</li>
<li><i class="fas fa-times"></i> Flujos avanzados no incluidos</li>
</ul>
</div>
<!-- Dimensión 4: Paid Media -->
<div class="dimension-card">
<h3 class="dimension-titulo"><i class="fas fa-bullhorn"></i> Paid Media (Ads)</h3>
<ul class="dimension-lista">
<li><i class="fas fa-times"></i> No incluye (orgánico puro)</li>
<li><i class="fas fa-info-circle"></i> Disponible como add-on</li>
</ul>
</div>
<!-- Dimensión 5: Gestión -->
<div class="dimension-card">
<h3 class="dimension-titulo"><i class="fas fa-calendar-check"></i> Gestión y Moderación</h3>
<ul class="dimension-lista">
<li><i class="fas fa-check"></i> Programación de contenido</li>
<li><i class="fas fa-check"></i> Publicación en horarios óptimos</li>
<li><i class="fas fa-times"></i> Moderación de comunidad no incluida</li>
</ul>
</div>
<!-- Dimensión 6: Reportes -->
<div class="dimension-card">
<h3 class="dimension-titulo"><i class="fas fa-chart-bar"></i> Reportes y Feedback</h3>
<ul class="dimension-lista">
<li><i class="fas fa-check"></i> Reporte mensual cuantitativo automatizado</li>
<li><i class="fas fa-check"></i> Métricas básicas de alcance e interacción</li>
</ul>
</div>
</div>
<!-- Tarjeta de Precio -->
<div class="panel-precio-card">
<div class="precio-header">
<span class="precio-label">Inversión mensual</span>
<div class="precio-valor">
<span class="precio-moneda">$</span>
<span class="precio-monto">250.000</span>
<span class="precio-periodo">/mes</span>
</div>
</div>
<a href="contacto.html?plan=esencial" class="btn btn-primary btn-contratar">Contratar este plan</a>
</div>
</div>
<!-- Panel: Plan Impulso -->
<div class="plan-panel" id="panel-impulso" role="tabpanel" data-plan="impulso">
<div class="panel-header">
<span class="panel-categoria">Para pequeños negocios en validación</span>
<h2 class="panel-titulo">Plan Impulso</h2>
<p class="panel-subtitulo">Crecé tu comunidad y generá engagement mediante formatos dinámicos y contenido persuasivo.</p>
</div>
<div class="panel-grid-dimensiones">
<div class="dimension-card">
<h3 class="dimension-titulo"><i class="fas fa-images"> </i>Generación de Contenido</h3>
<ul class="dimension-lista">
<li><i class="fas fa-check"></i> 8 piezas gráficas/carruseles mensuales</li>
<li><i class="fas fa-check"></i> 4 Reels/TikToks producidos</li>
<li><i class="fas fa-check"></i> 6 historias estratégicas por semana</li>
</ul>
</div>
<div class="dimension-card">
<h3 class="dimension-titulo"><i class="fas fa-pen-fancy"> </i>Copywriting & Arte</h3>
<ul class="dimension-lista">
<li><i class="fas fa-check"></i> Copywriting persuasivo</li>
<li><i class="fas fa-check"></i> Dirección de arte personalizada</li>
<li><i class="fas fa-check"></i> Guiones de video básicos</li>
</ul>
</div>
<div class="dimension-card">
<h3 class="dimension-titulo"><i class="fas fa-robot"></i> Automatizaciones</h3>
<ul class="dimension-lista">
<li><i class="fas fa-check"></i> Flujo automatizado de bienvenida</li>
<li><i class="fas fa-check"></i> Derivación a WhatsApp</li>
<li><i class="fas fa-times"></i> Cualificación avanzada no incluida</li>
</ul>
</div>
<div class="dimension-card">
<h3 class="dimension-titulo"><i class="fas fa-bullhorn"></i> Paid Media (Ads)</h3>
<ul class="dimension-lista">
<li><i class="fas fa-check"></i> Configuración de 1 campaña</li>
<li><i class="fas fa-check"></i> Tráfico o alcance local</li>
<li><i class="fas fa-check"></i> Monitoreo básico</li>
</ul>
</div>
<div class="dimension-card">
<h3 class="dimension-titulo"><i class="fas fa-calendar-check"></i> Gestión y Moderación</h3>
<ul class="dimension-lista">
<li><i class="fas fa-check"></i> Programación de contenido</li>
<li><i class="fas fa-check"></i> Moderación de comentarios y DMs</li>
<li><i class="fas fa-check"></i> Horarios comerciales</li>
</ul>
</div>
<div class="dimension-card">
<h3 class="dimension-titulo"><i class="fas fa-chart-bar"></i> Reportes y Feedback</h3>
<ul class="dimension-lista">
<li><i class="fas fa-check"></i> Reporte mensual con análisis básico</li>
<li><i class="fas fa-check"></i> Métricas clave de engagement</li>
</ul>
</div>
</div>
<div class="panel-precio-card">
<div class="precio-header">
<span class="precio-label">Inversión mensual</span>
<div class="precio-valor">
<span class="precio-moneda">$</span>
<span class="precio-monto">420.000</span>
<span class="precio-periodo">/mes</span>
</div>
</div>
<a href="contacto.html?plan=impulso" class="btn btn-primary btn-contratar">Contratar este plan</a>
</div>
</div>
<!-- Panel: Plan Premium -->
<div class="plan-panel" id="panel-premium" role="tabpanel" data-plan="premium">
<div class="panel-header">
<span class="panel-categoria">Para PyMEs con tracción comercial</span>
<h2 class="panel-titulo">Plan Premium</h2>
<p class="panel-subtitulo">Posicionate como referente en tu sector con contenido de alta producción y estrategia de conversión.</p>
</div>
<div class="panel-grid-dimensiones">
<div class="dimension-card">
<h3 class="dimension-titulo"><i class="fas fa-images"></i> Generación de Contenido</h3>
<ul class="dimension-lista">
<li><i class="fas fa-check"></i> 10 piezas gráficas/carruseles mensuales</li>
<li><i class="fas fa-check"></i> 8 Reels/TikToks producidos</li>
<li><i class="fas fa-check"></i> Historias diarias (días hábiles)</li>
</ul>
</div>
<div class="dimension-card">
<h3 class="dimension-titulo"><i class="fas fa-pen-fancy"></i> Copywriting & Arte</h3>
<ul class="dimension-lista">
<li><i class="fas fa-check"></i> Storytelling avanzado</li>
<li><i class="fas fa-check"></i> Guiones de video profesionales</li>
<li><i class="fas fa-check"></i> Diseño editorial premium</li>
</ul>
</div>
<div class="dimension-card">
<h3 class="dimension-titulo"><i class="fas fa-robot"></i> Automatizaciones</h3>
<ul class="dimension-lista">
<li><i class="fas fa-check"></i> Flujos de cualificación de leads</li>
<li><i class="fas fa-check"></i> Integración básica a base de datos</li>
<li><i class="fas fa-check"></i> Respuestas por palabras clave</li>
</ul>
</div>
<div class="dimension-card">
<h3 class="dimension-titulo"><i class="fas fa-bullhorn"></i> Paid Media (Ads)</h3>
<ul class="dimension-lista">
<li><i class="fas fa-check"></i> Gestión y optimización de campañas</li>
<li><i class="fas fa-check"></i> Conversión y captación de prospectos</li>
<li><i class="fas fa-check"></i> A/B testing de creatividades</li>
</ul>
</div>
<div class="dimension-card">
<h3 class="dimension-titulo"><i class="fas fa-calendar-check"></i> Gestión y Moderación</h3>
<ul class="dimension-lista">
<li><i class="fas fa-check"></i> Moderación activa de comunidad</li>
<li><i class="fas fa-check"></i> Gestión de consultas comerciales</li>
<li><i class="fas fa-check"></i> Respuesta en menos de 24hs</li>
</ul>
</div>
<div class="dimension-card">
<h3 class="dimension-titulo"><i class="fas fa-chart-bar"></i> Reportes y Feedback</h3>
<ul class="dimension-lista">
<li><i class="fas fa-check"></i> Reporte mensual cualitativo</li>
<li><i class="fas fa-check"></i> Reunión de alineación estratégica (30 min)</li>
<li><i class="fas fa-check"></i> Análisis de ROI y recomendaciones</li>
</ul>
</div>
</div>
<div class="panel-precio-card">
<div class="precio-header">
<span class="precio-label">Inversión mensual</span>
<div class="precio-valor">
<span class="precio-moneda">$</span>
<span class="precio-monto">650.000</span>
<span class="precio-periodo">/mes</span>
</div>
</div>
<a href="contacto.html?plan=premium" class="btn btn-primary btn-contratar">Contratar este plan</a>
</div>
</div>
<!-- Panel: Plan Élite -->
<div class="plan-panel" id="panel-elite" role="tabpanel" data-plan="elite">
<div class="panel-header">
<span class="panel-categoria">Para empresas medianas consolidadas</span>
<h2 class="panel-titulo">Plan Élite</h2>
<p class="panel-subtitulo">Liderazgo de mercado, dirección de arte exclusiva y embudo publicitario avanzado multicanal.</p>
</div>
<div class="panel-grid-dimensiones">
<div class="dimension-card">
<h3 class="dimension-titulo"><i class="fas fa-images"></i> Generación de Contenido</h3>
<ul class="dimension-lista">
<li><i class="fas fa-check"></i> 12 piezas gráficas/carruseles premium</li>
<li><i class="fas fa-check"></i> 12 Reels/TikToks de alta producción</li>
<li><i class="fas fa-check"></i> Cobertura diaria integral de historias</li>
</ul>
</div>
<div class="dimension-card">
<h3 class="dimension-titulo"><i class="fas fa-pen-fancy"></i> Copywriting & Arte</h3>
<ul class="dimension-lista">
<li><i class="fas fa-check"></i> Dirección creativa y de arte exclusiva</li>
<li><i class="fas fa-check"></i> Guiones con ganchos de alta retención</li>
<li><i class="fas fa-check"></i> Producción audiovisual profesional</li>
</ul>
</div>
<div class="dimension-card">
<h3 class="dimension-titulo"><i class="fas fa-robot"></i> Automatizaciones</h3>
<ul class="dimension-lista">
<li><i class="fas fa-check"></i> Automatizaciones avanzadas multi-paso</li>
<li><i class="fas fa-check"></i> Etiquetado de leads</li>
<li><i class="fas fa-check"></i> Seguimiento CRM integrado</li>
</ul>
</div>
<div class="dimension-card">
<h3 class="dimension-titulo"><i class="fas fa-bullhorn"></i> Paid Media (Ads)</h3>
<ul class="dimension-lista">
<li><i class="fas fa-check"></i> Gestión integral de embudo completo</li>
<li><i class="fas fa-check"></i> Awareness, Retargeting, Conversión</li>
<li><i class="fas fa-check"></i> Meta Ads + Google Ads + TikTok Ads</li>
</ul>
</div>
<div class="dimension-card">
<h3 class="dimension-titulo"><i class="fas fa-calendar-check"></i> Gestión y Moderación</h3>
<ul class="dimension-lista">
<li><i class="fas fa-check"></i> Protocolo prioritario de atención</li>
<li><i class="fas fa-check"></i> Gestión de reputación de marca</li>
<li><i class="fas fa-check"></i> Respuesta en menos de 4hs</li>
</ul>
</div>
<div class="dimension-card">
<h3 class="dimension-titulo"><i class="fas fa-chart-bar"></i> Reportes y Feedback</h3>
<ul class="dimension-lista">
<li><i class="fas fa-check"></i> Dashboard en tiempo real</li>
<li><i class="fas fa-check"></i> Reunión mensual ejecutiva</li>
<li><i class="fas fa-check"></i> Insights de ROI y KPIs avanzados</li>
</ul>
</div>
</div>
<div class="panel-precio-card">
<div class="precio-header">
<span class="precio-label">Inversión mensual</span>
<div class="precio-valor">
<span class="precio-moneda">$</span>
<span class="precio-monto">1.000.000</span>
<span class="precio-periodo">/mes</span>
</div>
</div>
<a href="contacto.html?plan=elite" class="btn btn-primary btn-contratar">Contratar este plan</a>
</div>
</div>
</div>
</section>
<!-- Sección 4: Tabla Comparativa -->
<section id="planes-comparativa" class="planes-comparativa-section">
<div class="comparativa-container">
<div class="comparativa-header">
<h2 class="comparativa-titulo">Compará los planes</h2>
<p class="comparativa-subtitulo">Encontrá el plan perfecto para tu negocio</p>
</div>
<div class="comparativa-table-wrapper">
<table class="comparativa-table">
<thead>
<tr>
<th class="col-caracteristica">Característica</th>
<th class="col-plan">Esencial</th>
<th class="col-plan">Impulso</th>
<th class="col-plan">Premium</th>
<th class="col-plan">Élite</th>
</tr>
</thead>
<tbody>
<tr>
<td class="caracteristica-nombre">Piezas gráficas/mes</td>
<td>8</td>
<td>8</td>
<td>10</td>
<td>12</td>
</tr>
<tr>
<td class="caracteristica-nombre">Reels/TikToks</td>
<td><i class="fas fa-times"></i></td>
<td>4</td>
<td>8</td>
<td>12</td>
</tr>
<tr>
<td class="caracteristica-nombre">Historias/semana</td>
<td>4</td>
<td>6</td>
<td>Daily</td>
<td>Daily+</td>
</tr>
<tr>
<td class="caracteristica-nombre">Copywriting</td>
<td>Básico</td>
<td>Persuasivo</td>
<td>Storytelling</td>
<td>Exclusivo</td>
</tr>
<tr>
<td class="caracteristica-nombre">Automatizaciones</td>
<td><i class="fas fa-minus"></i></td>
<td>Básicas</td>
<td>Cualificación</td>
<td>Avanzadas</td>
</tr>
<tr>
<td class="caracteristica-nombre">Paid Media (Ads)</td>
<td><i class="fas fa-times"></i></td>
<td>1 campaña</td>
<td><i class="fas fa-check"></i></td>
<td>Multicanal</td>
</tr>
<tr>
<td class="caracteristica-nombre">Moderación</td>
<td><i class="fas fa-times"></i></td>
<td>Comentarios</td>
<td>Activa</td>
<td>Prioritaria</td>
</tr>
<tr>
<td class="caracteristica-nombre">Reportes</td>
<td>Automático</td>
<td>Básico</td>
<td>Cualitativo</td>
<td>Dashboard</td>
</tr>
<tr>
<td class="caracteristica-nombre">Reuniones</td>
<td><i class="fas fa-times"></i></td>
<td><i class="fas fa-times"></i></td>
<td>Mensual 30min</td>
<td>Ejecutiva</td>
</tr>
<tr class="row-precio">
<td class="caracteristica-nombre">Inversión</td>
<td class="precio-celda">$250k</td>
<td class="precio-celda">$420k</td>
<td class="precio-celda">$650k</td>
<td class="precio-celda">$1M</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Sección 5: CTA Final -->
<section class="planes-cta">
<div class="planes-cta-card">
<h2 class="planes-cta-titulo">¿No sabés cuál plan elegir?</h2>
<p class="planes-cta-subtitle">Contanos sobre tu negocio y te recomendamos el plan ideal según tus objetivos y presupuesto.</p>
<div class="planes-cta-buttons">
<a href="contacto.html" class="btn btn-cta-primary">Asesoramiento gratuito</a>
<a href="index.html#diagnostico" class="btn btn-cta-secondary">Hacé el diagnóstico</a>
</div>
</div>
</section>
<!-- Sección 6: Espacio de cierre -->
<section class="planes-cierre"></section>
</main>
<div id="footer-container"></div>
<script src="scripts/main.js"></script>
<script src="scripts/planes.js"></script>
<script src="scripts/fluid.js"></script>
</body>
</html>