Files
amoryroma/index.html
T
2026-08-21 09:25:01 -03:00

673 lines
36 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amor & Roma — Estudio Creativo</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- ===== CANVAS PARA EFECTO DE HUMO ===== -->
<canvas id="fluidCanvas"></canvas>
<!-- ===== OVERLAY ===== -->
<div class="overlay" id="overlay" onclick="toggleMenu()"></div>
<!-- ===== MENU BOTTOM SHEET ===== -->
<nav class="sheet" id="sheet">
<div class="sheet-handle"></div>
<div class="sheet-top">
<div class="logo">
<a href="index.html">
<img src="logo_ciruela.png" alt="Amor & Roma" class="logo-img">
</a>
</div>
<button class="close-btn" onclick="toggleMenu()">✕</button>
</div>
<div class="sheet-body">
<div class="sheet-col">
<div class="sheet-col-title">Soluciones Web</div>
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
<span class="sheet-link-icon">⊞</span>
<span class="sheet-link-main">Diseño Web</span>
<span class="sheet-link-desc">Sitios informativos modernos</span>
</a>
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
<span class="sheet-link-icon">⊞</span>
<span class="sheet-link-main">E-commerce</span>
<span class="sheet-link-desc">Tiendas online con todas las funcionalidades</span>
</a>
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
<span class="sheet-link-icon">⊞</span>
<span class="sheet-link-main">Google Ads</span>
<span class="sheet-link-desc">Publicidad en Search y Display</span>
</a>
</div>
<div class="sheet-col">
<div class="sheet-col-title">Redes Sociales</div>
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
<span class="sheet-link-icon">⊞</span>
<span class="sheet-link-main">Community Manager</span>
<span class="sheet-link-desc">Administración profesional de redes</span>
</a>
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
<span class="sheet-link-icon">⊞</span>
<span class="sheet-link-main">Creación de Contenido</span>
<span class="sheet-link-desc">Contenido original y atractivo</span>
</a>
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
<span class="sheet-link-icon">⊞</span>
<span class="sheet-link-main">Meta Ads</span>
<span class="sheet-link-desc">Publicidad en Facebook e Instagram</span>
</a>
</div>
<div class="sheet-col">
<div class="sheet-col-title">Branding</div>
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
<span class="sheet-link-icon">⊞</span>
<span class="sheet-link-main">Diseño de Logos</span>
<span class="sheet-link-desc">Personalizados y profesionales</span>
</a>
<a href="#servicios" onclick="toggleMenu()" class="sheet-link">
<span class="sheet-link-icon">⊞</span>
<span class="sheet-link-main">Identidad de Marca</span>
<span class="sheet-link-desc">Creación y desarrollo de marca</span>
</a>
<a href="#contacto" onclick="toggleMenu()" class="sheet-link highlight">
<span class="sheet-link-icon">✉</span>
<span class="sheet-link-main">Contacto</span>
<span class="sheet-link-desc">Empezá tu proyecto</span>
</a>
</div>
</div>
</nav>
<!-- ===== HEADER ===== -->
<header>
<div class="logo">
<img src="logo_frio.png" alt="Amor & Roma" class="logo-img">
</div>
<button class="menu-btn" onclick="toggleMenu()" aria-label="Abrir menú">
<span class="bars"><span></span><span></span><span></span></span>
<span class="menu-label">Menú</span>
</button>
</header>
<!-- ===== HERO ===== -->
<section class="hero" id="inicio">
<div class="hero-content">
<div class="eyebrow">Estudio Creativo · Agencia Boutique</div>
<h1>Marcas con <span class="grad-word">esencia,</span><br>construidas con <span class="grad-word">estrategia.</span></h1>
<p>Branding, diseño web y marketing digital para negocios que quieren crecer sin perder lo que los hace únicos.</p>
<div class="hero-actions">
<a href="#servicios" class="btn btn-solid">Ver servicios</a>
<a href="#contacto" class="btn btn-outline">Contactanos</a>
</div>
</div>
<a href="#servicios" class="home-btn" aria-label="Ir a servicios">✦</a>
<div class="scroll-hint"><div class="line"></div>ScrollDown</div>
</section>
<!-- ===== SERVICIOS ===== -->
<section class="servicios" id="servicios">
<div class="eyebrow">Lo que hacemos</div>
<h2>Servicios pensados para marcas con <span class="grad-word">esencia.</span></h2>
<p class="lede">Cuatro disciplinas que trabajan juntas, no por separado — cada proyecto se arma con la combinación justa para tu marca.</p>
<div class="tabs">
<button class="tab active" onclick="showTab(0,this)"><span class="num">01</span>Branding</button>
<button class="tab" onclick="showTab(1,this)"><span class="num">02</span>Diseño Web</button>
<button class="tab" onclick="showTab(2,this)"><span class="num">03</span>Marketing Digital</button>
<button class="tab" onclick="showTab(3,this)"><span class="num">04</span>IA & Automatización</button>
</div>
<div class="panel active" data-panel="0">
<div class="panel-copy">
<h3>Identidad con <em>alma,</em><br>no solo con estilo.</h3>
<p>Construimos el sistema visual y verbal que sostiene tu marca: desde el naming y el logo hasta el tono de voz con el que hablás en cada canal.</p>
<a href="#contacto" class="btn btn-outline">Quiero mi identidad de marca →</a>
</div>
<div class="panel-list">
<div class="item"><span class="icon-min">✦</span> Naming y concepto de marca</div>
<div class="item"><span class="icon-min">✦</span> Diseño de logo e isotipo</div>
<div class="item"><span class="icon-min">✦</span> Paleta, tipografía y manual de marca</div>
<div class="item"><span class="icon-min">✦</span> Tono de voz y guía de comunicación</div>
</div>
</div>
<div class="panel" data-panel="1">
<div class="panel-copy">
<h3>Sitios que <em>convierten,</em><br>no solo que se ven bien.</h3>
<p>Diseño y desarrollo de sitios web a medida — rápidos, responsivos y pensados para que quien llega, actúe.</p>
<a href="#contacto" class="btn btn-outline">Quiero mi sitio web →</a>
</div>
<div class="panel-list">
<div class="item"><span class="icon-min">✦</span> Landing pages y sitios institucionales</div>
<div class="item"><span class="icon-min">✦</span> UX/UI a medida</div>
<div class="item"><span class="icon-min">✦</span> Optimización SEO técnica</div>
<div class="item"><span class="icon-min">✦</span> E-commerce y tiendas online</div>
</div>
</div>
<div class="panel" data-panel="2">
<div class="panel-copy">
<h3>Presencia <em>constante,</em><br>estrategia real.</h3>
<p>Gestión de redes, contenido y pauta — con reportes claros para que sepas siempre qué está funcionando y por qué.</p>
<a href="#contacto" class="btn btn-outline">Quiero mi estrategia digital →</a>
</div>
<div class="panel-list">
<div class="item"><span class="icon-min">✦</span> Community management</div>
<div class="item"><span class="icon-min">✦</span> Publicidad en Meta e Instagram Ads</div>
<div class="item"><span class="icon-min">✦</span> Estrategia de contenido y calendario</div>
<div class="item"><span class="icon-min">✦</span> Reportes mensuales de performance</div>
</div>
</div>
<div class="panel" data-panel="3">
<div class="panel-copy">
<h3>Tecnología al servicio<br>de <em>tu tiempo.</em></h3>
<p>Automatizamos lo repetitivo para que tu equipo se enfoque en lo estratégico — sin perder el trato cercano con tus clientes.</p>
<a href="#contacto" class="btn btn-outline">Quiero automatizar procesos →</a>
</div>
<div class="panel-list">
<div class="item"><span class="icon-min">✦</span> Chatbots y respuestas automáticas</div>
<div class="item"><span class="icon-min">✦</span> Automatización de leads y seguimiento</div>
<div class="item"><span class="icon-min">✦</span> Integraciones con CRM y WhatsApp</div>
<div class="item"><span class="icon-min">✦</span> Consultoría en IA aplicada a tu negocio</div>
</div>
</div>
<a href="#planes" class="home-btn" aria-label="Ir a planes">✦</a>
</section>
<!-- ===== PLANES ===== -->
<section class="planes" id="planes">
<div class="eyebrow">Inversión</div>
<h2>Un plan para cada <span class="grad-word">etapa</span> de tu marca.</h2>
<p class="lede">Cuatro niveles pensados para acompañar tu crecimiento — desde presencia digital consistente hasta gestión integral de marca.</p>
<div class="plans-grid">
<div class="plan-card">
<div class="plan-name">Esencial</div>
<div class="plan-stars">★</div>
<div class="plan-obj">Establecer una presencia digital profesional y consistente.</div>
<ul class="plan-feats">
<li>2 redes sociales</li>
<li>8 publicaciones + 8 historias / mes</li>
<li>1 diseño de marca (logo)</li>
<li>Reunión mensual de estrategia</li>
<li>Reporte mensual de métricas</li>
</ul>
<a href="#contacto" class="plan-cta">+Info</a>
</div>
<div class="plan-card">
<div class="plan-name">Impulso</div>
<div class="plan-stars">★★</div>
<div class="plan-obj">Aumentar visibilidad, interacción y generación de leads calificados.</div>
<ul class="plan-feats">
<li>2 redes · 12 publicaciones + 4 reels</li>
<li>Logo + paleta de colores</li>
<li>1 campaña Meta Ads + retargeting</li>
<li>Automatización de respuestas frecuentes</li>
<li>Gestión de Meta Business Suite</li>
</ul>
<a href="#contacto" class="plan-cta">+Info</a>
</div>
<div class="plan-card reco">
<div class="badge">Más Popular</div>
<div class="plan-name">Premium</div>
<div class="plan-stars">★★★</div>
<div class="plan-obj">Consolidar y expandir la empresa comercialmente.</div>
<ul class="plan-feats">
<li>3 redes · 16 publicaciones + 8 reels</li>
<li>Sesión de fotos/video quincenal</li>
<li>2 campañas Meta Ads + Google Ads</li>
<li>Respuestas con IA 24/7</li>
<li>Reporte semanal + reunión mensual</li>
<li>Soporte prioritario</li>
</ul>
<a href="#contacto" class="plan-cta">+Info</a>
</div>
<div class="plan-card">
<div class="plan-name">Elite</div>
<div class="plan-stars">★★★★</div>
<div class="plan-obj">Máximo posicionamiento y gestión integral de marca.</div>
<ul class="plan-feats">
<li>4 redes · 20 publicaciones + 16 reels</li>
<li>Dirección creativa integral de marca</li>
<li>3 campañas + TikTok Ads + Google Ads</li>
<li>Estrategia 360° con planificación mensual</li>
<li>Gestión de reputación online</li>
</ul>
<a href="#contacto" class="plan-cta">+Info</a>
</div>
</div>
<a href="#cotizador" class="btn btn-outline plan-main-cta">Consulta tu plan ideal</a>
<a href="#proceso" class="home-btn" aria-label="Ir a proceso">✦</a>
</section>
<!-- ===== SERVICIOS A LA CARTA ===== -->
<section class="servicios-carta" id="servicios-carta">
<div class="eyebrow">Servicios a la carta</div>
<h2>Para complementar cualquier <span class="grad-word">plan,</span><br>o contratar de forma <span class="grad-word">independiente.</span></h2>
<p class="lede">Elegí los servicios que necesitás, sin compromiso mensual. Todo lo que tu marca necesita, a tu ritmo.</p>
<div class="acc" id="acc">
<div class="acc-item open">
<div class="acc-head" onclick="toggleAcc(this)">
<div class="acc-head-left"><span class="acc-num">01</span><span class="acc-name">Diseño Web & Desarrollo</span></div>
<div class="acc-toggle">+</div>
</div>
<div class="acc-body">
<div class="acc-body-inner">
<div class="service-row"><b>Landing Page Profesional</b>Diseño de una sección, UI/UX + SEO básico <span class="price">Desde $350.000</span></div>
<div class="service-row"><b>Sitio Institucional (hasta 7 secciones)</b>Inicio, Servicios, Nosotros, Blog, Contacto <span class="price">Desde $600.000</span></div>
<div class="service-row"><b>E-commerce</b>Tienda online autoadministrable con pasarela de pago <span class="price">Desde $900.000</span></div>
<div class="service-row"><b>Mantenimiento Web</b>Backups, seguridad y soporte técnico <span class="price">Desde $50.000/mes</span></div>
</div>
</div>
</div>
<div class="acc-item">
<div class="acc-head" onclick="toggleAcc(this)">
<div class="acc-head-left"><span class="acc-num">02</span><span class="acc-name">Branding e Identidad Visual</span></div>
<div class="acc-toggle">+</div>
</div>
<div class="acc-body">
<div class="acc-body-inner">
<div class="service-row"><b>Diseño de Logotipo</b>3 propuestas + revisiones <span class="price">Desde $180.000</span></div>
<div class="service-row"><b>Manual de Marca Completo</b>Logo, paleta, tipografías, tono de voz <span class="price">Desde $300.000</span></div>
<div class="service-row"><b>Rediseño de Identidad Visual</b>Actualización de marca existente <span class="price">A cotizar</span></div>
</div>
</div>
</div>
<div class="acc-item">
<div class="acc-head" onclick="toggleAcc(this)">
<div class="acc-head-left"><span class="acc-num">03</span><span class="acc-name">Publicidad Digital Avanzada</span></div>
<div class="acc-toggle">+</div>
</div>
<div class="acc-body">
<div class="acc-body-inner">
<div class="service-row"><b>Campaña Google Ads</b>Búsqueda y display <span class="price">Desde $150.000/mes</span></div>
<div class="service-row"><b>Campaña TikTok Ads</b>Alcance a audiencias jóvenes <span class="price">Desde $120.000/mes</span></div>
<div class="service-row"><b>Auditoría de Campañas</b>Análisis y oportunidades de mejora <span class="price">Desde $90.000</span></div>
</div>
</div>
</div>
<div class="acc-item">
<div class="acc-head" onclick="toggleAcc(this)">
<div class="acc-head-left"><span class="acc-num">04</span><span class="acc-name">Diseño Digital & Gráfico</span></div>
<div class="acc-toggle">+</div>
</div>
<div class="acc-body">
<div class="acc-body-inner">
<div class="service-row"><b>Infografías</b>Comunicación visual de datos y procesos <span class="price">Desde $80.000/u</span></div>
<div class="service-row"><b>Plantillas para Redes</b>Set editable de 5 piezas <span class="price">Desde $100.000</span></div>
<div class="service-row"><b>Material Impreso</b>Flyers, folletos, tarjetas <span class="price">A cotizar</span></div>
</div>
</div>
</div>
<div class="acc-item">
<div class="acc-head" onclick="toggleAcc(this)">
<div class="acc-head-left"><span class="acc-num">05</span><span class="acc-name">Producción Audiovisual</span></div>
<div class="acc-toggle">+</div>
</div>
<div class="acc-body">
<div class="acc-body-inner">
<div class="service-row"><b>Sesión Fotográfica</b>Producto, instalaciones o equipo <span class="price">A cotizar</span></div>
<div class="service-row"><b>Reel / Video Corto</b>Hasta 30 segundos, con edición <span class="price">Desde $120.000</span></div>
<div class="service-row"><b>Pack de 3 Reels</b>Contenido consistente de alto impacto <span class="price">Desde $300.000</span></div>
</div>
</div>
</div>
</div>
<a href="#cifras" class="home-btn" aria-label="Ir a cifras">✦</a>
</section>
<!-- ===== PROCESO ===== -->
<section class="proceso" id="proceso">
<div class="eyebrow">Cómo trabajamos</div>
<h2>Tu proyecto, paso a paso, y sin <span class="grad-word">sorpresas.</span></h2>
<p class="lede">Un proceso claro y colaborativo — sabés exactamente qué pasa en cada etapa, sin plantillas genéricas.</p>
<div class="arcade-grid">
<div class="column">
<div class="arch"><span class="num">01</span></div>
<div class="cat">Contacto</div>
<div class="step-title">Reunión de brief</div>
<div class="step-desc">Nos contás tu marca y objetivos.</div>
</div>
<div class="column">
<div class="arch"><span class="num">02</span></div>
<div class="cat">Propuesta</div>
<div class="step-title">Plan de trabajo</div>
<div class="step-desc">Entregables, inversión y tiempos.</div>
</div>
<div class="column">
<div class="arch"><span class="num">03</span></div>
<div class="cat">Diseño</div>
<div class="step-title">Dirección de arte</div>
<div class="step-desc">Concepto visual a tu aprobación.</div>
</div>
<div class="column">
<div class="arch"><span class="num">04</span></div>
<div class="cat">Producción</div>
<div class="step-title">Desarrollo</div>
<div class="step-desc">Construimos con seguimiento.</div>
</div>
<div class="column">
<div class="arch"><span class="num">05</span></div>
<div class="cat">Revisión</div>
<div class="step-title">Ajustes finales</div>
<div class="step-desc">Tu feedback moldea el resultado.</div>
</div>
<div class="column">
<div class="arch final"><svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2.4"><path d="M5 12l5 5L19 7"/></svg></div>
<div class="cat">Lanzamiento</div>
<div class="step-title">Entrega</div>
<div class="step-desc">Accesos y capacitación completa.</div>
</div>
</div>
<a href="#cifras" class="home-btn" aria-label="Ir a cifras">✦</a>
</section>
<!-- ===== CIFRAS ===== -->
<section class="cifras" id="cifras">
<div class="eyebrow">Inversión & tiempos</div>
<h2>Transparencia antes de la <span class="grad-word">primera reunión.</span></h2>
<p class="lede">Los números, dichos de entrada — no como parte de una negociación, sino como punto de partida.</p>
<div class="cifras-grid">
<div class="cifra-card">
<div class="cifra-icon"></div>
<div class="cifra-label">Inversión</div>
<div class="cifra-value">Desde $250.000/mes</div>
<div class="cifra-desc">Planes desde <b>$250.000</b> (Esencial) hasta <b>$1.000.000</b> (Elite). El armado inicial —branding, sitio web— se presupuesta por proyecto.</div>
</div>
<div class="cifra-card">
<div class="cifra-icon"></div>
<div class="cifra-label">Tiempos</div>
<div class="cifra-value">15–30 días</div>
<div class="cifra-desc">Presencia digital lista en <b>15-30 días</b>. Resultados de posicionamiento sostenido en <b>3-6 meses</b>. Sin promesas de magia inmediata.</div>
</div>
<div class="cifra-card">
<div class="cifra-icon"></div>
<div class="cifra-label">Contrato</div>
<div class="cifra-value">3 meses · luego mensual</div>
<div class="cifra-desc">Compromiso mínimo de <b>3 meses</b> para que la estrategia tome forma, luego renovación mensual. Cancelación <b>con 30 días de aviso</b>.</div>
</div>
</div>
<a href="#cotizador" class="home-btn" aria-label="Ir a cotizador">✦</a>
</section>
<!-- ===== COTIZADOR ===== -->
<section class="cotizador" id="cotizador">
<div class="eyebrow">Cotizador</div>
<h2>¿Cuál es tu <span class="grad-word">plan ideal</span><span class="signopreg">?</span></h2>
<p class="lede">3 preguntas rápidas y te decimos qué plan se ajusta mejor a tu marca.</p>
<div class="card">
<div class="progress">
<div class="seg"><i id="p1"></i></div>
<div class="seg"><i id="p2"></i></div>
<div class="seg"><i id="p3"></i></div>
</div>
<div class="step active" data-step="0">
<div class="q-num">Pregunta 01</div>
<div class="q-title">¿Cómo describirías el momento de tu negocio?</div>
<div class="options" data-q="0">
<div class="opt" data-val="1"><div class="opt-title">Recién empezando</div><div class="opt-sub">Necesito presencia digital desde cero</div></div>
<div class="opt" data-val="2"><div class="opt-title">En crecimiento</div><div class="opt-sub">Ya tengo redes, quiero más alcance</div></div>
<div class="opt" data-val="3"><div class="opt-title">Establecido</div><div class="opt-sub">Busco consolidar y vender más</div></div>
<div class="opt" data-val="4"><div class="opt-title">Consolidado</div><div class="opt-sub">Quiero gestión integral de marca</div></div>
</div>
<div class="nav-row"><span></span><button class="btn btn-cotizador" onclick="next()" disabled id="next0">Siguiente →</button></div>
</div>
<div class="step" data-step="1">
<div class="q-num">Pregunta 02</div>
<div class="q-title">¿Qué es lo que más necesitás hoy?</div>
<div class="options" data-q="1">
<div class="opt" data-val="1"><div class="opt-title">Presencia en redes</div><div class="opt-sub">Contenido consistente y profesional</div></div>
<div class="opt" data-val="2"><div class="opt-title">Más leads y ventas</div><div class="opt-sub">Publicidad digital que convierta</div></div>
<div class="opt" data-val="3"><div class="opt-title">Producción de contenido</div><div class="opt-sub">Fotos, video y piezas de calidad</div></div>
<div class="opt" data-val="4"><div class="opt-title">Todo integrado</div><div class="opt-sub">Estrategia 360° gestionada por otros</div></div>
</div>
<div class="nav-row"><button class="btn btn-cotizador-back" onclick="prev()">← Atrás</button><button class="btn btn-cotizador" onclick="next()" disabled id="next1">Siguiente →</button></div>
</div>
<div class="step" data-step="2">
<div class="q-num">Pregunta 03</div>
<div class="q-title">¿Cuál es tu presupuesto mensual aproximado?</div>
<div class="options" data-q="2">
<div class="opt" data-val="1"><div class="opt-title">Hasta $300.000</div><div class="opt-sub">ARS / mes</div></div>
<div class="opt" data-val="2"><div class="opt-title">$300.000 – $450.000</div><div class="opt-sub">ARS / mes</div></div>
<div class="opt" data-val="3"><div class="opt-title">$450.000 – $700.000</div><div class="opt-sub">ARS / mes</div></div>
<div class="opt" data-val="4"><div class="opt-title">Más de $700.000</div><div class="opt-sub">ARS / mes</div></div>
</div>
<div class="nav-row"><button class="btn btn-cotizador-back" onclick="prev()">← Atrás</button><button class="btn btn-cotizador" onclick="showResult()" disabled id="next2">Ver resultado →</button></div>
</div>
<div class="result" id="result">
<div class="result-badge">Tu plan recomendado</div>
<div class="result-plan" id="rp-name">—</div>
<div class="result-price" id="rp-price">—</div>
<p class="result-desc" id="rp-desc">—</p>
<div class="result-actions">
<a class="btn btn-solid" href="#contacto">Quiero este plan</a>
<button class="btn btn-cotizador-restart" onclick="restart()">Volver a empezar</button>
</div>
</div>
</div>
<a href="#nosotros" class="home-btn" aria-label="Ir a nosotros">✦</a>
</section>
<!-- ===== NOSOTROS ===== -->
<section class="quienes" id="nosotros">
<div class="eyebrow">Nosotros</div>
<h2>Un equipo chico, con <span class="grad-word">mucha energía.</span></h2>
<p class="lede">Creemos que las marcas se construyen con escucha, estrategia y mucho amor por lo que hacemos.</p>
<div class="team-grid team-grid-simple">
<div class="team-card-simple">
<div class="team-name">Patricia Pugliese</div>
<div class="team-role">Estrategia & Creatividad</div>
<div class="team-detail">Investigación, branding, identidad visual y todo lo que da forma a una marca con personalidad.</div>
</div>
<div class="team-card-simple">
<div class="team-name">Francisco Anfuso</div>
<div class="team-role">Desarrollo & Tecnología</div>
<div class="team-detail">Diseño web, desarrollo, automatizaciones y soluciones técnicas que funcionan sin complicaciones.</div>
</div>
</div>
<div class="team-footer">
<p class="team-footer-text">Y como todo equipo en crecimiento, sumamos colaboradores según el proyecto — diseñadores, redactores y especialistas que se suman cuando hace falta.</p>
</div>
<a href="#faq" class="home-btn" aria-label="Ir a FAQ">✦</a>
</section>
<!-- ===== FAQ ===== -->
<section class="faq" id="faq">
<div class="eyebrow">Preguntas Frecuentes</div>
<h2>Todo lo que necesitás saber <span class="grad-word">antes de empezar.</span></h2>
<p class="lede">Respondemos las dudas más comunes para que llegues con confianza al primer encuentro.</p>
<div class="faq-grid">
<div class="faq-item open">
<div class="faq-head" onclick="toggleFaq(this)">
<span class="faq-q">¿Cómo funciona el proceso de trabajo?</span>
<span class="faq-toggle">−</span>
</div>
<div class="faq-body"><p>Empezamos con una llamada de descubrimiento para conocer tu negocio, objetivos y desafíos. Luego armamos una propuesta a medida, la ejecutamos con entregas parciales y ajustamos hasta que estés 100% conforme. Todo con comunicación clara y tiempos acordados.</p></div>
</div>
<div class="faq-item">
<div class="faq-head" onclick="toggleFaq(this)">
<span class="faq-q">¿Qué incluye exactamente cada plan?</span>
<span class="faq-toggle">+</span>
</div>
<div class="faq-body"><p>Cada plan tiene un desglose detallado en la sección de Planes. Pero en resumen: incluyen gestión de redes, diseño de marca, publicidad digital, automatizaciones y reportes. Si necesitás algo específico que no esté listado, lo sumamos a medida.</p></div>
</div>
<div class="faq-item">
<div class="faq-head" onclick="toggleFaq(this)">
<span class="faq-q">¿Puedo contratar servicios sueltos sin un plan mensual?</span>
<span class="faq-toggle">+</span>
</div>
<div class="faq-body"><p>¡Sí! En la sección "Servicios a la carta" tenés disponibles branding, diseño web, campañas puntuales y producción de contenido. Podés contratarlos de forma independiente, sin compromiso mensual.</p></div>
</div>
<div class="faq-item">
<div class="faq-head" onclick="toggleFaq(this)">
<span class="faq-q">¿Qué resultados puedo esperar?</span>
<span class="faq-toggle">+</span>
</div>
<div class="faq-body"><p>Depende del punto de partida, pero nuestros clientes suelen ver aumento en alcance, engagement y generación de leads en los primeros 3 meses. Compartimos reportes mensuales para que siempre sepas cómo evoluciona tu marca.</p></div>
</div>
<div class="faq-item">
<div class="faq-head" onclick="toggleFaq(this)">
<span class="faq-q">¿Trabajan con negocios de cualquier rubro?</span>
<span class="faq-toggle">+</span>
</div>
<div class="faq-body"><p>Trabajamos con marcas de moda, gastronomía, tecnología, salud, educación y más. Lo importante es que tengas claros tus valores y quieras construir una marca con identidad propia — el rubro es secundario.</p></div>
</div>
<div class="faq-item">
<div class="faq-head" onclick="toggleFaq(this)">
<span class="faq-q">¿Cómo facturan? ¿Hay algún costo de inicio?</span>
<span class="faq-toggle">+</span>
</div>
<div class="faq-body"><p>Facturamos con factura electrónica tipo C o E. No hay costo de inicio: los planes se abonan mes a mes, con un 50% de anticipo en proyectos puntuales (como diseño web o branding completo).</p></div>
</div>
<div class="faq-item">
<div class="faq-head" onclick="toggleFaq(this)">
<span class="faq-q">¿Puedo cambiar de plan o cancelar cuando quiera?</span>
<span class="faq-toggle">+</span>
</div>
<div class="faq-body"><p>Por supuesto. Podés subir o bajar de plan con 15 días de aviso. Si querés cancelar, también con 15 días de anticipación. Sin letra chica ni permanencias forzadas.</p></div>
</div>
</div>
<a href="#contacto" class="home-btn" aria-label="Ir a contacto">✦</a>
</section>
<!-- ===== CONTACTO ===== -->
<section class="contacto" id="contacto">
<div class="eyebrow">Contacto</div>
<h2>¿Empezamos a <span class="grad-word">construir</span> tu marca?</h2>
<p class="lede">Completá el formulario o escribinos directo — te respondemos en menos de 24 horas.</p>
<div class="contact-grid">
<div class="contact-form-wrap">
<form class="contact-form" id="contactForm" onsubmit="return handleSubmit(event)">
<div class="form-row">
<div class="form-group">
<label for="nombre">Nombre completo <span class="req">*</span></label>
<input type="text" id="nombre" name="nombre" required placeholder="Tu nombre">
</div>
<div class="form-group">
<label for="email">Email <span class="req">*</span></label>
<input type="email" id="email" name="email" required placeholder="tu@email.com">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="empresa">Empresa / Emprendimiento</label>
<input type="text" id="empresa" name="empresa" placeholder="Nombre de tu marca">
</div>
<div class="form-group">
<label for="telefono">Teléfono</label>
<input type="tel" id="telefono" name="telefono" placeholder="+54 9 388 000-0000">
</div>
</div>
<div class="form-group full">
<label for="servicio">¿Qué servicio te interesa? <span class="req">*</span></label>
<div class="filter-tags" id="servicioFilter">
<button type="button" class="filter-tag active" data-value="todos" onclick="selectFilter(event)">Todos</button>
<button type="button" class="filter-tag" data-value="branding" onclick="selectFilter(event)">Branding</button>
<button type="button" class="filter-tag" data-value="web" onclick="selectFilter(event)">Diseño Web</button>
<button type="button" class="filter-tag" data-value="marketing" onclick="selectFilter(event)">Marketing Digital</button>
<button type="button" class="filter-tag" data-value="ia" onclick="selectFilter(event)">IA & Automatización</button>
<button type="button" class="filter-tag" data-value="otro" onclick="selectFilter(event)">Otro</button>
</div>
<input type="hidden" id="servicioSeleccionado" name="servicio" value="todos">
<input type="text" id="servicioOtro" name="servicio_otro" placeholder="Especificá cuál..." style="display:none; margin-top:10px; width:100%;">
</div>
<div class="form-group full">
<label for="mensaje">¿Qué necesitás? <span class="req">*</span></label>
<textarea id="mensaje" name="mensaje" required placeholder="Contanos sobre tu proyecto, tus objetivos y lo que estás buscando..." rows="5"></textarea>
</div>
<div class="form-row">
<div class="form-group" style="flex:1;">
<label class="checkbox-label">
<input type="checkbox" required>
<span>Acepto la <a href="#" style="color:var(--bordo);">política de privacidad</a></span>
</label>
</div>
<button type="submit" class="btn btn-solid" style="padding:14px 44px;">Enviar mensaje</button>
</div>
</form>
</div>
<div class="contact-direct">
<div class="contact-card">
<div class="contact-icon">📧</div>
<div class="contact-info">
<div class="contact-label">Email</div>
<a href="mailto:contacto@amoryroma.com.ar">contacto@amoryroma.com.ar</a>
</div>
</div>
<div class="contact-card">
<div class="contact-icon">💬</div>
<div class="contact-info">
<div class="contact-label">WhatsApp</div>
<a href="https://wa.me/5493886118304" target="_blank">+54 9 388 611-8304</a>
</div>
</div>
<div class="contact-card">
<div class="contact-icon">📱</div>
<div class="contact-info">
<div class="contact-label">Redes</div>
<div class="contact-socials">
<a href="https://www.instagram.com/amoryroma.creativo/" target="_blank">Instagram</a>
<a href="https://www.linkedin.com/in/patricia-pugliese/" target="_blank">LinkedIn</a>
<a href="https://web.facebook.com/amoryroma.creativo" target="_blank">Facebook</a>
</div>
</div>
</div>
<div class="contact-card">
<div class="contact-icon">📍</div>
<div class="contact-info">
<div class="contact-label">Argentina</div>
<span style="font-size:13px; color:var(--dusty);">Trabajamos remoto worldwide</span>
</div>
</div>
</div>
</div>
<a href="#inicio" class="home-btn" aria-label="Volver arriba">✦</a>
</section>
<!-- ===== FOOTER ===== -->
<footer class="footer">
<div class="footer-inner">
<div class="footer-brand">
<div class="footer-logo"><img src="logo_frio.png" alt="Amor & Roma" style="height:36px;width:auto;"></div>
<p class="footer-desc">Branding, diseño web y marketing digital para marcas con esencia.</p>
</div>
<div class="footer-links">
<div class="footer-col">
<h4>Navegación</h4>
<a href="#servicios">Servicios</a>
<a href="#planes">Planes</a>
<a href="#nosotros">Nosotros</a>
<a href="#cifras">Cifras</a>
<a href="#faq">FAQ</a>
<a href="#contacto">Contacto</a>
</div>
<div class="footer-col">
<h4>Servicios</h4>
<a href="#servicios">Branding</a>
<a href="#servicios">Diseño Web</a>
<a href="#servicios">Marketing Digital</a>
<a href="#servicios">IA & Automatización</a>
</div>
<div class="footer-col">
<h4>Contacto</h4>
<a href="mailto:contacto@amoryroma.com.ar">contacto@amoryroma.com.ar</a>
<a href="https://wa.me/5493886118304" target="_blank">+54 9 388 611-8304</a>
<div class="footer-socials">
<a href="https://www.instagram.com/amoryroma.creativo/" target="_blank" aria-label="Instagram">IG</a>
<a href="https://www.linkedin.com/in/patricia-pugliese/" target="_blank" aria-label="LinkedIn">IN</a>
<a href="https://web.facebook.com/amoryroma.creativo" target="_blank" aria-label="Facebook">FB</a>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<span>&copy; 2026 Amor & Roma — Estudio Creativo. Todos los derechos reservados.</span>
<span class="footer-legal"><a href="#">Política de privacidad</a><a href="#">Términos y condiciones</a></span>
</div>
</footer>
<!-- ===== SCRIPTS ===== -->
<script src="scripts.js"></script>
<script src="fluid.js"></script>
</body>
</html>