mejoras de estructura

This commit is contained in:
2026-09-14 17:08:10 -03:00
parent 62467348f4
commit 7c13f697db
21 changed files with 1650 additions and 1591 deletions
-562
View File
@@ -1,562 +0,0 @@
<!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/main.css">
<link rel="preload" href="partials/menu.html" as="fetch" crossorigin>
<link rel="preload" href="partials/footer.html" as="fetch" crossorigin>
</head>
<body>
<!-- ===== CANVAS PARA EFECTO DE HUMO ===== -->
<canvas id="fluidCanvas"></canvas>
<!-- ===== OVERLAY ===== -->
<div class="overlay" id="overlay" onclick="toggleMenu()"></div>
<!-- ===== MENU BOTTOM SHEET ===== -->
<div id="menu-placeholder"></div>
<!-- ===== HEADER ===== -->
<header>
<div class="logo">
<a href="#inicio">
<img src="./assets/logos/logo_frio.png" alt="Amor & Roma" class="logo-img">
</a>
</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>
<div class="scroll-hint"><div class="line"></div>Scroll</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>
</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>
</section>
<!-- ===== POTENCIADORES DE NEGOCIO ===== -->
<section class="servicios-carta" id="servicios-carta">
<div class="eyebrow">Potenciadores de negocio</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>
</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>
</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>
</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>
</section>
<!-- ===== NOSOTROS ===== -->
<section class="quienes" id="nosotros">
<div class="eyebrow">Nosotros</div>
<h2>Mentes creativas, con <span class="grad-word">mucha energía.</span></h2>
<p class="lede"> Combinamos el arte del Marketing con la Ciencia de los datos.</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">Como todo equipo en crecimiento, sumamos colaboradores según el proyecto — diseñadores, redactores y especialistas que se suman cuando hace falta.</p>
</div>
</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"> <em>¿Cómo funciona el proceso de trabajo?</em></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"> <em>¿Qué incluye exactamente cada plan?</em></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"> <em>¿Puedo contratar servicios sueltos sin un plan mensual?</em></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"> <em>¿Qué resultados puedo esperar?</em></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"> <em>¿Trabajan con negocios de cualquier rubro?</em></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"> <em>¿Cómo facturan? ¿Hay algún costo de inicio?</em></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"> <em>¿Puedo cambiar de plan o cancelar cuando quiera?</em></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>
</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>
</section>
<!-- ===== FOOTER ===== -->
<div id="footer-placeholder"></div>
<!-- ===== SCRIPTS ===== -->
<script src="scripts/main.js"></script>
<script src="fluid.js"></script>
<script src="scripts/loader.js" defer></script>
</body>
</html>