Files
2026-09-21 11:08:17 -03:00

542 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="">
<link rel="icon" href="/assets/img/favicon.ico" type="image/x-icon">
<title>Inicio - A&R</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css">
<link rel="stylesheet" href="style/main.css">
</head>
<body>
<div id="fluid-bg" aria-hidden="true">
<canvas id="fluidCanvas"></canvas>
</div>
<div id="menu-container"></div>
<main>
<!-- Sección Hero -->
<section id="hero" class="hero-section">
<div class="hero-content">
<span class="badge-filosofia">Agencia Boutique de Marketing Digital</span>
<h1 class="hero-title">En un mundo de ruido, solo lo auténtico resuena</h1>
<p class="hero-subtitle">Combinamos el instinto creativo con la ingeniería de procesos para desarrollar tu identidad, sitio web y automatizaciones. <br>Porque lo auténtico, cuando está bien construido, siempre deja eco.</p>
<div class="hero-cta-group">
<a href="contacto.html" class="btn btn-primary hero-cta-primary">Hablemos</a>
<a href="index.html#servicios" class="btn btn-secondary hero-cta-secondary">Conocé más</a>
</div>
</div>
</section>
<!-- Sección 2: Servicios -->
<section id="servicios" class="servicios-section">
<div class="servicios-container">
<!-- Columna Izquierda: Texto introductorio -->
<div class="servicios-intro">
<h2 class="servicios-title">Soluciones digitales diseñadas para hacer crecer tu negocio</h2>
<p class="servicios-subtitle">Podemos potenciar tu marca en cada etapa de su crecimiento.</p>
<a href="servicios.html" class="btn btn-secondary">Ver todos los servicios</a>
</div>
<!-- Columna Derecha: Acordeón interactivo -->
<div class="servicios-accordion" id="servicios-accordion">
<!-- Item 1 -->
<div class="servicio-item" data-index="0">
<div class="servicio-header">
<span class="servicio-icon icon-branding" aria-hidden="true"></span>
<h3 class="servicio-title-short">Construir una marca</h3>
</div>
<div class="servicio-content">
<span class="servicio-icon-large icon-branding" aria-hidden="true"></span>
<h3 class="servicio-title-long">Construcción de Identidad Estratégica</h3>
<p class="servicio-description">Definimos el ADN de tu marca, su posicionamiento y el camino para conectar con tu audiencia ideal de manera auténtica y memorable.</p>
<a href="servicios.html#estrategia" class="btn btn-primary">Conocer más</a>
<button class="servicio-close" aria-label="Cerrar">✕</button>
</div>
</div>
<!-- Item 2 -->
<div class="servicio-item" data-index="1">
<div class="servicio-header">
<span class="servicio-icon icon-rrss" aria-hidden="true"></span>
<h3 class="servicio-title-short">Mejorar presencia digital</h3>
</div>
<div class="servicio-content">
<span class="servicio-icon-large icon-rrss" aria-hidden="true"></span>
<h3 class="servicio-title-long">Comunidades que Convierten</h3>
<p class="servicio-description">Creamos contenido de valor y gestionamos tus redes para construir una comunidad activa, fiel y comprometida con tu marca.</p>
<a href="servicios.html#redes" class="btn btn-primary">Conocer más</a>
<button class="servicio-close" aria-label="Cerrar">✕</button>
</div>
</div>
<!-- Item 3 -->
<div class="servicio-item" data-index="2">
<div class="servicio-header">
<span class="servicio-icon icon-web" aria-hidden="true"></span>
<h3 class="servicio-title-short">Generar Contenido</h3>
</div>
<div class="servicio-content">
<span class="servicio-icon-large icon-web" aria-hidden="true"></span>
<h3 class="servicio-title-long">Experiencias Digitales Impactantes</h3>
<p class="servicio-description">Diseñamos y desarrollamos sitios web y plataformas digitales que no solo se ven bien, sino que generan resultados tangibles.</p>
<a href="servicios.html#digital" class="btn btn-primary">Conocer más</a>
<button class="servicio-close" aria-label="Cerrar">✕</button>
</div>
</div>
<!-- Item 4 -->
<div class="servicio-item" data-index="3">
<div class="servicio-header">
<span class="servicio-icon icon-auto" aria-hidden="true"></span>
<h3 class="servicio-title-short">Automatizar procesos</h3>
</div>
<div class="servicio-content">
<span class="servicio-icon-large icon-auto" aria-hidden="true"></span>
<h3 class="servicio-title-long">Historias que Enamoran</h3>
<p class="servicio-description">Producimos contenido audiovisual y gráfico de alta calidad que cuenta la historia de tu marca y cautiva a tu audiencia.</p>
<a href="servicios.html#contenido" class="btn btn-primary">Conocer más</a>
<button class="servicio-close" aria-label="Cerrar">✕</button>
</div>
</div>
<!-- Item 5 -->
<div class="servicio-item" data-index="4">
<div class="servicio-header">
<span class="servicio-icon icon-paid" aria-hidden="true"></span>
<h3 class="servicio-title-short">Conseguir más clientes</h3>
</div>
<div class="servicio-content">
<span class="servicio-icon-large icon-paid" aria-hidden="true"></span>
<h3 class="servicio-title-long">Campañas que Escalan Resultados</h3>
<p class="servicio-description">Gestionamos campañas de paid media en Meta, Google y LinkedIn para maximizar tu ROI y alcanzar a los clientes correctos.</p>
<a href="servicios.html#pauta" class="btn btn-primary">Conocer más</a>
<button class="servicio-close" aria-label="Cerrar">✕</button>
</div>
</div>
<!-- Item 6 -->
<div class="servicio-item" data-index="5">
<div class="servicio-header">
<span class="servicio-icon icon-add" aria-hidden="true"></span>
<h3 class="servicio-title-short">Consultoría de Marketing</h3>
</div>
<div class="servicio-content">
<span class="servicio-icon-large icon-add" aria-hidden="true"></span>
<h3 class="servicio-title-long">Asesoramiento Estratégico Integral</h3>
<p class="servicio-description">Te acompañamos en la toma de decisiones clave, optimizando tus recursos y alineando tu marketing con los objetivos de tu negocio.</p>
<a href="servicios.html#consultoria" class="btn btn-primary">Conocer más</a>
<button class="servicio-close" aria-label="Cerrar">✕</button>
</div>
</div>
</div>
</div>
</section>
<!-- Sección 3: Diagnóstico -->
<section id="diagnostico" class="diagnostico-section">
<div class="diagnostico-header">
<h2 class="diagnostico-title">¿Cuál es el siguiente paso estratégico para tu negocio?</h2>
<p class="diagnostico-subtitle">Un recorrido de orientación diseñado para entender el momento actual de tu marca, y definir con precisión quirúrgica la solución que necesitás.</p>
</div>
<div class="diagnostico-card">
<!-- PANTALLA DE BIENVENIDA (visible al inicio) -->
<div id="diagnostico-bienvenida" class="diagnostico-bienvenida">
<div class="bienvenida-icono">
<span class="icono-diagnostico" aria-hidden="true"></span>
</div>
<h3 class="bienvenida-titulo">Diagnóstico Express</h3>
<p class="bienvenida-texto">
Respondé 4 preguntas rápidas y te vamos a recomendar el servicio ideal para el momento en que está tu marca.
</p>
<ul class="bienvenida-detalles">
<li><span class="detalle-icono"></span><i class="fa-regular fa-alarm-clock"></i> 2 minutos</li>
<li><span class="detalle-icono"></span><i class="fa-solid fa-bullseye"></i> Recomendación personalizada</li>
<li><span class="detalle-icono"></span><i class="fa-regular fa-comment-dots"></i> Sin compromiso</li>
</ul>
<button class="btn btn-primary btn-comenzar" id="btn-comenzar">
Comenzar diagnóstico
<span class="btn-arrow" aria-hidden="true">→</span>
</button>
</div>
<!-- CUESTIONARIO (oculto hasta hacer clic en comenzar) -->
<div id="diagnostico-quiz" class="diagnostico-quiz" style="display: none;">
<!-- Barra de Progreso -->
<div class="progreso-wrapper">
<div class="progreso-barra">
<div class="progreso-barra-completado" id="progreso-completado"></div>
</div>
<div class="progreso-texto" id="progreso-texto">Pregunta 1 de 4</div>
</div>
<!-- Contenedor de Preguntas -->
<div id="cuestionario-contenedor" class="cuestionario-contenedor">
<!-- Se genera dinámicamente con JavaScript -->
</div>
</div>
<!-- RESULTADO (oculto inicialmente) -->
<div id="resultado-contenedor" class="resultado-contenedor" style="display: none;">
<!-- Se genera dinámicamente con JavaScript -->
</div>
</div>
</section>
<!-- Sección 4: Metodología -->
<section id="metodologia" class="metodologia-section">
<div class="metodologia-header">
<h2 class="metodologia-title">Método A&R</h2>
<p class="metodologia-subtitle">Calibramos nuestro método para cada cliente. <br>Nuestras decisiones se basan en datos y estrategias.</p>
</div>
<div class="metodologia-grid">
<!-- Paso 1: Contacto -->
<div class="paso-item" data-paso="0">
<div class="paso-arco">
<span class="arco-svg" aria-hidden="true"></span>
<span class="paso-icono icon-contacto" aria-hidden="true"></span>
</div>
<div class="paso-info">
<h3 class="paso-titulo">Contacto</h3>
<p class="paso-subtitulo">Reunión de brief</p>
<p class="paso-body">Entendemos tu negocio <br>y tus objetivos.</p>
</div>
</div>
<!-- Paso 2: Propuesta -->
<div class="paso-item" data-paso="1">
<div class="paso-arco">
<span class="arco-svg" aria-hidden="true"></span>
<span class="paso-icono icon-propuesta" aria-hidden="true"></span>
</div>
<div class="paso-info">
<h3 class="paso-titulo">Propuesta</h3>
<p class="paso-subtitulo">Plan de trabajo</p>
<p class="paso-body">Diseñamos la estrategia, <br> definimos metas.</p>
</div>
</div>
<!-- Paso 3: Diseño -->
<div class="paso-item" data-paso="2">
<div class="paso-arco">
<span class="arco-svg" aria-hidden="true"></span>
<span class="paso-icono icon-diseno" aria-hidden="true"></span>
</div>
<div class="paso-info">
<h3 class="paso-titulo">Diseño</h3>
<p class="paso-subtitulo">Dirección de arte</p>
<p class="paso-body">Concepto visual a tu aprobación.<br> Activamos y monitoreamos.</p>
</div>
</div>
<!-- Paso 4: Producción -->
<div class="paso-item" data-paso="3">
<div class="paso-arco">
<span class="arco-svg" aria-hidden="true"></span>
<span class="paso-icono icon-produccion" aria-hidden="true"></span>
</div>
<div class="paso-info">
<h3 class="paso-titulo">Producción</h3>
<p class="paso-subtitulo">Desarrollo</p>
<p class="paso-body">Construimos con seguimiento.<br> Analizamos y optimizamos.</p>
</div>
</div>
<!-- Paso 5: Revisión -->
<div class="paso-item" data-paso="4">
<div class="paso-arco">
<span class="arco-svg" aria-hidden="true"></span>
<span class="paso-icono icon-revision" aria-hidden="true"></span>
</div>
<div class="paso-info">
<h3 class="paso-titulo">Revisión</h3>
<p class="paso-subtitulo">Feedback</p>
<p class="paso-body">Ajustamos según resultados y <br>aprendizajes del mercado.</p>
</div>
</div>
<!-- Paso 6: Resultado -->
<div class="paso-item" data-paso="5">
<div class="paso-arco">
<span class="arco-svg" aria-hidden="true"></span>
<span class="paso-icono icon-lanzamiento" aria-hidden="true"></span>
</div>
<div class="paso-info">
<h3 class="paso-titulo">Resultado</h3>
<p class="paso-subtitulo">Entrega</p>
<p class="paso-body">Accesos, capacitaciones y definimos próximos pasos.</p>
</div>
</div>
</div>
</section>
<!-- Sección 5: Planes Destacados -->
<section id="planes-destacados" class="planes-section">
<div class="planes-header">
<h2 class="planes-title">Planes destacados</h2>
<p class="planes-subtitle">Soluciones diseñadas para cada etapa de tu marca</p>
</div>
<div class="planes-grid" id="planes-grid">
<!-- Plan 1: Esencial -->
<article class="plan-card" data-plan="esencial">
<div class="plan-header">
<h3 class="plan-title">Plan Esencial</h3>
<p class="plan-subtitle">Para marcas que recién comienzan</p>
</div>
<ul class="plan-features">
<li>Identidad visual básica</li>
<li>Diseño de sitio web institucional</li>
<li>Gestión inicial de redes sociales</li>
<li>Reporte mensual de métricas</li>
</ul>
<div class="plan-tags">
<span class="plan-tag">Branding</span>
<span class="plan-tag">Web</span>
<span class="plan-tag">Redes</span>
</div>
<a href="planes.html#esencial" class="btn btn-secondary plan-cta">Ver plan completo</a>
</article>
<!-- Plan 2: Premium (destacado) -->
<article class="plan-card plan-featured" data-plan="premium">
<div class="plan-badge" aria-label="Plan recomendado">
<svg class="laurel-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2L14 7L19 7L15 10L17 15L12 12L7 15L9 10L5 7L10 7Z"/>
</svg>
<span class="badge-text">Recomendado</span>
</div>
<div class="plan-header">
<h3 class="plan-title">Plan Premium</h3>
<p class="plan-subtitle">Para negocios que quieren escalar</p>
</div>
<ul class="plan-features">
<li>Branding completo y manual de marca</li>
<li>Sitio web + landing de conversión</li>
<li>Producción audiovisual mensual</li>
<li>Campañas de paid media (Meta + Google)</li>
<li>Automatizaciones de WhatsApp</li>
</ul>
<div class="plan-tags">
<span class="plan-tag">Branding</span>
<span class="plan-tag">Web</span>
<span class="plan-tag">Contenido</span>
<span class="plan-tag">Paid Media</span>
<span class="plan-tag">Automatización</span>
</div>
<a href="planes.html#premium" class="btn btn-primary plan-cta">Ver plan completo</a>
</article>
<!-- Plan 3: Corporativo -->
<article class="plan-card" data-plan="corporativo">
<div class="plan-header">
<h3 class="plan-title">Plan Corporativo</h3>
<p class="plan-subtitle">Gestión integral 360°</p>
</div>
<ul class="plan-features">
<li>Dirección creativa y estratégica</li>
<li>Branding integral + packaging</li>
<li>Pauta multicanal (Meta, TikTok, Google)</li>
<li>Reportes quincenales con KPIs</li>
<li>Equipo dedicado a tu marca</li>
</ul>
<div class="plan-tags">
<span class="plan-tag">Estrategia</span>
<span class="plan-tag">Branding</span>
<span class="plan-tag">Paid Media</span>
<span class="plan-tag">KPIs</span>
</div>
<a href="planes.html#corporativo" class="btn btn-secondary plan-cta">Ver plan completo</a>
</article>
</div>
</section>
<!-- Sección 6: Portfolio -->
<section id="portfolio" class="portfolio-section">
<div class="portfolio-container">
<!-- Columna Izquierda: Texto -->
<div class="portfolio-text">
<h2 class="portfolio-title">Nuestros últimos desafíos</h2>
<p class="portfolio-subtitle">Cada proyecto es una oportunidad para crear algo único y memorable</p>
<!--<a href="portfolio.html" class="btn btn-secondary">Ver portfolio completo</a>-->
</div>
<!-- Columna Derecha: Carrusel -->
<div class="portfolio-carousel">
<div class="carousel-container">
<!-- Slide 1 -->
<div class="carousel-slide">
<div class="slide-tags">
<span class="slide-tag">Diseño Web</span>
<span class="slide-tag">Integración de Blog</span>
</div>
<div class="slide-image-wrapper">
<img src="assets/clientes/3_1.png" alt="Ide Consultores" class="carousel-image">
</div>
</div>
<!-- Slide 2 -->
<div class="carousel-slide">
<div class="slide-tags">
<span class="slide-tag">Branding</span>
<span class="slide-tag">Diseño Web</span>
<span class="slide-tag">Redes Sociales</span>
<span class="slide-tag">Contenido Audiovisual</span>
<span class="slide-tag">Paid Media</span>
<span class="slide-tag">Estrategia Digital</span>
<span class="slide-tag">Automatización</span>
</div>
<div class="slide-image-wrapper">
<img src="assets/clientes/4_1.png" alt="VettaIO" class="carousel-image">
</div>
</div>
<!-- Slide 3 -->
<div class="carousel-slide active">
<div class="slide-tags">
<span class="slide-tag">Branding</span>
<span class="slide-tag">Creación de personaje</span>
<span class="slide-tag">Identidad Visual</span>
<span class="slide-tag">Manual de Marca</span>
<span class="slide-tag">Redes Sociales</span>
<span class="slide-tag">Contenido Audiovisual</span>
<span class="slide-tag">Paid Media</span>
<span class="slide-tag">Estrategia Digital</span>
</div>
<div class="slide-image-wrapper">
<img src="assets/clientes/1_1.png" alt="Mordi" class="carousel-image">
</div>
</div>
<!-- Slide 4 -->
<div class="carousel-slide">
<div class="slide-tags">
<span class="slide-tag">Web</span>
<span class="slide-tag">UX/UI</span>
<span class="slide-tag">Apertura de Redes</span>
<span class="slide-tag">SEO</span>
</div>
<div class="slide-image-wrapper">
<img src="assets/clientes/2_1.png" alt="ArWork's" class="carousel-image">
</div>
</div>
<!-- Slide 5 -->
<div class="carousel-slide">
<div class="slide-tags">
<span class="slide-tag">Branding</span>
<span class="slide-tag">Contenido Audiovisual</span>
</div>
<div class="slide-image-wrapper">
<img src="assets/clientes/5_1.png" alt="Coccoline" class="carousel-image">
</div>
</div>
</div>
<div class="carousel-indicators">
<span class="indicator active" data-slide="0"></span>
<span class="indicator" data-slide="1"></span>
<span class="indicator" data-slide="2"></span>
<span class="indicator" data-slide="3"></span>
<span class="indicator" data-slide="4"></span>
</div>
</div>
</div>
<!-- Tira de Iconos (Certificaciones, Herramientas, Marcas) -->
<div class="marquee-section">
<div class="marquee-track" id="marquee-track">
<!-- Primera tanda de iconos -->
<div class="marquee-item">
<span class="marquee-icon icon-google" aria-hidden="true"></span>
</div>
<div class="marquee-item">
<span class="marquee-icon icon-meta" aria-hidden="true"></span>
</div>
<div class="marquee-item">
<span class="marquee-icon icon-openai" aria-hidden="true"></span>
</div>
<div class="marquee-item">
<span class="marquee-icon icon-tiktok" aria-hidden="true"></span>
</div>
<div class="marquee-item">
<span class="marquee-icon icon-wordpress" aria-hidden="true"></span>
</div>
<div class="marquee-item">
<span class="marquee-icon icon-face" aria-hidden="true"></span>
</div>
<div class="marquee-item">
<span class="marquee-icon icon-insta" aria-hidden="true"></span>
</div>
<div class="marquee-item">
<span class="marquee-icon icon-analytics" aria-hidden="true"></span>
</div>
<div class="marquee-item">
<span class="marquee-icon icon-whatsapp" aria-hidden="true"></span>
</div>
<div class="marquee-item">
<span class="marquee-icon icon-googleads" aria-hidden="true"></span>
</div>
<!-- Segunda tanda (duplicada para loop infinito) -->
<div class="marquee-item">
<span class="marquee-icon icon-google" aria-hidden="true"></span>
</div>
<div class="marquee-item">
<span class="marquee-icon icon-meta" aria-hidden="true"></span>
</div>
<div class="marquee-item">
<span class="marquee-icon icon-openai" aria-hidden="true"></span>
</div>
<div class="marquee-item">
<span class="marquee-icon icon-tiktok" aria-hidden="true"></span>
</div>
<div class="marquee-item">
<span class="marquee-icon icon-wordpress" aria-hidden="true"></span>
</div>
<div class="marquee-item">
<span class="marquee-icon icon-face" aria-hidden="true"></span>
</div>
<div class="marquee-item">
<span class="marquee-icon icon-insta" aria-hidden="true"></span>
</div>
<div class="marquee-item">
<span class="marquee-icon icon-analytics" aria-hidden="true"></span>
</div>
<div class="marquee-item">
<span class="marquee-icon icon-whatsapp" aria-hidden="true"></span>
</div>
<div class="marquee-item">
<span class="marquee-icon icon-googleads" aria-hidden="true"></span>
</div>
</div>
</div>
</section>
<!-- Sección 7: CTA Final -->
<section id="cta-final" class="cta-section">
<div class="cta-card">
<h2 class="cta-title">¿Listo para hacer crecer tu marca?</h2>
<p class="cta-subtitle">Contanos tu desafío y diseñemos juntos la estrategia que tu negocio necesita. Sin compromiso, sin vueltas.</p>
<div class="cta-buttons">
<a href="contacto.html" class="btn btn-cta-primary">Hablemos ahora</a>
<a href="servicios.html" class="btn btn-cta-secondary">Conocé nuestros servicios</a>
</div>
</div>
</section>
</main>
<div id="footer-container"></div>
<script src="scripts/main.js"></script>
<script src="scripts/fluid.js"></script>
</body>
</html>