inicio
This commit is contained in:
+1325
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
+187
@@ -0,0 +1,187 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es-AR">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Contacto — Amor y Roma</title>
|
||||
<meta name="description" content="Hablemos de tu próximo proyecto. Escribinos por formulario o WhatsApp.">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="container nav-row">
|
||||
<a href="index.html" class="logo-mark" aria-label="Amor y Roma — inicio">
|
||||
<svg viewBox="0 0 80 70" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M2 66V34C2 16.3 16.3 2 34 2H46C63.7 2 78 16.3 78 34V66" stroke="var(--accent-blush)" stroke-width="6" fill="none" opacity="0.55"/>
|
||||
<path d="M14 66V34C14 20.7 24.7 10 38 10H42C55.3 10 66 20.7 66 34V66" stroke="currentColor" stroke-width="6" fill="none"/>
|
||||
</svg>
|
||||
<span class="wordmark">amor&roma</span>
|
||||
</a>
|
||||
<nav class="nav-links" aria-label="Navegación principal">
|
||||
<a href="index.html">Inicio</a>
|
||||
<a href="servicios.html">Servicios</a>
|
||||
<a href="planes.html">Planes</a>
|
||||
<a href="portfolio.html">Portfolio</a>
|
||||
<a href="nosotros.html">Nosotros</a>
|
||||
<a href="metodo.html">Método</a>
|
||||
<a href="contacto.html" aria-current="page">Contacto</a>
|
||||
</nav>
|
||||
<div class="nav-actions">
|
||||
<a href="diagnostico.html" class="btn btn-primary">Encontrá tu solución</a>
|
||||
<button class="theme-toggle" data-theme-toggle type="button" aria-label="Cambiar tema claro/oscuro">
|
||||
<svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
|
||||
<svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.8A9 9 0 1111.2 3a7 7 0 009.8 9.8z"/></svg>
|
||||
</button>
|
||||
<button class="nav-toggle" data-nav-toggle type="button" aria-label="Abrir menú" aria-expanded="false">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-menu" data-mobile-menu>
|
||||
<a href="index.html">Inicio</a>
|
||||
<a href="servicios.html">Servicios</a>
|
||||
<a href="planes.html">Planes</a>
|
||||
<a href="portfolio.html">Portfolio</a>
|
||||
<a href="nosotros.html">Nosotros</a>
|
||||
<a href="metodo.html">Método</a>
|
||||
<a href="diagnostico.html">Diagnóstico</a>
|
||||
<a href="contacto.html">Contacto</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<section class="section-tight">
|
||||
<div class="container">
|
||||
<p class="eyebrow">Contacto</p>
|
||||
<h1 style="font-size:var(--step-3); max-width:16ch;">Hablemos de tu próximo proyecto.</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-tight" style="padding-top:0;">
|
||||
<div class="container grid grid-2">
|
||||
<div>
|
||||
<form id="contact-form" class="form-grid">
|
||||
<div class="field full">
|
||||
<label for="c-motivo">Motivo de contacto</label>
|
||||
<select id="c-motivo" name="motivo">
|
||||
<option value="servicios">Quiero conocer los servicios</option>
|
||||
<option value="diagnostico">Quiero una valoración / diagnóstico</option>
|
||||
<option value="presupuesto">Quiero solicitar presupuesto</option>
|
||||
<option value="plan">Quiero contratar un plan</option>
|
||||
<option value="web">Quiero consultar por desarrollo web</option>
|
||||
<option value="otro">Otro</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field"><label for="c-nombre">Nombre</label><input id="c-nombre" name="nombre" type="text" required></div>
|
||||
<div class="field"><label for="c-empresa">Empresa</label><input id="c-empresa" name="empresa" type="text"></div>
|
||||
<div class="field"><label for="c-email">Email</label><input id="c-email" name="email" type="email" required></div>
|
||||
<div class="field"><label for="c-whatsapp">WhatsApp</label><input id="c-whatsapp" name="whatsapp" type="tel"></div>
|
||||
<div class="field full"><label for="c-mensaje">Mensaje</label><textarea id="c-mensaje" name="mensaje" rows="4"></textarea></div>
|
||||
<div class="field full"><button type="submit" class="btn btn-primary" style="justify-content:center;">Enviar mensaje</button></div>
|
||||
</form>
|
||||
<div id="contact-confirmation" class="confirmation-box">
|
||||
<h4>Recibimos tu mensaje.</h4>
|
||||
<p style="margin-top:0.6rem; color:var(--text-soft);">Gracias por contactarte con Amor y Roma. En breve nos pondremos en contacto para continuar la conversación.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stack gap-3">
|
||||
<div class="card">
|
||||
<h4 style="font-size:1.1rem;">¿Preferís hablar directamente?</h4>
|
||||
<a href="https://wa.me/5491100000000" target="_blank" rel="noopener" class="btn btn-primary" style="margin-top:1rem;">Escribir por WhatsApp</a>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h4 style="font-size:1.1rem;">También podés encontrarnos en</h4>
|
||||
<ul style="margin-top:0.8rem; display:flex; flex-direction:column; gap:0.5rem; font-family:var(--font-small); font-size:0.92rem;">
|
||||
<li><a href="https://instagram.com/amoryroma" target="_blank" rel="noopener">Instagram</a></li>
|
||||
<li><a href="https://facebook.com/amoryroma" target="_blank" rel="noopener">Facebook</a></li>
|
||||
<li><a href="https://linkedin.com/company/amoryroma" target="_blank" rel="noopener">LinkedIn</a></li>
|
||||
</ul>
|
||||
<p style="margin-top:1rem; font-size:0.8rem; color:var(--text-soft);">* Datos de contacto de prueba — reemplazar antes de publicar.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h4 style="font-size:1.1rem;">Qué ocurre después</h4>
|
||||
<ol style="margin-top:0.8rem; display:flex; flex-direction:column; gap:0.6rem; font-family:var(--font-small); font-size:0.9rem; color:var(--text-soft);">
|
||||
<li><strong style="color:var(--accent-amor);">01</strong> Recibimos tu consulta</li>
|
||||
<li><strong style="color:var(--accent-amor);">02</strong> Entendemos tu necesidad</li>
|
||||
<li><strong style="color:var(--accent-amor);">03</strong> Evaluamos la mejor solución</li>
|
||||
<li><strong style="color:var(--accent-amor);">04</strong> Coordinamos una conversación</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<div class="foot-grid">
|
||||
<div>
|
||||
<div class="logo-mark" style="color:var(--c-mist);">
|
||||
<svg viewBox="0 0 80 70" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="height:30px;">
|
||||
<path d="M2 66V34C2 16.3 16.3 2 34 2H46C63.7 2 78 16.3 78 34V66" stroke="var(--accent-blush)" stroke-width="6" fill="none" opacity="0.55"/>
|
||||
<path d="M14 66V34C14 20.7 24.7 10 38 10H42C55.3 10 66 20.7 66 34V66" stroke="currentColor" stroke-width="6" fill="none"/>
|
||||
</svg>
|
||||
<span class="wordmark" style="color:var(--c-mist);">amor&roma</span>
|
||||
</div>
|
||||
<p style="margin-top:0.8rem; color:#c9c2d6; font-style:italic; font-family:var(--font-display);">Marcas con esencia, construidas con estrategia.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Navegación</h5>
|
||||
<ul>
|
||||
<li><a href="index.html">Inicio</a></li>
|
||||
<li><a href="servicios.html">Servicios</a></li>
|
||||
<li><a href="planes.html">Planes</a></li>
|
||||
<li><a href="portfolio.html">Portfolio</a></li>
|
||||
<li><a href="nosotros.html">Nosotros</a></li>
|
||||
<li><a href="metodo.html">Método</a></li>
|
||||
<li><a href="diagnostico.html">Diagnóstico</a></li>
|
||||
<li><a href="contacto.html">Contacto</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Servicios</h5>
|
||||
<ul>
|
||||
<li><a href="servicios.html#branding">Branding</a></li>
|
||||
<li><a href="servicios.html#redes">Redes</a></li>
|
||||
<li><a href="servicios.html#web">Web</a></li>
|
||||
<li><a href="servicios.html#automatizaciones">Automatizaciones</a></li>
|
||||
<li><a href="servicios.html#paid-media">Paid Media</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Contacto <span style="opacity:.6; font-weight:400;">(datos de prueba)</span></h5>
|
||||
<ul>
|
||||
<li><a href="mailto:hola@amoryroma.com.ar">hola@amoryroma.com.ar</a></li>
|
||||
<li><a href="https://wa.me/5491100000000" target="_blank" rel="noopener">+54 9 11 0000-0000</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="foot-bottom">
|
||||
<span>© <span data-year></span> Amor y Roma — Estudio Creativo. www.amoryroma.com.ar</span>
|
||||
<span>Política de privacidad · Términos y condiciones · Cookies</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<a class="whatsapp-float" href="https://wa.me/5491100000000" target="_blank" rel="noopener" aria-label="Escribir por WhatsApp">
|
||||
<svg viewBox="0 0 32 32" fill="currentColor" aria-hidden="true"><path d="M16.01 3C9.38 3 4 8.38 4 15.01c0 2.26.61 4.38 1.68 6.2L4 29l7.98-1.64a11.9 11.9 0 004.03.7c6.63 0 12.01-5.38 12.01-12.05C28.02 8.38 22.64 3 16.01 3zm0 21.8c-1.98 0-3.85-.55-5.44-1.5l-.39-.23-4.86 1 1.03-4.72-.25-.4a9.7 9.7 0 01-1.5-5.15c0-5.4 4.39-9.79 9.8-9.79 5.4 0 9.79 4.39 9.79 9.79.01 5.4-4.38 9.79-9.78 10zM21.4 18c-.28-.14-1.66-.82-1.92-.91-.26-.1-.44-.14-.63.14-.19.28-.72.9-.88 1.09-.16.19-.32.2-.6.07-.28-.14-1.17-.43-2.23-1.37-.83-.74-1.38-1.65-1.55-1.93-.16-.28-.02-.43.12-.57.13-.13.28-.33.42-.5.14-.16.19-.28.28-.47.09-.19.05-.35-.02-.5-.07-.14-.63-1.52-.87-2.08-.23-.55-.46-.47-.63-.48h-.54c-.19 0-.5.07-.76.35-.26.28-1 .98-1 2.38 0 1.4 1.02 2.76 1.16 2.95.14.19 2 3.05 4.85 4.27.68.29 1.21.47 1.62.6.68.22 1.3.19 1.79.11.55-.08 1.66-.68 1.9-1.34.24-.66.24-1.22.17-1.34-.07-.12-.25-.19-.53-.33z"/></svg>
|
||||
</a>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
<script src="js/contacto.js"></script>
|
||||
<script>
|
||||
// Prefill "motivo" si llega ?plan=xxx desde Planes
|
||||
const p = new URLSearchParams(location.search).get('plan');
|
||||
if (p) {
|
||||
const sel = document.getElementById('c-motivo');
|
||||
if (sel) sel.value = 'plan';
|
||||
const msg = document.getElementById('c-mensaje');
|
||||
if (msg) msg.value = `Me interesa el plan: ${p}`;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+564
@@ -0,0 +1,564 @@
|
||||
/* ============================================================
|
||||
AMOR & ROMA — Design tokens & base styles
|
||||
============================================================ */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Literata:ital,wght@0,400;0,500;0,600;1,400;1,600;1,700&family=Raleway:wght@300;400;500;600;700&family=Jost:wght@300;400;500;600&family=WindSong&display=swap');
|
||||
|
||||
:root {
|
||||
/* --- Brand palette (light theme default) --- */
|
||||
--c-teal-deep: #003f52;
|
||||
--c-teal-web: #006d8f;
|
||||
--c-magenta: #ba124d;
|
||||
--c-plum: #221728;
|
||||
--c-plum-2: #110916;
|
||||
--c-mist: #eaf0ee;
|
||||
--c-blush: #dfbdb9;
|
||||
|
||||
/* --- Semantic tokens: LIGHT theme --- */
|
||||
--bg: var(--c-mist);
|
||||
--bg-raised: #ffffff;
|
||||
--bg-sunken: #dfe8e5;
|
||||
--text: var(--c-plum-2);
|
||||
--text-soft: #4b4453;
|
||||
--text-inverse: var(--c-mist);
|
||||
--accent-amor: var(--c-magenta);
|
||||
--accent-roma: var(--c-teal-deep);
|
||||
--accent-roma-bright: var(--c-teal-web);
|
||||
--accent-blush: var(--c-blush);
|
||||
--border: rgba(34, 23, 40, 0.14);
|
||||
--border-strong: rgba(34, 23, 40, 0.28);
|
||||
--shadow: 0 18px 40px -20px rgba(17, 9, 22, 0.35);
|
||||
|
||||
/* --- Type --- */
|
||||
--font-display: 'Literata', Georgia, serif;
|
||||
--font-body: 'Raleway', sans-serif;
|
||||
--font-small: 'Jost', sans-serif;
|
||||
--font-script: 'WindSong', cursive;
|
||||
|
||||
--step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.95rem);
|
||||
--step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
|
||||
--step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
|
||||
--step-2: clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
|
||||
--step-3: clamp(2.1rem, 1.7rem + 1.8vw, 3.1rem);
|
||||
--step-4: clamp(2.6rem, 2rem + 3vw, 4.4rem);
|
||||
|
||||
--space-1: 0.5rem;
|
||||
--space-2: 1rem;
|
||||
--space-3: 1.5rem;
|
||||
--space-4: 2.5rem;
|
||||
--space-5: 4rem;
|
||||
--space-6: 6.5rem;
|
||||
|
||||
--radius-arch: 999px 999px 12px 12px;
|
||||
--max-w: 1180px;
|
||||
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
--bg: var(--c-plum-2);
|
||||
--bg-raised: #1a0f21;
|
||||
--bg-sunken: #0b0510;
|
||||
--text: var(--c-mist);
|
||||
--text-soft: #c9c2d6;
|
||||
--text-inverse: var(--c-plum-2);
|
||||
--accent-amor: #e0447a;
|
||||
--accent-roma: var(--c-teal-web);
|
||||
--accent-roma-bright: #3fb2d6;
|
||||
--accent-blush: var(--c-blush);
|
||||
--border: rgba(234, 240, 238, 0.14);
|
||||
--border-strong: rgba(234, 240, 238, 0.28);
|
||||
--shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.6);
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Reset
|
||||
============================================================ */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html { scroll-behavior: smooth; }
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--step-0);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
transition: background 0.4s ease, color 0.4s ease;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
img { max-width: 100%; display: block; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
ul { list-style: none; margin: 0; padding: 0; }
|
||||
button { font: inherit; cursor: pointer; }
|
||||
input, select, textarea { font: inherit; }
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
line-height: 1.12;
|
||||
margin: 0;
|
||||
color: var(--text);
|
||||
}
|
||||
h1 { font-size: var(--step-4); font-style: italic; font-weight: 700; }
|
||||
h2 { font-size: var(--step-3); font-style: italic; }
|
||||
h3 { font-size: var(--step-2); }
|
||||
h4 { font-size: var(--step-1); font-style: italic; }
|
||||
|
||||
p { margin: 0; max-width: 62ch; }
|
||||
p.lede { font-size: var(--step-1); color: var(--text-soft); max-width: 46ch; }
|
||||
|
||||
.eyebrow {
|
||||
font-family: var(--font-small);
|
||||
font-size: var(--step--1);
|
||||
color: var(--accent-amor);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: var(--max-w);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--space-3);
|
||||
}
|
||||
@media (min-width: 720px) {
|
||||
.container { padding-inline: var(--space-4); }
|
||||
}
|
||||
|
||||
section { padding-block: var(--space-6); position: relative; }
|
||||
.section-tight { padding-block: var(--space-5); }
|
||||
|
||||
.stack { display: flex; flex-direction: column; }
|
||||
.gap-1 { gap: var(--space-1); }
|
||||
.gap-2 { gap: var(--space-2); }
|
||||
.gap-3 { gap: var(--space-3); }
|
||||
.gap-4 { gap: var(--space-4); }
|
||||
|
||||
.grid { display: grid; gap: var(--space-3); }
|
||||
@media (min-width: 860px) {
|
||||
.grid-2 { grid-template-columns: 1fr 1fr; }
|
||||
.grid-3 { grid-template-columns: repeat(3, 1fr); }
|
||||
.grid-4 { grid-template-columns: repeat(4, 1fr); }
|
||||
.grid-5 { grid-template-columns: repeat(5, 1fr); }
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Buttons
|
||||
============================================================ */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-family: var(--font-small);
|
||||
font-size: var(--step--1);
|
||||
font-weight: 500;
|
||||
padding: 0.9rem 1.6rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid transparent;
|
||||
transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn:hover { transform: translateY(-2px); }
|
||||
.btn:focus-visible { outline: 3px solid var(--accent-roma-bright); outline-offset: 3px; }
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent-amor);
|
||||
color: #fff;
|
||||
}
|
||||
.btn-primary:hover { background: color-mix(in srgb, var(--accent-amor) 85%, black); }
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
.btn-secondary:hover { border-color: var(--accent-roma-bright); color: var(--accent-roma-bright); }
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--accent-roma-bright);
|
||||
padding-inline: 0.2rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
.btn-ghost::after { content: ''; display: block; height: 1px; background: currentColor; margin-top: 2px; opacity: 0.5; }
|
||||
|
||||
/* ============================================================
|
||||
Header / Nav
|
||||
============================================================ */
|
||||
.site-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: color-mix(in srgb, var(--bg) 88%, transparent);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.nav-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-block: var(--space-2);
|
||||
}
|
||||
.logo-mark { display: flex; align-items: center; gap: 0.6rem; }
|
||||
.logo-mark svg { height: 34px; width: auto; }
|
||||
.logo-mark .wordmark {
|
||||
font-family: var(--font-display);
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
font-size: 1.25rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
font-family: var(--font-small);
|
||||
font-size: var(--step--1);
|
||||
}
|
||||
.nav-links a { position: relative; padding-block: 4px; }
|
||||
.nav-links a::after {
|
||||
content: '';
|
||||
position: absolute; left: 0; right: 0; bottom: 0;
|
||||
height: 2px; background: var(--accent-amor);
|
||||
transform: scaleX(0); transform-origin: left;
|
||||
transition: transform 0.25s ease;
|
||||
}
|
||||
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
|
||||
.nav-links a[aria-current="page"] { color: var(--accent-amor); }
|
||||
|
||||
@media (min-width: 980px) {
|
||||
.nav-links { display: flex; }
|
||||
.nav-toggle { display: none; }
|
||||
}
|
||||
|
||||
.nav-actions { display: flex; align-items: center; gap: var(--space-2); }
|
||||
|
||||
.theme-toggle {
|
||||
width: 42px; height: 42px; border-radius: 50%;
|
||||
border: 1px solid var(--border-strong);
|
||||
background: var(--bg-raised);
|
||||
display: grid; place-items: center;
|
||||
color: var(--text);
|
||||
}
|
||||
.theme-toggle svg { width: 18px; height: 18px; }
|
||||
.theme-toggle .icon-moon { display: none; }
|
||||
html[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
|
||||
html[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
|
||||
|
||||
.nav-toggle {
|
||||
width: 42px; height: 42px; border-radius: 50%;
|
||||
border: 1px solid var(--border-strong);
|
||||
background: transparent; color: var(--text);
|
||||
display: grid; place-items: center;
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-3);
|
||||
border-top: 1px solid var(--border);
|
||||
font-family: var(--font-small);
|
||||
}
|
||||
.mobile-menu.open { display: flex; }
|
||||
@media (min-width: 980px) { .mobile-menu { display: none !important; } }
|
||||
|
||||
/* ============================================================
|
||||
Arch motif — recurring structural device
|
||||
============================================================ */
|
||||
.arch-frame {
|
||||
position: relative;
|
||||
border-radius: var(--radius-arch);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.arch-divider {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
color: var(--accent-roma);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Cards
|
||||
============================================================ */
|
||||
.card {
|
||||
background: var(--bg-raised);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-arch);
|
||||
padding: var(--space-3);
|
||||
}
|
||||
|
||||
.service-card {
|
||||
background: var(--bg-raised);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 28px 28px 14px 14px;
|
||||
padding: var(--space-3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
.service-card:hover {
|
||||
transform: translateY(-6px);
|
||||
box-shadow: var(--shadow);
|
||||
border-color: var(--accent-roma-bright);
|
||||
}
|
||||
.service-card .index { font-family: var(--font-small); color: var(--accent-amor); font-size: var(--step--1); }
|
||||
.service-card ul { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; font-family: var(--font-small); font-size: var(--step--1); color: var(--text-soft); }
|
||||
.service-card ul li::after { content: '·'; margin-left: 0.6rem; color: var(--border-strong); }
|
||||
.service-card ul li:last-child::after { content: ''; }
|
||||
|
||||
/* ============================================================
|
||||
Footer
|
||||
============================================================ */
|
||||
.site-footer {
|
||||
background: var(--c-plum-2);
|
||||
color: var(--c-mist);
|
||||
padding-block: var(--space-5) var(--space-3);
|
||||
}
|
||||
.site-footer a:hover { color: var(--accent-roma-bright); }
|
||||
.site-footer .foot-grid {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@media (min-width: 780px) {
|
||||
.site-footer .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
|
||||
}
|
||||
.site-footer h5 {
|
||||
font-family: var(--font-small);
|
||||
font-size: var(--step--1);
|
||||
color: var(--accent-blush);
|
||||
margin: 0 0 var(--space-2);
|
||||
font-weight: 500;
|
||||
}
|
||||
.site-footer ul { display: flex; flex-direction: column; gap: 0.55rem; font-size: var(--step--1); color: #d8d0e0; }
|
||||
.foot-bottom {
|
||||
margin-top: var(--space-5);
|
||||
padding-top: var(--space-2);
|
||||
border-top: 1px solid rgba(234,240,238,0.14);
|
||||
display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2);
|
||||
font-family: var(--font-small); font-size: 0.8rem; color: #a99fb8;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Floating WhatsApp
|
||||
============================================================ */
|
||||
.whatsapp-float {
|
||||
position: fixed;
|
||||
right: var(--space-3);
|
||||
bottom: var(--space-3);
|
||||
z-index: 90;
|
||||
width: 58px; height: 58px;
|
||||
border-radius: 50%;
|
||||
background: #1f9e57;
|
||||
color: #fff;
|
||||
display: grid; place-items: center;
|
||||
box-shadow: 0 12px 28px -8px rgba(0,0,0,0.45);
|
||||
transition: transform 0.25s ease;
|
||||
}
|
||||
.whatsapp-float:hover { transform: scale(1.08); }
|
||||
.whatsapp-float svg { width: 28px; height: 28px; }
|
||||
|
||||
/* ============================================================
|
||||
Hero canvas
|
||||
============================================================ */
|
||||
.hero {
|
||||
position: relative;
|
||||
padding-block: var(--space-6) var(--space-5);
|
||||
overflow: hidden;
|
||||
}
|
||||
#hero-canvas {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.hero .container { position: relative; z-index: 1; }
|
||||
.hero-copy { max-width: 640px; }
|
||||
.hero-copy .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
|
||||
|
||||
/* ============================================================
|
||||
Misc components used across pages
|
||||
============================================================ */
|
||||
.pill {
|
||||
display: inline-block;
|
||||
font-family: var(--font-small);
|
||||
font-size: 0.78rem;
|
||||
padding: 0.3rem 0.8rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--border-strong);
|
||||
color: var(--text-soft);
|
||||
}
|
||||
.pill[data-active="true"] {
|
||||
background: var(--accent-amor);
|
||||
border-color: var(--accent-amor);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.duo-columns {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
border-radius: 28px;
|
||||
overflow: hidden;
|
||||
}
|
||||
@media (min-width: 780px) { .duo-columns { grid-template-columns: 1fr 1fr; gap: 0; } }
|
||||
.duo-col {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
.duo-col.amor {
|
||||
background: color-mix(in srgb, var(--accent-amor) 10%, var(--bg-raised));
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.duo-col.roma {
|
||||
background: color-mix(in srgb, var(--accent-roma) 10%, var(--bg-raised));
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.duo-col h4 { font-family: var(--font-small); font-style: normal; letter-spacing: 0.03em; text-transform: none; margin-bottom: var(--space-2); }
|
||||
.duo-col ul { display: flex; flex-direction: column; gap: 0.5rem; font-family: var(--font-display); font-size: var(--step-1); font-style: italic; }
|
||||
|
||||
.timeline {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
counter-reset: step;
|
||||
}
|
||||
@media (min-width: 860px) { .timeline { grid-template-columns: repeat(5, 1fr); } }
|
||||
.timeline .step {
|
||||
border-top: 2px solid var(--accent-roma);
|
||||
padding-top: var(--space-2);
|
||||
}
|
||||
.timeline .step .num { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); color: var(--accent-amor); }
|
||||
|
||||
.plan-card {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 24px 24px 12px 12px;
|
||||
padding: var(--space-3);
|
||||
background: var(--bg-raised);
|
||||
display: flex; flex-direction: column; gap: var(--space-2);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s ease, transform 0.25s ease;
|
||||
}
|
||||
.plan-card:hover { transform: translateY(-4px); }
|
||||
.plan-card[data-featured="true"] { border-color: var(--accent-amor); box-shadow: 0 0 0 1px var(--accent-amor); }
|
||||
.plan-card .price { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); }
|
||||
.plan-card .details { display: none; font-size: 0.92rem; color: var(--text-soft); }
|
||||
.plan-card.expanded .details { display: block; }
|
||||
.plan-card .details dl { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 0.8rem; margin: var(--space-2) 0; }
|
||||
.plan-card .details dt { font-family: var(--font-small); color: var(--accent-roma-bright); font-size: 0.8rem; }
|
||||
.plan-card .details dd { margin: 0; }
|
||||
|
||||
.portfolio-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; }
|
||||
.portfolio-grid { margin-top: var(--space-4); }
|
||||
.case-card {
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-raised);
|
||||
cursor: pointer;
|
||||
}
|
||||
.case-card .thumb {
|
||||
aspect-ratio: 4/3;
|
||||
background: linear-gradient(135deg, var(--c-teal-deep), var(--c-magenta));
|
||||
display: grid; place-items: center;
|
||||
color: rgba(255,255,255,0.85);
|
||||
font-family: var(--font-small);
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.case-card .body { padding: var(--space-2) var(--space-3) var(--space-3); }
|
||||
.case-card .tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
|
||||
|
||||
.modal-backdrop {
|
||||
position: fixed; inset: 0; background: rgba(10,5,14,0.6);
|
||||
display: none; align-items: center; justify-content: center; z-index: 200; padding: var(--space-3);
|
||||
}
|
||||
.modal-backdrop.open { display: flex; }
|
||||
.modal {
|
||||
background: var(--bg-raised); border-radius: 24px; max-width: 560px; width: 100%;
|
||||
padding: var(--space-4); position: relative; max-height: 86vh; overflow-y: auto;
|
||||
}
|
||||
.modal-close {
|
||||
position: absolute; top: var(--space-2); right: var(--space-2);
|
||||
width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-strong);
|
||||
background: transparent; color: var(--text); display: grid; place-items: center;
|
||||
}
|
||||
|
||||
.team-slot {
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 999px 999px 20px 20px;
|
||||
border: 1.5px dashed var(--border-strong);
|
||||
display: grid; place-items: center;
|
||||
color: var(--text-soft);
|
||||
font-family: var(--font-small); font-size: 0.78rem; text-align: center; padding: var(--space-2);
|
||||
}
|
||||
|
||||
/* Diagnóstico */
|
||||
.diag-wrap { max-width: 640px; margin-inline: auto; }
|
||||
.diag-progress { display: flex; gap: 0.4rem; margin-bottom: var(--space-4); }
|
||||
.diag-progress span { height: 3px; flex: 1; background: var(--border); border-radius: 2px; overflow: hidden; }
|
||||
.diag-progress span::after { content: ''; display: block; height: 100%; width: 0%; background: var(--accent-amor); transition: width 0.4s ease; }
|
||||
.diag-progress span[data-state="active"]::after,
|
||||
.diag-progress span[data-state="done"]::after { width: 100%; }
|
||||
|
||||
.diag-step { display: none; }
|
||||
.diag-step.active { display: block; animation: fadein 0.4s ease; }
|
||||
@keyframes fadein { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: translateY(0);} }
|
||||
|
||||
.diag-options { display: grid; gap: 0.7rem; margin-top: var(--space-3); }
|
||||
.diag-option {
|
||||
text-align: left;
|
||||
padding: 1rem 1.2rem;
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 16px;
|
||||
background: var(--bg-raised);
|
||||
font-family: var(--font-body);
|
||||
transition: border-color 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
.diag-option:hover { border-color: var(--accent-roma-bright); }
|
||||
.diag-option[aria-pressed="true"] { border-color: var(--accent-amor); background: color-mix(in srgb, var(--accent-amor) 12%, var(--bg-raised)); }
|
||||
|
||||
.diag-nav { display: flex; justify-content: space-between; margin-top: var(--space-4); }
|
||||
.diag-result {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 24px;
|
||||
padding: var(--space-4);
|
||||
background: var(--bg-raised);
|
||||
}
|
||||
.diag-result h3 { margin-bottom: var(--space-2); }
|
||||
|
||||
form.form-grid {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
@media (min-width: 700px) { form.form-grid.two-col { grid-template-columns: 1fr 1fr; } }
|
||||
.field { display: flex; flex-direction: column; gap: 0.4rem; }
|
||||
.field label { font-family: var(--font-small); font-size: 0.82rem; color: var(--text-soft); }
|
||||
.field input, .field select, .field textarea {
|
||||
padding: 0.85rem 1rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--border-strong);
|
||||
background: var(--bg-raised);
|
||||
color: var(--text);
|
||||
}
|
||||
.field input:focus, .field select:focus, .field textarea:focus {
|
||||
outline: 2px solid var(--accent-roma-bright);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
.field.full { grid-column: 1 / -1; }
|
||||
|
||||
.confirmation-box {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 20px;
|
||||
padding: var(--space-3);
|
||||
background: color-mix(in srgb, var(--accent-roma) 12%, var(--bg-raised));
|
||||
display: none;
|
||||
}
|
||||
.confirmation-box.show { display: block; }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
|
||||
}
|
||||
|
||||
:focus-visible { outline: 3px solid var(--accent-roma-bright); outline-offset: 2px; }
|
||||
@@ -0,0 +1,200 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es-AR">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Diagnóstico — Amor y Roma</title>
|
||||
<meta name="description" content="Respondé 5 preguntas y descubrí qué solución digital necesita hoy tu negocio.">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="container nav-row">
|
||||
<a href="index.html" class="logo-mark" aria-label="Amor y Roma — inicio">
|
||||
<svg viewBox="0 0 80 70" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M2 66V34C2 16.3 16.3 2 34 2H46C63.7 2 78 16.3 78 34V66" stroke="var(--accent-blush)" stroke-width="6" fill="none" opacity="0.55"/>
|
||||
<path d="M14 66V34C14 20.7 24.7 10 38 10H42C55.3 10 66 20.7 66 34V66" stroke="currentColor" stroke-width="6" fill="none"/>
|
||||
</svg>
|
||||
<span class="wordmark">amor&roma</span>
|
||||
</a>
|
||||
<nav class="nav-links" aria-label="Navegación principal">
|
||||
<a href="index.html">Inicio</a>
|
||||
<a href="servicios.html">Servicios</a>
|
||||
<a href="planes.html">Planes</a>
|
||||
<a href="portfolio.html">Portfolio</a>
|
||||
<a href="nosotros.html">Nosotros</a>
|
||||
<a href="metodo.html">Método</a>
|
||||
<a href="contacto.html">Contacto</a>
|
||||
</nav>
|
||||
<div class="nav-actions">
|
||||
<a href="diagnostico.html" class="btn btn-primary" aria-current="page">Encontrá tu solución</a>
|
||||
<button class="theme-toggle" data-theme-toggle type="button" aria-label="Cambiar tema claro/oscuro">
|
||||
<svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
|
||||
<svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.8A9 9 0 1111.2 3a7 7 0 009.8 9.8z"/></svg>
|
||||
</button>
|
||||
<button class="nav-toggle" data-nav-toggle type="button" aria-label="Abrir menú" aria-expanded="false">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-menu" data-mobile-menu>
|
||||
<a href="index.html">Inicio</a>
|
||||
<a href="servicios.html">Servicios</a>
|
||||
<a href="planes.html">Planes</a>
|
||||
<a href="portfolio.html">Portfolio</a>
|
||||
<a href="nosotros.html">Nosotros</a>
|
||||
<a href="metodo.html">Método</a>
|
||||
<a href="diagnostico.html">Diagnóstico</a>
|
||||
<a href="contacto.html">Contacto</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="section-tight">
|
||||
<div class="container diag-wrap">
|
||||
<p class="eyebrow" style="text-align:center;">Diagnóstico</p>
|
||||
<h1 style="font-size:var(--step-2); text-align:center;">¿Qué necesita hoy tu negocio?</h1>
|
||||
<p id="diag-context-banner" hidden style="text-align:center; margin-top:0.6rem; color:var(--accent-roma-bright); font-family:var(--font-small); font-size:0.9rem;"></p>
|
||||
|
||||
<form id="diagnostico" style="margin-top:var(--space-4);">
|
||||
<div class="diag-progress"></div>
|
||||
|
||||
<div class="diag-step" data-step="necesidad">
|
||||
<h3 style="text-align:center;">¿Qué estás buscando resolver?</h3>
|
||||
<div class="diag-options">
|
||||
<button type="button" class="diag-option" data-field="necesidad" data-value="marca" aria-pressed="false">Marca</button>
|
||||
<button type="button" class="diag-option" data-field="necesidad" data-value="presencia" aria-pressed="false">Presencia digital</button>
|
||||
<button type="button" class="diag-option" data-field="necesidad" data-value="contenido" aria-pressed="false">Contenido</button>
|
||||
<button type="button" class="diag-option" data-field="necesidad" data-value="web" aria-pressed="false">Web</button>
|
||||
<button type="button" class="diag-option" data-field="necesidad" data-value="captacion" aria-pressed="false">Captación de clientes</button>
|
||||
<button type="button" class="diag-option" data-field="necesidad" data-value="automatizacion" aria-pressed="false">Automatización</button>
|
||||
<button type="button" class="diag-option" data-field="necesidad" data-value="varias" aria-pressed="false">Varias cosas</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="diag-step" data-step="etapa">
|
||||
<h3 style="text-align:center;">¿En qué etapa está tu negocio?</h3>
|
||||
<div class="diag-options">
|
||||
<button type="button" class="diag-option" data-field="etapa" data-value="comenzando" aria-pressed="false">Estoy empezando</button>
|
||||
<button type="button" class="diag-option" data-field="etapa" data-value="validando" aria-pressed="false">Ya estoy vendiendo</button>
|
||||
<button type="button" class="diag-option" data-field="etapa" data-value="creciendo" aria-pressed="false">Estoy creciendo</button>
|
||||
<button type="button" class="diag-option" data-field="etapa" data-value="consolidado" aria-pressed="false">Estoy consolidado</button>
|
||||
</div>
|
||||
<div class="diag-nav"><button type="button" class="btn btn-secondary" data-action="back">← Volver</button><span></span></div>
|
||||
</div>
|
||||
|
||||
<div class="diag-step" data-step="desafio">
|
||||
<h3 style="text-align:center;">¿Cuál es hoy tu principal desafío?</h3>
|
||||
<div class="diag-options"><!-- se completa dinámicamente según la necesidad --></div>
|
||||
<div class="diag-nav"><button type="button" class="btn btn-secondary" data-action="back">← Volver</button><span></span></div>
|
||||
</div>
|
||||
|
||||
<div class="diag-step" data-step="objetivo">
|
||||
<h3 style="text-align:center;">¿Qué querés conseguir?</h3>
|
||||
<div class="diag-options">
|
||||
<button type="button" class="diag-option" data-field="objetivo" data-value="vender" aria-pressed="false">Vender más</button>
|
||||
<button type="button" class="diag-option" data-field="objetivo" data-value="profesionalizar" aria-pressed="false">Profesionalizar mi imagen</button>
|
||||
<button type="button" class="diag-option" data-field="objetivo" data-value="clientes" aria-pressed="false">Generar más clientes</button>
|
||||
<button type="button" class="diag-option" data-field="objetivo" data-value="tiempo" aria-pressed="false">Ahorrar tiempo con procesos</button>
|
||||
<button type="button" class="diag-option" data-field="objetivo" data-value="referente" aria-pressed="false">Posicionarme como referente</button>
|
||||
</div>
|
||||
<div class="diag-nav"><button type="button" class="btn btn-secondary" data-action="back">← Volver</button><span></span></div>
|
||||
</div>
|
||||
|
||||
<div class="diag-step" data-step="madurez">
|
||||
<h3 style="text-align:center;">¿Qué tan desarrollada está tu presencia digital?</h3>
|
||||
<div class="diag-options">
|
||||
<button type="button" class="diag-option" data-field="madurez" data-value="nula" aria-pressed="false">Nula, recién empiezo</button>
|
||||
<button type="button" class="diag-option" data-field="madurez" data-value="basica" aria-pressed="false">Básica (redes o web simple)</button>
|
||||
<button type="button" class="diag-option" data-field="madurez" data-value="intermedia" aria-pressed="false">Intermedia, sin estrategia clara</button>
|
||||
<button type="button" class="diag-option" data-field="madurez" data-value="avanzada" aria-pressed="false">Avanzada, ya tengo tracción</button>
|
||||
</div>
|
||||
<div class="diag-nav"><button type="button" class="btn btn-secondary" data-action="back">← Volver</button><span></span></div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id="diag-result" class="diag-result" hidden></div>
|
||||
|
||||
<div id="diag-capture" hidden style="margin-top:var(--space-4);">
|
||||
<form id="diag-lead-form" class="form-grid two-col">
|
||||
<input type="hidden" id="diag-plan-hidden" name="plan">
|
||||
<input type="hidden" id="diag-solucion-hidden" name="solucion">
|
||||
<div class="field"><label for="d-nombre">Nombre</label><input id="d-nombre" name="nombre" type="text" required></div>
|
||||
<div class="field"><label for="d-empresa">Empresa</label><input id="d-empresa" name="empresa" type="text"></div>
|
||||
<div class="field"><label for="d-email">Email</label><input id="d-email" name="email" type="email" required></div>
|
||||
<div class="field"><label for="d-whatsapp">WhatsApp</label><input id="d-whatsapp" name="whatsapp" type="tel"></div>
|
||||
<div class="field full"><button type="submit" class="btn btn-primary" style="justify-content:center;">Quiero hablar con Amor y Roma</button></div>
|
||||
</form>
|
||||
<div id="diag-confirmation" class="confirmation-box">
|
||||
<h4>Recibimos tu diagnóstico.</h4>
|
||||
<p style="margin-top:0.6rem; color:var(--text-soft);">Gracias por contarnos sobre tu negocio. En breve nos ponemos en contacto para conversar sobre el próximo paso.</p>
|
||||
</div>
|
||||
<div style="text-align:center; margin-top:var(--space-2);">
|
||||
<button type="button" class="btn btn-ghost" data-action="restart">Volver a revisar mis respuestas</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<div class="foot-grid">
|
||||
<div>
|
||||
<div class="logo-mark" style="color:var(--c-mist);">
|
||||
<svg viewBox="0 0 80 70" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="height:30px;">
|
||||
<path d="M2 66V34C2 16.3 16.3 2 34 2H46C63.7 2 78 16.3 78 34V66" stroke="var(--accent-blush)" stroke-width="6" fill="none" opacity="0.55"/>
|
||||
<path d="M14 66V34C14 20.7 24.7 10 38 10H42C55.3 10 66 20.7 66 34V66" stroke="currentColor" stroke-width="6" fill="none"/>
|
||||
</svg>
|
||||
<span class="wordmark" style="color:var(--c-mist);">amor&roma</span>
|
||||
</div>
|
||||
<p style="margin-top:0.8rem; color:#c9c2d6; font-style:italic; font-family:var(--font-display);">Marcas con esencia, construidas con estrategia.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Navegación</h5>
|
||||
<ul>
|
||||
<li><a href="index.html">Inicio</a></li>
|
||||
<li><a href="servicios.html">Servicios</a></li>
|
||||
<li><a href="planes.html">Planes</a></li>
|
||||
<li><a href="portfolio.html">Portfolio</a></li>
|
||||
<li><a href="nosotros.html">Nosotros</a></li>
|
||||
<li><a href="metodo.html">Método</a></li>
|
||||
<li><a href="diagnostico.html">Diagnóstico</a></li>
|
||||
<li><a href="contacto.html">Contacto</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Servicios</h5>
|
||||
<ul>
|
||||
<li><a href="servicios.html#branding">Branding</a></li>
|
||||
<li><a href="servicios.html#redes">Redes</a></li>
|
||||
<li><a href="servicios.html#web">Web</a></li>
|
||||
<li><a href="servicios.html#automatizaciones">Automatizaciones</a></li>
|
||||
<li><a href="servicios.html#paid-media">Paid Media</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Contacto <span style="opacity:.6; font-weight:400;">(datos de prueba)</span></h5>
|
||||
<ul>
|
||||
<li><a href="mailto:hola@amoryroma.com.ar">hola@amoryroma.com.ar</a></li>
|
||||
<li><a href="https://wa.me/5491100000000" target="_blank" rel="noopener">+54 9 11 0000-0000</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="foot-bottom">
|
||||
<span>© <span data-year></span> Amor y Roma — Estudio Creativo. www.amoryroma.com.ar</span>
|
||||
<span>Política de privacidad · Términos y condiciones · Cookies</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<a class="whatsapp-float" href="https://wa.me/5491100000000" target="_blank" rel="noopener" aria-label="Escribir por WhatsApp">
|
||||
<svg viewBox="0 0 32 32" fill="currentColor" aria-hidden="true"><path d="M16.01 3C9.38 3 4 8.38 4 15.01c0 2.26.61 4.38 1.68 6.2L4 29l7.98-1.64a11.9 11.9 0 004.03.7c6.63 0 12.01-5.38 12.01-12.05C28.02 8.38 22.64 3 16.01 3zm0 21.8c-1.98 0-3.85-.55-5.44-1.5l-.39-.23-4.86 1 1.03-4.72-.25-.4a9.7 9.7 0 01-1.5-5.15c0-5.4 4.39-9.79 9.8-9.79 5.4 0 9.79 4.39 9.79 9.79.01 5.4-4.38 9.79-9.78 10zM21.4 18c-.28-.14-1.66-.82-1.92-.91-.26-.1-.44-.14-.63.14-.19.28-.72.9-.88 1.09-.16.19-.32.2-.6.07-.28-.14-1.17-.43-2.23-1.37-.83-.74-1.38-1.65-1.55-1.93-.16-.28-.02-.43.12-.57.13-.13.28-.33.42-.5.14-.16.19-.28.28-.47.09-.19.05-.35-.02-.5-.07-.14-.63-1.52-.87-2.08-.23-.55-.46-.47-.63-.48h-.54c-.19 0-.5.07-.76.35-.26.28-1 .98-1 2.38 0 1.4 1.02 2.76 1.16 2.95.14.19 2 3.05 4.85 4.27.68.29 1.21.47 1.62.6.68.22 1.3.19 1.79.11.55-.08 1.66-.68 1.9-1.34.24-.66.24-1.22.17-1.34-.07-.12-.25-.19-.53-.33z"/></svg>
|
||||
</a>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
<script src="js/diagnostico.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+305
@@ -0,0 +1,305 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es-AR">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Amor y Roma — Agencia boutique de marketing digital</title>
|
||||
<meta name="description" content="Creatividad, estrategia y tecnología para construir marcas que importan. Agencia boutique de marketing digital.">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="container nav-row">
|
||||
<a href="index.html" class="logo-mark" aria-label="Amor y Roma — inicio">
|
||||
<svg viewBox="0 0 80 70" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M2 66V34C2 16.3 16.3 2 34 2H46C63.7 2 78 16.3 78 34V66" stroke="var(--accent-blush)" stroke-width="6" fill="none" opacity="0.55"/>
|
||||
<path d="M14 66V34C14 20.7 24.7 10 38 10H42C55.3 10 66 20.7 66 34V66" stroke="currentColor" stroke-width="6" fill="none"/>
|
||||
</svg>
|
||||
<span class="wordmark">amor&roma</span>
|
||||
</a>
|
||||
<nav class="nav-links" aria-label="Navegación principal">
|
||||
<a href="index.html" aria-current="page">Inicio</a>
|
||||
<a href="servicios.html">Servicios</a>
|
||||
<a href="planes.html">Planes</a>
|
||||
<a href="portfolio.html">Portfolio</a>
|
||||
<a href="nosotros.html">Nosotros</a>
|
||||
<a href="metodo.html">Método</a>
|
||||
<a href="contacto.html">Contacto</a>
|
||||
</nav>
|
||||
<div class="nav-actions">
|
||||
<a href="diagnostico.html" class="btn btn-primary">Encontrá tu solución</a>
|
||||
<button class="theme-toggle" data-theme-toggle type="button" aria-label="Cambiar tema claro/oscuro">
|
||||
<svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
|
||||
<svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.8A9 9 0 1111.2 3a7 7 0 009.8 9.8z"/></svg>
|
||||
</button>
|
||||
<button class="nav-toggle" data-nav-toggle type="button" aria-label="Abrir menú" aria-expanded="false">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-menu" data-mobile-menu>
|
||||
<a href="index.html">Inicio</a>
|
||||
<a href="servicios.html">Servicios</a>
|
||||
<a href="planes.html">Planes</a>
|
||||
<a href="portfolio.html">Portfolio</a>
|
||||
<a href="nosotros.html">Nosotros</a>
|
||||
<a href="metodo.html">Método</a>
|
||||
<a href="diagnostico.html">Diagnóstico</a>
|
||||
<a href="contacto.html">Contacto</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<canvas id="hero-canvas" aria-hidden="true"></canvas>
|
||||
<div class="container">
|
||||
<div class="hero-copy">
|
||||
<p class="eyebrow">Estudio creativo · marketing digital</p>
|
||||
<h1>Creatividad, estrategia y tecnología para construir marcas que importan.</h1>
|
||||
<p class="lede" style="margin-top:1.2rem;">Somos una agencia boutique: sin plantillas, con capacidad controlada de cuentas y foco absoluto en la calidad visual y de contenido. Combinamos dirección de arte con estructura digital orientada a resultados.</p>
|
||||
<div class="btn-row">
|
||||
<a href="diagnostico.html" class="btn btn-primary">Encontrá tu solución</a>
|
||||
<a href="servicios.html" class="btn btn-secondary">Ver nuestros servicios</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- AMOR + ROMA -->
|
||||
<section class="section-tight">
|
||||
<div class="container">
|
||||
<p class="eyebrow">El concepto</p>
|
||||
<h2 style="max-width:16ch;">Dos fuerzas. Una forma de construir.</h2>
|
||||
<div class="duo-columns" style="margin-top:var(--space-4);">
|
||||
<div class="duo-col amor">
|
||||
<h4 style="color:var(--accent-amor);">AMOR</h4>
|
||||
<ul>
|
||||
<li>Pasión</li>
|
||||
<li>Arte</li>
|
||||
<li>Identidad</li>
|
||||
<li>Dirección creativa</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="duo-col roma">
|
||||
<h4 style="color:var(--accent-roma-bright);">ROMA</h4>
|
||||
<ul>
|
||||
<li>Estrategia</li>
|
||||
<li>Arquitectura</li>
|
||||
<li>Tecnología</li>
|
||||
<li>Procesos</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p class="lede" style="margin-top:var(--space-3); max-width:60ch;">La creatividad atrae. La estrategia la convierte en crecimiento. No somos "otra agencia de marketing": diagnosticamos, diseñamos y construimos soluciones digitales a medida.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PROBLEMAS -->
|
||||
<section>
|
||||
<div class="container">
|
||||
<p class="eyebrow">Puntos de partida frecuentes</p>
|
||||
<h2 style="max-width:20ch;">Desafíos que ayudamos a resolver.</h2>
|
||||
<div class="grid grid-3" style="margin-top:var(--space-4);">
|
||||
<div class="card"><p>"Mi marca no refleja el valor de mi negocio."</p></div>
|
||||
<div class="card"><p>"Tengo redes, pero no generan resultados."</p></div>
|
||||
<div class="card"><p>"Necesito una web que realmente venda."</p></div>
|
||||
<div class="card"><p>"Estoy perdiendo oportunidades por procesos manuales."</p></div>
|
||||
<div class="card"><p>"Necesito atraer clientes con publicidad."</p></div>
|
||||
<div class="card"><p>"Mi negocio creció y mi presencia digital quedó atrás."</p></div>
|
||||
</div>
|
||||
<div style="margin-top:var(--space-4);">
|
||||
<a href="diagnostico.html" class="btn btn-primary">Quiero descubrir qué necesito</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ECOSISTEMA DE SERVICIOS -->
|
||||
<section class="section-tight" style="background:var(--bg-sunken);">
|
||||
<div class="container">
|
||||
<p class="eyebrow">Ecosistema de soluciones</p>
|
||||
<h2 style="max-width:22ch;">Una estrategia construida alrededor de tu negocio.</h2>
|
||||
<div class="grid grid-3" style="margin-top:var(--space-4);">
|
||||
<article class="service-card">
|
||||
<span class="index">01</span>
|
||||
<h3 style="font-size:var(--step-1);">Branding & Identidad</h3>
|
||||
<p style="color:var(--text-soft);">Construcción de identidad, universo visual y posicionamiento.</p>
|
||||
<ul><li>Identidad</li><li>Logo</li><li>Sistema visual</li><li>Manual</li></ul>
|
||||
</article>
|
||||
<article class="service-card">
|
||||
<span class="index">02</span>
|
||||
<h3 style="font-size:var(--step-1);">Redes Sociales & Contenido</h3>
|
||||
<p style="color:var(--text-soft);">Contenido, dirección de arte, estrategia y gestión de comunidad.</p>
|
||||
<ul><li>Estrategia</li><li>Contenido</li><li>Copywriting</li><li>Comunidad</li></ul>
|
||||
</article>
|
||||
<article class="service-card">
|
||||
<span class="index">03</span>
|
||||
<h3 style="font-size:var(--step-1);">Desarrollo Web</h3>
|
||||
<p style="color:var(--text-soft);">Activos digitales diseñados alrededor del negocio y el embudo.</p>
|
||||
<ul><li>Arquitectura</li><li>UX</li><li>SEO</li><li>Analítica</li></ul>
|
||||
</article>
|
||||
<article class="service-card">
|
||||
<span class="index">04</span>
|
||||
<h3 style="font-size:var(--step-1);">Automatizaciones</h3>
|
||||
<p style="color:var(--text-soft);">Conversaciones, captación y cualificación de prospectos.</p>
|
||||
<ul><li>Conversación</li><li>Captación</li><li>Cualificación</li><li>Seguimiento</li></ul>
|
||||
</article>
|
||||
<article class="service-card">
|
||||
<span class="index">05</span>
|
||||
<h3 style="font-size:var(--step-1);">Paid Media</h3>
|
||||
<p style="color:var(--text-soft);">Publicidad, campañas, optimización y adquisición.</p>
|
||||
<ul><li>Campañas</li><li>Creatividades</li><li>Audiencias</li><li>Optimización</li></ul>
|
||||
</article>
|
||||
</div>
|
||||
<div style="margin-top:var(--space-4);">
|
||||
<a href="servicios.html" class="btn btn-secondary">Explorar servicios</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PLANES -->
|
||||
<section>
|
||||
<div class="container">
|
||||
<p class="eyebrow">Planes de crecimiento</p>
|
||||
<h2 style="max-width:20ch;">Distintos negocios. Distintas etapas. Un mismo objetivo: crecer.</h2>
|
||||
<div class="grid grid-4" style="margin-top:var(--space-4);">
|
||||
<div class="card"><h4 style="font-size:var(--step-0);">Esencial</h4><p style="color:var(--text-soft); font-size:0.92rem; margin-top:0.5rem;">Para ordenar y profesionalizar tu imagen desde cero.</p></div>
|
||||
<div class="card"><h4 style="font-size:var(--step-0);">Impulso</h4><p style="color:var(--text-soft); font-size:0.92rem; margin-top:0.5rem;">Para crecer comunidad y validar tu propuesta.</p></div>
|
||||
<div class="card" style="border-color:var(--accent-amor);"><h4 style="font-size:var(--step-0); color:var(--accent-amor);">Premium</h4><p style="color:var(--text-soft); font-size:0.92rem; margin-top:0.5rem;">Para convertir tracción en posicionamiento.</p></div>
|
||||
<div class="card"><h4 style="font-size:var(--step-0);">Élite</h4><p style="color:var(--text-soft); font-size:0.92rem; margin-top:0.5rem;">Para liderazgo de marca y omnicanalidad.</p></div>
|
||||
</div>
|
||||
<div class="btn-row" style="display:flex; gap:1rem; flex-wrap:wrap; margin-top:var(--space-4);">
|
||||
<a href="planes.html" class="btn btn-primary">Comparar planes</a>
|
||||
<a href="diagnostico.html" class="btn btn-ghost">No sé cuál necesito →</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PORTFOLIO DESTACADO -->
|
||||
<section class="section-tight" style="background:var(--bg-sunken);">
|
||||
<div class="container">
|
||||
<p class="eyebrow">Trabajo que habla por nosotros</p>
|
||||
<h2 style="max-width:20ch;">Proyectos que combinan identidad, estrategia y estructura.</h2>
|
||||
<div class="grid grid-3" style="margin-top:var(--space-4);">
|
||||
<div class="case-card">
|
||||
<div class="thumb">Identidad Integral · placeholder</div>
|
||||
<div class="body">
|
||||
<h4 style="font-size:1.05rem;">Identidad Integral</h4>
|
||||
<p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.4rem;">Branding + personaje de marca + gestión de RRSS.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="case-card">
|
||||
<div class="thumb">Infraestructura Institucional · placeholder</div>
|
||||
<div class="body">
|
||||
<h4 style="font-size:1.05rem;">Infraestructura Institucional</h4>
|
||||
<p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.4rem;">Web corporativa B2B, credibilidad y solidez.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="case-card">
|
||||
<div class="thumb">Ecosistema Digital · placeholder</div>
|
||||
<div class="body">
|
||||
<h4 style="font-size:1.05rem;">Ecosistema Digital</h4>
|
||||
<p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.4rem;">Branding + Web + Redes, integrados desde cero.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:var(--space-4);">
|
||||
<a href="portfolio.html" class="btn btn-secondary">Ver portfolio completo</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- MÉTODO -->
|
||||
<section>
|
||||
<div class="container">
|
||||
<p class="eyebrow">Cómo trabajamos</p>
|
||||
<h2 style="max-width:16ch;">No improvisamos.</h2>
|
||||
<div class="timeline" style="margin-top:var(--space-4);">
|
||||
<div class="step"><span class="num">01</span><h4 style="font-style:normal; font-size:1.05rem; margin-top:0.4rem;">Diagnóstico</h4></div>
|
||||
<div class="step"><span class="num">02</span><h4 style="font-style:normal; font-size:1.05rem; margin-top:0.4rem;">Estrategia</h4></div>
|
||||
<div class="step"><span class="num">03</span><h4 style="font-style:normal; font-size:1.05rem; margin-top:0.4rem;">Producción</h4></div>
|
||||
<div class="step"><span class="num">04</span><h4 style="font-style:normal; font-size:1.05rem; margin-top:0.4rem;">Validación</h4></div>
|
||||
<div class="step"><span class="num">05</span><h4 style="font-style:normal; font-size:1.05rem; margin-top:0.4rem;">Medición</h4></div>
|
||||
</div>
|
||||
<div style="margin-top:var(--space-4);">
|
||||
<a href="metodo.html" class="btn btn-ghost">Conocé nuestro método →</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA FINAL -->
|
||||
<section style="background:var(--c-plum-2); color:var(--c-mist);">
|
||||
<div class="container" style="text-align:center;">
|
||||
<h2 style="max-width:20ch; margin-inline:auto; color:var(--c-mist);">Tu próximo paso no tiene que ser otra publicación. Tiene que ser una estrategia.</h2>
|
||||
<div class="btn-row" style="justify-content:center; margin-top:var(--space-3);">
|
||||
<a href="diagnostico.html" class="btn btn-primary">Empezar diagnóstico</a>
|
||||
<a href="contacto.html" class="btn btn-secondary" style="border-color:rgba(234,240,238,0.3); color:var(--c-mist);">Hablar con Amor y Roma</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<div class="foot-grid">
|
||||
<div>
|
||||
<div class="logo-mark" style="color:var(--c-mist);">
|
||||
<svg viewBox="0 0 80 70" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="height:30px;">
|
||||
<path d="M2 66V34C2 16.3 16.3 2 34 2H46C63.7 2 78 16.3 78 34V66" stroke="var(--accent-blush)" stroke-width="6" fill="none" opacity="0.55"/>
|
||||
<path d="M14 66V34C14 20.7 24.7 10 38 10H42C55.3 10 66 20.7 66 34V66" stroke="currentColor" stroke-width="6" fill="none"/>
|
||||
</svg>
|
||||
<span class="wordmark" style="color:var(--c-mist);">amor&roma</span>
|
||||
</div>
|
||||
<p style="margin-top:0.8rem; color:#c9c2d6; font-style:italic; font-family:var(--font-display);">Marcas con esencia, construidas con estrategia.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Navegación</h5>
|
||||
<ul>
|
||||
<li><a href="index.html">Inicio</a></li>
|
||||
<li><a href="servicios.html">Servicios</a></li>
|
||||
<li><a href="planes.html">Planes</a></li>
|
||||
<li><a href="portfolio.html">Portfolio</a></li>
|
||||
<li><a href="nosotros.html">Nosotros</a></li>
|
||||
<li><a href="metodo.html">Método</a></li>
|
||||
<li><a href="diagnostico.html">Diagnóstico</a></li>
|
||||
<li><a href="contacto.html">Contacto</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Servicios</h5>
|
||||
<ul>
|
||||
<li><a href="servicios.html#branding">Branding</a></li>
|
||||
<li><a href="servicios.html#redes">Redes</a></li>
|
||||
<li><a href="servicios.html#web">Web</a></li>
|
||||
<li><a href="servicios.html#automatizaciones">Automatizaciones</a></li>
|
||||
<li><a href="servicios.html#paid-media">Paid Media</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Contacto <span style="opacity:.6; font-weight:400;">(datos de prueba)</span></h5>
|
||||
<ul>
|
||||
<li><a href="mailto:hola@amoryroma.com.ar">hola@amoryroma.com.ar</a></li>
|
||||
<li><a href="https://wa.me/5491100000000" target="_blank" rel="noopener">+54 9 11 0000-0000</a></li>
|
||||
<li><a href="https://instagram.com/amoryroma" target="_blank" rel="noopener">Instagram</a></li>
|
||||
<li><a href="https://linkedin.com/company/amoryroma" target="_blank" rel="noopener">LinkedIn</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="foot-bottom">
|
||||
<span>© <span data-year></span> Amor y Roma — Estudio Creativo. www.amoryroma.com.ar</span>
|
||||
<span>Política de privacidad · Términos y condiciones · Cookies</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<a class="whatsapp-float" href="https://wa.me/5491100000000" target="_blank" rel="noopener" aria-label="Escribir por WhatsApp">
|
||||
<svg viewBox="0 0 32 32" fill="currentColor" aria-hidden="true"><path d="M16.01 3C9.38 3 4 8.38 4 15.01c0 2.26.61 4.38 1.68 6.2L4 29l7.98-1.64a11.9 11.9 0 004.03.7c6.63 0 12.01-5.38 12.01-12.05C28.02 8.38 22.64 3 16.01 3zm0 21.8c-1.98 0-3.85-.55-5.44-1.5l-.39-.23-4.86 1 1.03-4.72-.25-.4a9.7 9.7 0 01-1.5-5.15c0-5.4 4.39-9.79 9.8-9.79 5.4 0 9.79 4.39 9.79 9.79.01 5.4-4.38 9.79-9.78 10zM21.4 18c-.28-.14-1.66-.82-1.92-.91-.26-.1-.44-.14-.63.14-.19.28-.72.9-.88 1.09-.16.19-.32.2-.6.07-.28-.14-1.17-.43-2.23-1.37-.83-.74-1.38-1.65-1.55-1.93-.16-.28-.02-.43.12-.57.13-.13.28-.33.42-.5.14-.16.19-.28.28-.47.09-.19.05-.35-.02-.5-.07-.14-.63-1.52-.87-2.08-.23-.55-.46-.47-.63-.48h-.54c-.19 0-.5.07-.76.35-.26.28-1 .98-1 2.38 0 1.4 1.02 2.76 1.16 2.95.14.19 2 3.05 4.85 4.27.68.29 1.21.47 1.62.6.68.22 1.3.19 1.79.11.55-.08 1.66-.68 1.9-1.34.24-.66.24-1.22.17-1.34-.07-.12-.25-.19-.53-.33z"/></svg>
|
||||
</a>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
<script src="js/hero-canvas.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,11 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
const form = document.getElementById("contact-form");
|
||||
const confirmBox = document.getElementById("contact-confirmation");
|
||||
form?.addEventListener("submit", (e) => {
|
||||
e.preventDefault();
|
||||
form.hidden = true;
|
||||
confirmBox?.classList.add("show");
|
||||
confirmBox?.scrollIntoView({ behavior: "smooth", block: "center" });
|
||||
});
|
||||
})();
|
||||
@@ -0,0 +1,255 @@
|
||||
// ============================================================
|
||||
// AMOR & ROMA — Diagnóstico interactivo
|
||||
// 5 preguntas máx., con lógica condicional real:
|
||||
// - La pregunta 3 cambia según la respuesta de la pregunta 1.
|
||||
// - Si el usuario llega con contexto (?interes=redes o ?plan=premium
|
||||
// desde Servicios/Planes), se preselecciona y se saltea esa pregunta.
|
||||
// - El resultado combina las 5 respuestas en una recomendación de
|
||||
// servicio + plan sugerido.
|
||||
// ============================================================
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
const form = document.getElementById("diagnostico");
|
||||
if (!form) return;
|
||||
|
||||
/* ---------- Contexto heredado desde otras páginas ---------- */
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const preInteres = params.get("interes"); // ej: redes, web, marca, automatizacion, captacion, varias
|
||||
const prePlan = params.get("plan"); // ej: esencial, impulso, premium, elite
|
||||
|
||||
const state = {
|
||||
necesidad: preInteres || null,
|
||||
etapa: null,
|
||||
desafio: null,
|
||||
objetivo: null,
|
||||
madurez: null,
|
||||
planPrevio: prePlan || null,
|
||||
};
|
||||
|
||||
/* ---------- Banco de preguntas ---------- */
|
||||
const desafiosPorNecesidad = {
|
||||
marca: [
|
||||
["identidad-debil", "Mi identidad no refleja el valor real de mi negocio"],
|
||||
["sin-relato", "No sé cómo comunicar lo que hago de forma consistente"],
|
||||
["rediseno", "Necesito un rediseño completo, lo actual ya no funciona"],
|
||||
],
|
||||
presencia: [
|
||||
["redes-sin-resultado", "Tengo redes, pero no generan resultados"],
|
||||
["sin-web", "No tengo una web propia"],
|
||||
["inconsistencia", "Todo se ve desordenado o inconsistente entre canales"],
|
||||
],
|
||||
contenido: [
|
||||
["sin-tiempo", "No tengo tiempo para crear contenido de forma constante"],
|
||||
["sin-estrategia", "No sé qué contenido realmente funciona"],
|
||||
["calidad", "Necesito subir la calidad de producción"],
|
||||
],
|
||||
web: [
|
||||
["sin-web-propia", "No tengo web propia todavía"],
|
||||
["no-convierte", "Tengo web, pero no convierte visitas en clientes"],
|
||||
["ecommerce", "Necesito catálogo o e-commerce"],
|
||||
],
|
||||
captacion: [
|
||||
["pocos-leads", "No estoy generando suficientes oportunidades"],
|
||||
["procesos-manuales", "Pierdo oportunidades por procesos manuales"],
|
||||
["necesito-ads", "Necesito publicidad paga para atraer clientes"],
|
||||
],
|
||||
automatizacion: [
|
||||
["todo-manual", "Respondo consultas manualmente y no llego a todo"],
|
||||
["sin-seguimiento", "Pierdo leads por falta de seguimiento"],
|
||||
["integracion", "Necesito integrar WhatsApp, redes y CRM"],
|
||||
],
|
||||
varias: [
|
||||
["desde-cero", "Necesito ordenar todo desde cero"],
|
||||
["piezas-sueltas", "Tengo piezas sueltas que no están integradas"],
|
||||
["ecosistema", "Quiero un ecosistema digital completo"],
|
||||
],
|
||||
};
|
||||
|
||||
const necesidadLabels = {
|
||||
marca: "Marca",
|
||||
presencia: "Presencia digital",
|
||||
contenido: "Contenido",
|
||||
web: "Web",
|
||||
captacion: "Captación de clientes",
|
||||
automatizacion: "Automatización",
|
||||
varias: "Varias cosas",
|
||||
};
|
||||
|
||||
/* ---------- Elementos del DOM ---------- */
|
||||
const steps = Array.from(form.querySelectorAll(".diag-step"));
|
||||
const progressWrap = form.querySelector(".diag-progress");
|
||||
const resultBox = document.getElementById("diag-result");
|
||||
const captureBox = document.getElementById("diag-capture");
|
||||
|
||||
let order = ["necesidad", "etapa", "desafio", "objetivo", "madurez"];
|
||||
if (preInteres && necesidadLabels[preInteres]) {
|
||||
order = order.filter((k) => k !== "necesidad");
|
||||
}
|
||||
let currentIndex = 0;
|
||||
|
||||
function buildProgress() {
|
||||
progressWrap.innerHTML = "";
|
||||
order.forEach(() => {
|
||||
const span = document.createElement("span");
|
||||
progressWrap.appendChild(span);
|
||||
});
|
||||
}
|
||||
|
||||
function updateProgress() {
|
||||
Array.from(progressWrap.children).forEach((span, i) => {
|
||||
span.dataset.state = i < currentIndex ? "done" : i === currentIndex ? "active" : "";
|
||||
});
|
||||
}
|
||||
|
||||
function renderDesafioOptions() {
|
||||
const target = form.querySelector('[data-step="desafio"] .diag-options');
|
||||
const necesidad = state.necesidad || "varias";
|
||||
const options = desafiosPorNecesidad[necesidad] || desafiosPorNecesidad.varias;
|
||||
target.innerHTML = "";
|
||||
options.forEach(([value, label]) => {
|
||||
const btn = document.createElement("button");
|
||||
btn.type = "button";
|
||||
btn.className = "diag-option";
|
||||
btn.dataset.field = "desafio";
|
||||
btn.dataset.value = value;
|
||||
btn.setAttribute("aria-pressed", "false");
|
||||
btn.textContent = label;
|
||||
target.appendChild(btn);
|
||||
});
|
||||
attachOptionHandlers(target);
|
||||
}
|
||||
|
||||
function attachOptionHandlers(scope) {
|
||||
scope.querySelectorAll(".diag-option").forEach((btn) => {
|
||||
btn.addEventListener("click", () => {
|
||||
scope.querySelectorAll(".diag-option").forEach((b) => b.setAttribute("aria-pressed", "false"));
|
||||
btn.setAttribute("aria-pressed", "true");
|
||||
state[btn.dataset.field] = btn.dataset.value;
|
||||
setTimeout(goNext, 220);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function showStep(key) {
|
||||
steps.forEach((s) => s.classList.toggle("active", s.dataset.step === key));
|
||||
if (key === "desafio") renderDesafioOptions();
|
||||
updateProgress();
|
||||
}
|
||||
|
||||
function goNext() {
|
||||
if (currentIndex < order.length - 1) {
|
||||
currentIndex++;
|
||||
showStep(order[currentIndex]);
|
||||
} else {
|
||||
showResult();
|
||||
}
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
if (currentIndex > 0) {
|
||||
currentIndex--;
|
||||
showStep(order[currentIndex]);
|
||||
}
|
||||
}
|
||||
|
||||
form.querySelectorAll("[data-action='back']").forEach((btn) => btn.addEventListener("click", goBack));
|
||||
|
||||
// Handlers for static (non-dynamic) option steps
|
||||
form.querySelectorAll('.diag-step[data-step]').forEach((stepEl) => {
|
||||
if (stepEl.dataset.step === "desafio") return; // built dynamically
|
||||
attachOptionHandlers(stepEl);
|
||||
});
|
||||
|
||||
/* ---------- Motor de recomendación ---------- */
|
||||
const solucionPorNecesidad = {
|
||||
marca: "Branding & Identidad",
|
||||
presencia: "Redes Sociales & Contenido + Desarrollo Web",
|
||||
contenido: "Redes Sociales & Contenido",
|
||||
web: "Desarrollo Web",
|
||||
captacion: "Paid Media + Automatizaciones",
|
||||
automatizacion: "Automatizaciones",
|
||||
varias: "Solución Integral (Branding + Web + Redes)",
|
||||
};
|
||||
|
||||
function planSugerido() {
|
||||
const etapaScore = { comenzando: 0, validando: 1, creciendo: 2, consolidado: 3 };
|
||||
const madurezScore = { nula: 0, basica: 1, intermedia: 2, avanzada: 3 };
|
||||
const e = etapaScore[state.etapa] ?? 1;
|
||||
const m = madurezScore[state.madurez] ?? 1;
|
||||
const score = Math.round((e + m) / 2);
|
||||
const plan = ["esencial", "impulso", "premium", "elite"][Math.min(score, 3)];
|
||||
return plan;
|
||||
}
|
||||
|
||||
const planLabels = { esencial: "Plan Esencial", impulso: "Plan Impulso", premium: "Plan Premium", elite: "Plan Élite" };
|
||||
|
||||
function showResult() {
|
||||
steps.forEach((s) => s.classList.remove("active"));
|
||||
progressWrap.querySelectorAll("span").forEach((s) => (s.dataset.state = "done"));
|
||||
|
||||
const necesidadKey = state.necesidad || "varias";
|
||||
const solucion = solucionPorNecesidad[necesidadKey];
|
||||
const plan = state.planPrevio && planLabels[state.planPrevio] ? state.planPrevio : planSugerido();
|
||||
|
||||
resultBox.innerHTML = `
|
||||
<p class="eyebrow">Nuestra recomendación</p>
|
||||
<h3>Te conviene priorizar: ${solucion}</h3>
|
||||
<p class="lede">Situación actual: negocio en etapa "${etapaLabel(state.etapa)}", con una presencia digital ${madurezLabel(state.madurez)}, buscando ${objetivoLabel(state.objetivo)}.</p>
|
||||
<p style="margin-top:1rem;"><strong>Próximo paso recomendado:</strong> ${planLabels[plan]} ${state.planPrevio ? "— ya veníamos conversando sobre este plan" : ""}.</p>
|
||||
<p style="margin-top:0.4rem; color:var(--text-soft); font-size:0.9rem;">Esto es una orientación inicial, no un diagnóstico definitivo — lo afinamos juntos en una conversación.</p>
|
||||
`;
|
||||
resultBox.hidden = false;
|
||||
captureBox.hidden = false;
|
||||
document.getElementById("diag-plan-hidden").value = plan;
|
||||
document.getElementById("diag-solucion-hidden").value = solucion;
|
||||
resultBox.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
}
|
||||
|
||||
function etapaLabel(v) {
|
||||
return { comenzando: "recién empezando", validando: "validando", creciendo: "en crecimiento", consolidado: "consolidado" }[v] || "sin definir";
|
||||
}
|
||||
function madurezLabel(v) {
|
||||
return { nula: "nula", basica: "básica", intermedia: "intermedia", avanzada: "avanzada" }[v] || "sin definir";
|
||||
}
|
||||
function objetivoLabel(v) {
|
||||
return {
|
||||
vender: "vender más",
|
||||
profesionalizar: "profesionalizar su imagen",
|
||||
clientes: "generar más clientes",
|
||||
tiempo: "ahorrar tiempo con procesos",
|
||||
referente: "posicionarse como referente",
|
||||
}[v] || "crecer";
|
||||
}
|
||||
|
||||
form.querySelector("[data-action='restart']")?.addEventListener("click", () => {
|
||||
currentIndex = 0;
|
||||
state.desafio = state.objetivo = state.madurez = state.etapa = null;
|
||||
if (!preInteres) state.necesidad = null;
|
||||
form.querySelectorAll(".diag-option").forEach((b) => b.setAttribute("aria-pressed", "false"));
|
||||
resultBox.hidden = true;
|
||||
captureBox.hidden = true;
|
||||
showStep(order[0]);
|
||||
});
|
||||
|
||||
const finalForm = document.getElementById("diag-lead-form");
|
||||
if (finalForm) {
|
||||
finalForm.addEventListener("submit", (e) => {
|
||||
e.preventDefault();
|
||||
const confirmBox = document.getElementById("diag-confirmation");
|
||||
finalForm.hidden = true;
|
||||
confirmBox.classList.add("show");
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------- Inicio ---------- */
|
||||
buildProgress();
|
||||
if (preInteres && necesidadLabels[preInteres]) {
|
||||
const banner = document.getElementById("diag-context-banner");
|
||||
if (banner) {
|
||||
banner.hidden = false;
|
||||
banner.textContent = `Ya sabemos que tu interés inicial es "${necesidadLabels[preInteres]}" — seguimos desde ahí.`;
|
||||
}
|
||||
}
|
||||
showStep(order[0]);
|
||||
})();
|
||||
@@ -0,0 +1,152 @@
|
||||
// ============================================================
|
||||
// AMOR & ROMA — Hero: campo de humo/partículas orgánicas
|
||||
// Canvas 2D, reactivo al cursor, pasa detrás del texto.
|
||||
// ============================================================
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
const canvas = document.getElementById("hero-canvas");
|
||||
if (!canvas) return;
|
||||
|
||||
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
let width, height, dpr;
|
||||
let pointer = { x: -9999, y: -9999, active: false };
|
||||
let particles = [];
|
||||
const COUNT = reduceMotion ? 0 : Math.min(70, Math.floor(window.innerWidth / 16));
|
||||
|
||||
function themeColors() {
|
||||
const dark = document.documentElement.getAttribute("data-theme") === "dark";
|
||||
return dark
|
||||
? [
|
||||
[186, 18, 77], // magenta
|
||||
[0, 109, 143], // teal web
|
||||
[223, 189, 185], // blush
|
||||
]
|
||||
: [
|
||||
[0, 63, 82], // teal deep
|
||||
[186, 18, 77], // magenta
|
||||
[223, 189, 185], // blush
|
||||
];
|
||||
}
|
||||
|
||||
function resize() {
|
||||
const rect = canvas.parentElement.getBoundingClientRect();
|
||||
dpr = Math.min(window.devicePixelRatio || 1, 2);
|
||||
width = rect.width;
|
||||
height = rect.height;
|
||||
canvas.width = width * dpr;
|
||||
canvas.height = height * dpr;
|
||||
canvas.style.width = width + "px";
|
||||
canvas.style.height = height + "px";
|
||||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||
}
|
||||
|
||||
function rand(min, max) { return Math.random() * (max - min) + min; }
|
||||
|
||||
function makeParticle() {
|
||||
const colors = themeColors();
|
||||
const c = colors[Math.floor(Math.random() * colors.length)];
|
||||
return {
|
||||
x: rand(0, width),
|
||||
y: rand(0, height),
|
||||
baseX: 0,
|
||||
baseY: 0,
|
||||
vx: rand(-0.12, 0.12),
|
||||
vy: rand(-0.18, -0.05),
|
||||
r: rand(50, 130),
|
||||
alpha: rand(0.03, 0.09),
|
||||
color: c,
|
||||
wander: rand(0, Math.PI * 2),
|
||||
wanderSpeed: rand(0.002, 0.006),
|
||||
};
|
||||
}
|
||||
|
||||
function init() {
|
||||
resize();
|
||||
particles = new Array(COUNT).fill(0).map(makeParticle);
|
||||
}
|
||||
|
||||
function step() {
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
particles.forEach((p) => {
|
||||
// wander drift (turbulence)
|
||||
p.wander += p.wanderSpeed;
|
||||
p.x += p.vx + Math.cos(p.wander) * 0.15;
|
||||
p.y += p.vy + Math.sin(p.wander) * 0.1;
|
||||
|
||||
// cursor influence — smoke curls away/around pointer
|
||||
if (pointer.active) {
|
||||
const dx = p.x - pointer.x;
|
||||
const dy = p.y - pointer.y;
|
||||
const dist = Math.sqrt(dx * dx + dy * dy) || 1;
|
||||
const influence = Math.max(0, 220 - dist) / 220;
|
||||
if (influence > 0) {
|
||||
p.x += (dx / dist) * influence * 2.4;
|
||||
p.y += (dy / dist) * influence * 2.4;
|
||||
}
|
||||
}
|
||||
|
||||
// wrap around edges softly
|
||||
if (p.y < -p.r) p.y = height + p.r;
|
||||
if (p.x < -p.r) p.x = width + p.r;
|
||||
if (p.x > width + p.r) p.x = -p.r;
|
||||
if (p.y > height + p.r) p.y = -p.r;
|
||||
|
||||
const [r, g, b] = p.color;
|
||||
const gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.r);
|
||||
gradient.addColorStop(0, `rgba(${r},${g},${b},${p.alpha})`);
|
||||
gradient.addColorStop(1, `rgba(${r},${g},${b},0)`);
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.beginPath();
|
||||
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
});
|
||||
|
||||
if (!reduceMotion) requestAnimationFrame(step);
|
||||
}
|
||||
|
||||
const parent = canvas.parentElement;
|
||||
parent.addEventListener("mousemove", (e) => {
|
||||
const rect = parent.getBoundingClientRect();
|
||||
pointer.x = e.clientX - rect.left;
|
||||
pointer.y = e.clientY - rect.top;
|
||||
pointer.active = true;
|
||||
});
|
||||
parent.addEventListener("mouseleave", () => { pointer.active = false; });
|
||||
parent.addEventListener(
|
||||
"touchmove",
|
||||
(e) => {
|
||||
const rect = parent.getBoundingClientRect();
|
||||
const t = e.touches[0];
|
||||
if (!t) return;
|
||||
pointer.x = t.clientX - rect.left;
|
||||
pointer.y = t.clientY - rect.top;
|
||||
pointer.active = true;
|
||||
},
|
||||
{ passive: true }
|
||||
);
|
||||
|
||||
window.addEventListener("resize", () => {
|
||||
resize();
|
||||
});
|
||||
|
||||
// Redraw once (or restart loop) if theme changes, to refresh palette
|
||||
const observer = new MutationObserver(() => {
|
||||
particles.forEach((p) => {
|
||||
const colors = themeColors();
|
||||
p.color = colors[Math.floor(Math.random() * colors.length)];
|
||||
});
|
||||
});
|
||||
observer.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
|
||||
|
||||
init();
|
||||
if (reduceMotion) {
|
||||
// Static single soft render for reduced motion users
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
} else {
|
||||
step();
|
||||
}
|
||||
})();
|
||||
+41
@@ -0,0 +1,41 @@
|
||||
// ============================================================
|
||||
// AMOR & ROMA — comportamiento compartido (todas las páginas)
|
||||
// ============================================================
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
/* ---------- Tema claro / oscuro ---------- */
|
||||
const root = document.documentElement;
|
||||
const stored = localStorage.getItem("ar-theme");
|
||||
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||
const initial = stored || (prefersDark ? "dark" : "light");
|
||||
root.setAttribute("data-theme", initial);
|
||||
|
||||
document.querySelectorAll("[data-theme-toggle]").forEach((btn) => {
|
||||
btn.addEventListener("click", () => {
|
||||
const current = root.getAttribute("data-theme");
|
||||
const next = current === "dark" ? "light" : "dark";
|
||||
root.setAttribute("data-theme", next);
|
||||
localStorage.setItem("ar-theme", next);
|
||||
});
|
||||
});
|
||||
|
||||
/* ---------- Menú móvil ---------- */
|
||||
const navToggle = document.querySelector("[data-nav-toggle]");
|
||||
const mobileMenu = document.querySelector("[data-mobile-menu]");
|
||||
if (navToggle && mobileMenu) {
|
||||
navToggle.addEventListener("click", () => {
|
||||
mobileMenu.classList.toggle("open");
|
||||
const expanded = mobileMenu.classList.contains("open");
|
||||
navToggle.setAttribute("aria-expanded", String(expanded));
|
||||
});
|
||||
mobileMenu.querySelectorAll("a").forEach((a) =>
|
||||
a.addEventListener("click", () => mobileMenu.classList.remove("open"))
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Año dinámico en footer ---------- */
|
||||
document.querySelectorAll("[data-year]").forEach((el) => {
|
||||
el.textContent = new Date().getFullYear();
|
||||
});
|
||||
})();
|
||||
@@ -0,0 +1,11 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
document.querySelectorAll(".plan-card").forEach((card) => {
|
||||
const trigger = card.querySelector("[data-plan-trigger]");
|
||||
trigger?.addEventListener("click", () => {
|
||||
const wasExpanded = card.classList.contains("expanded");
|
||||
document.querySelectorAll(".plan-card").forEach((c) => c.classList.remove("expanded"));
|
||||
if (!wasExpanded) card.classList.add("expanded");
|
||||
});
|
||||
});
|
||||
})();
|
||||
@@ -0,0 +1,48 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
const filters = document.querySelectorAll("[data-filter]");
|
||||
const cards = document.querySelectorAll("[data-tags]");
|
||||
|
||||
filters.forEach((btn) => {
|
||||
btn.addEventListener("click", () => {
|
||||
filters.forEach((b) => b.setAttribute("data-active", "false"));
|
||||
btn.setAttribute("data-active", "true");
|
||||
const value = btn.dataset.filter;
|
||||
cards.forEach((card) => {
|
||||
const tags = card.dataset.tags.split(",");
|
||||
const show = value === "todos" || tags.includes(value);
|
||||
card.style.display = show ? "" : "none";
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
const backdrop = document.getElementById("case-modal");
|
||||
const modalBody = document.getElementById("case-modal-body");
|
||||
document.querySelectorAll("[data-case-trigger]").forEach((card) => {
|
||||
card.addEventListener("click", () => {
|
||||
modalBody.innerHTML = `
|
||||
<p class="eyebrow">${card.dataset.caseTag || ""}</p>
|
||||
<h3>${card.dataset.caseTitle}</h3>
|
||||
<p style="margin-top:0.8rem;"><strong>Contexto:</strong> ${card.dataset.caseContext}</p>
|
||||
<p style="margin-top:0.6rem;"><strong>Problema:</strong> ${card.dataset.caseProblem}</p>
|
||||
<p style="margin-top:0.6rem;"><strong>Solución:</strong> ${card.dataset.caseSolution}</p>
|
||||
<div class="tags" style="margin-top:1rem;">${(card.dataset.tags || "")
|
||||
.split(",")
|
||||
.map((t) => `<span class="pill">${t}</span>`)
|
||||
.join("")}</div>
|
||||
<p style="margin-top:1rem; font-size:0.85rem; color:var(--text-soft);">* Caso de referencia (placeholder) — se reemplaza por proyectos reales del portfolio.</p>
|
||||
`;
|
||||
backdrop.classList.add("open");
|
||||
});
|
||||
});
|
||||
|
||||
backdrop?.addEventListener("click", (e) => {
|
||||
if (e.target === backdrop || e.target.closest("[data-modal-close]")) {
|
||||
backdrop.classList.remove("open");
|
||||
}
|
||||
});
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") backdrop?.classList.remove("open");
|
||||
});
|
||||
})();
|
||||
+205
@@ -0,0 +1,205 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es-AR">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Método — Amor y Roma</title>
|
||||
<meta name="description" content="Diagnóstico, Estrategia, Producción, Validación y Medición. El workflow de cinco etapas de Amor y Roma.">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="container nav-row">
|
||||
<a href="index.html" class="logo-mark" aria-label="Amor y Roma — inicio">
|
||||
<svg viewBox="0 0 80 70" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M2 66V34C2 16.3 16.3 2 34 2H46C63.7 2 78 16.3 78 34V66" stroke="var(--accent-blush)" stroke-width="6" fill="none" opacity="0.55"/>
|
||||
<path d="M14 66V34C14 20.7 24.7 10 38 10H42C55.3 10 66 20.7 66 34V66" stroke="currentColor" stroke-width="6" fill="none"/>
|
||||
</svg>
|
||||
<span class="wordmark">amor&roma</span>
|
||||
</a>
|
||||
<nav class="nav-links" aria-label="Navegación principal">
|
||||
<a href="index.html">Inicio</a>
|
||||
<a href="servicios.html">Servicios</a>
|
||||
<a href="planes.html">Planes</a>
|
||||
<a href="portfolio.html">Portfolio</a>
|
||||
<a href="nosotros.html">Nosotros</a>
|
||||
<a href="metodo.html" aria-current="page">Método</a>
|
||||
<a href="contacto.html">Contacto</a>
|
||||
</nav>
|
||||
<div class="nav-actions">
|
||||
<a href="diagnostico.html" class="btn btn-primary">Encontrá tu solución</a>
|
||||
<button class="theme-toggle" data-theme-toggle type="button" aria-label="Cambiar tema claro/oscuro">
|
||||
<svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
|
||||
<svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.8A9 9 0 1111.2 3a7 7 0 009.8 9.8z"/></svg>
|
||||
</button>
|
||||
<button class="nav-toggle" data-nav-toggle type="button" aria-label="Abrir menú" aria-expanded="false">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-menu" data-mobile-menu>
|
||||
<a href="index.html">Inicio</a>
|
||||
<a href="servicios.html">Servicios</a>
|
||||
<a href="planes.html">Planes</a>
|
||||
<a href="portfolio.html">Portfolio</a>
|
||||
<a href="nosotros.html">Nosotros</a>
|
||||
<a href="metodo.html">Método</a>
|
||||
<a href="diagnostico.html">Diagnóstico</a>
|
||||
<a href="contacto.html">Contacto</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<section class="section-tight">
|
||||
<div class="container">
|
||||
<p class="eyebrow">Método</p>
|
||||
<h1 style="font-size:var(--step-3); max-width:20ch;">No empezamos diseñando. Empezamos entendiendo.</h1>
|
||||
<p class="lede" style="margin-top:1rem;">De la esencia a la estructura: cada proyecto comienza entendiendo el negocio y termina midiendo lo que construimos.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-tight" style="padding-top:0;">
|
||||
<div class="container">
|
||||
<div class="timeline">
|
||||
<div class="step">
|
||||
<span class="num">01</span>
|
||||
<h4 style="font-style:normal; font-size:1.05rem; margin-top:0.4rem;">Diagnóstico</h4>
|
||||
<p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.4rem;">Briefing a fondo e inmersión de marca. Entendemos negocio, objetivos y contexto.</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<span class="num">02</span>
|
||||
<h4 style="font-style:normal; font-size:1.05rem; margin-top:0.4rem;">Estrategia</h4>
|
||||
<p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.4rem;">Definición de pilares y arquitectura del proyecto.</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<span class="num">03</span>
|
||||
<h4 style="font-style:normal; font-size:1.05rem; margin-top:0.4rem;">Producción</h4>
|
||||
<p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.4rem;">Creación de piezas visuales, copys y desarrollo web.</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<span class="num">04</span>
|
||||
<h4 style="font-style:normal; font-size:1.05rem; margin-top:0.4rem;">Validación</h4>
|
||||
<p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.4rem;">Aprobación de grillas o entrega de desarrollo, con feedback estructurado.</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<span class="num">05</span>
|
||||
<h4 style="font-style:normal; font-size:1.05rem; margin-top:0.4rem;">Medición</h4>
|
||||
<p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.4rem;">Métricas, análisis y ajustes para el siguiente ciclo.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- APLICACIÓN POR SERVICIO -->
|
||||
<section style="background:var(--bg-sunken);">
|
||||
<div class="container">
|
||||
<p class="eyebrow">Aplicación según servicio</p>
|
||||
<h2 style="max-width:18ch;">El mismo método, distinto ritmo.</h2>
|
||||
<div class="portfolio-filters" style="margin-top:var(--space-3);" id="metodo-selector">
|
||||
<button class="pill" data-service="branding" data-active="true">Branding</button>
|
||||
<button class="pill" data-service="web">Web</button>
|
||||
<button class="pill" data-service="redes">Redes</button>
|
||||
<button class="pill" data-service="automatizacion">Automatización</button>
|
||||
<button class="pill" data-service="paid">Paid Media</button>
|
||||
</div>
|
||||
<div class="card" style="margin-top:var(--space-3);" id="metodo-detalle">
|
||||
<p data-content="branding">En Branding, el diagnóstico define arquetipo y propuesta de valor; la estrategia arma el sistema visual; la producción diseña logo, paleta y manual; la validación es la aprobación del manual de marca; la medición evalúa consistencia de aplicación.</p>
|
||||
<p data-content="web" hidden>En Web, el diagnóstico releva el embudo de ventas; la estrategia define wireframes y mapa de sitio; la producción maqueta y desarrolla; la validación revisa velocidad y funcionalidad; la medición analiza analítica y conversión.</p>
|
||||
<p data-content="redes" hidden>En Redes, el diagnóstico entiende tono y objetivos; la estrategia arma la grilla temática mensual; la producción crea copys y piezas; la validación es la aprobación de la grilla; la medición analiza métricas de alcance y engagement.</p>
|
||||
<p data-content="automatizacion" hidden>En Automatización, el diagnóstico mapea el recorrido del prospecto; la estrategia diseña los flujos; la producción configura y prueba en entornos de testeo; la validación revisa cada escenario; la medición mide tasa de conversión de leads.</p>
|
||||
<p data-content="paid" hidden>En Paid Media, el diagnóstico audita cuentas y públicos; la estrategia define objetivos de campaña; la producción crea las piezas publicitarias; la validación aprueba antes del lanzamiento; la medición optimiza en base a resultados reales.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="container">
|
||||
<p class="eyebrow">Control de calidad</p>
|
||||
<h2 style="max-width:16ch;">Cada entrega pasa por un mismo estándar.</h2>
|
||||
<p class="lede" style="margin-top:1rem;">Revisión interna, aprobación estructurada, feedback acotado en rondas definidas, estándares propios de Amor y Roma y optimización continua tras el lanzamiento.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="background:var(--c-plum-2); color:var(--c-mist);">
|
||||
<div class="container" style="text-align:center;">
|
||||
<h2 style="color:var(--c-mist);">Quiero comenzar mi diagnóstico</h2>
|
||||
<a href="diagnostico.html" class="btn btn-primary" style="margin-top:1.2rem;">Empezar diagnóstico</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<div class="foot-grid">
|
||||
<div>
|
||||
<div class="logo-mark" style="color:var(--c-mist);">
|
||||
<svg viewBox="0 0 80 70" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="height:30px;">
|
||||
<path d="M2 66V34C2 16.3 16.3 2 34 2H46C63.7 2 78 16.3 78 34V66" stroke="var(--accent-blush)" stroke-width="6" fill="none" opacity="0.55"/>
|
||||
<path d="M14 66V34C14 20.7 24.7 10 38 10H42C55.3 10 66 20.7 66 34V66" stroke="currentColor" stroke-width="6" fill="none"/>
|
||||
</svg>
|
||||
<span class="wordmark" style="color:var(--c-mist);">amor&roma</span>
|
||||
</div>
|
||||
<p style="margin-top:0.8rem; color:#c9c2d6; font-style:italic; font-family:var(--font-display);">Marcas con esencia, construidas con estrategia.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Navegación</h5>
|
||||
<ul>
|
||||
<li><a href="index.html">Inicio</a></li>
|
||||
<li><a href="servicios.html">Servicios</a></li>
|
||||
<li><a href="planes.html">Planes</a></li>
|
||||
<li><a href="portfolio.html">Portfolio</a></li>
|
||||
<li><a href="nosotros.html">Nosotros</a></li>
|
||||
<li><a href="metodo.html">Método</a></li>
|
||||
<li><a href="diagnostico.html">Diagnóstico</a></li>
|
||||
<li><a href="contacto.html">Contacto</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Servicios</h5>
|
||||
<ul>
|
||||
<li><a href="servicios.html#branding">Branding</a></li>
|
||||
<li><a href="servicios.html#redes">Redes</a></li>
|
||||
<li><a href="servicios.html#web">Web</a></li>
|
||||
<li><a href="servicios.html#automatizaciones">Automatizaciones</a></li>
|
||||
<li><a href="servicios.html#paid-media">Paid Media</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Contacto <span style="opacity:.6; font-weight:400;">(datos de prueba)</span></h5>
|
||||
<ul>
|
||||
<li><a href="mailto:hola@amoryroma.com.ar">hola@amoryroma.com.ar</a></li>
|
||||
<li><a href="https://wa.me/5491100000000" target="_blank" rel="noopener">+54 9 11 0000-0000</a></li>
|
||||
<li><a href="https://instagram.com/amoryroma" target="_blank" rel="noopener">Instagram</a></li>
|
||||
<li><a href="https://linkedin.com/company/amoryroma" target="_blank" rel="noopener">LinkedIn</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="foot-bottom">
|
||||
<span>© <span data-year></span> Amor y Roma — Estudio Creativo. www.amoryroma.com.ar</span>
|
||||
<span>Política de privacidad · Términos y condiciones · Cookies</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<a class="whatsapp-float" href="https://wa.me/5491100000000" target="_blank" rel="noopener" aria-label="Escribir por WhatsApp">
|
||||
<svg viewBox="0 0 32 32" fill="currentColor" aria-hidden="true"><path d="M16.01 3C9.38 3 4 8.38 4 15.01c0 2.26.61 4.38 1.68 6.2L4 29l7.98-1.64a11.9 11.9 0 004.03.7c6.63 0 12.01-5.38 12.01-12.05C28.02 8.38 22.64 3 16.01 3zm0 21.8c-1.98 0-3.85-.55-5.44-1.5l-.39-.23-4.86 1 1.03-4.72-.25-.4a9.7 9.7 0 01-1.5-5.15c0-5.4 4.39-9.79 9.8-9.79 5.4 0 9.79 4.39 9.79 9.79.01 5.4-4.38 9.79-9.78 10zM21.4 18c-.28-.14-1.66-.82-1.92-.91-.26-.1-.44-.14-.63.14-.19.28-.72.9-.88 1.09-.16.19-.32.2-.6.07-.28-.14-1.17-.43-2.23-1.37-.83-.74-1.38-1.65-1.55-1.93-.16-.28-.02-.43.12-.57.13-.13.28-.33.42-.5.14-.16.19-.28.28-.47.09-.19.05-.35-.02-.5-.07-.14-.63-1.52-.87-2.08-.23-.55-.46-.47-.63-.48h-.54c-.19 0-.5.07-.76.35-.26.28-1 .98-1 2.38 0 1.4 1.02 2.76 1.16 2.95.14.19 2 3.05 4.85 4.27.68.29 1.21.47 1.62.6.68.22 1.3.19 1.79.11.55-.08 1.66-.68 1.9-1.34.24-.66.24-1.22.17-1.34-.07-.12-.25-.19-.53-.33z"/></svg>
|
||||
</a>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
<script>
|
||||
document.querySelectorAll('#metodo-selector .pill').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
document.querySelectorAll('#metodo-selector .pill').forEach(b => b.setAttribute('data-active','false'));
|
||||
btn.setAttribute('data-active','true');
|
||||
const key = btn.dataset.service;
|
||||
document.querySelectorAll('#metodo-detalle [data-content]').forEach(p => {
|
||||
p.hidden = p.dataset.content !== key;
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+188
@@ -0,0 +1,188 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es-AR">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Nosotros — Amor y Roma</title>
|
||||
<meta name="description" content="Amor y Roma. Dos fuerzas. Una forma de construir. Conocé la filosofía boutique detrás de la agencia.">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="container nav-row">
|
||||
<a href="index.html" class="logo-mark" aria-label="Amor y Roma — inicio">
|
||||
<svg viewBox="0 0 80 70" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M2 66V34C2 16.3 16.3 2 34 2H46C63.7 2 78 16.3 78 34V66" stroke="var(--accent-blush)" stroke-width="6" fill="none" opacity="0.55"/>
|
||||
<path d="M14 66V34C14 20.7 24.7 10 38 10H42C55.3 10 66 20.7 66 34V66" stroke="currentColor" stroke-width="6" fill="none"/>
|
||||
</svg>
|
||||
<span class="wordmark">amor&roma</span>
|
||||
</a>
|
||||
<nav class="nav-links" aria-label="Navegación principal">
|
||||
<a href="index.html">Inicio</a>
|
||||
<a href="servicios.html">Servicios</a>
|
||||
<a href="planes.html">Planes</a>
|
||||
<a href="portfolio.html">Portfolio</a>
|
||||
<a href="nosotros.html" aria-current="page">Nosotros</a>
|
||||
<a href="metodo.html">Método</a>
|
||||
<a href="contacto.html">Contacto</a>
|
||||
</nav>
|
||||
<div class="nav-actions">
|
||||
<a href="diagnostico.html" class="btn btn-primary">Encontrá tu solución</a>
|
||||
<button class="theme-toggle" data-theme-toggle type="button" aria-label="Cambiar tema claro/oscuro">
|
||||
<svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
|
||||
<svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.8A9 9 0 1111.2 3a7 7 0 009.8 9.8z"/></svg>
|
||||
</button>
|
||||
<button class="nav-toggle" data-nav-toggle type="button" aria-label="Abrir menú" aria-expanded="false">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-menu" data-mobile-menu>
|
||||
<a href="index.html">Inicio</a>
|
||||
<a href="servicios.html">Servicios</a>
|
||||
<a href="planes.html">Planes</a>
|
||||
<a href="portfolio.html">Portfolio</a>
|
||||
<a href="nosotros.html">Nosotros</a>
|
||||
<a href="metodo.html">Método</a>
|
||||
<a href="diagnostico.html">Diagnóstico</a>
|
||||
<a href="contacto.html">Contacto</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<section class="section-tight">
|
||||
<div class="container">
|
||||
<p class="eyebrow">Nosotros</p>
|
||||
<h1 style="font-size:var(--step-3); max-width:20ch;">Amor y Roma. Dos fuerzas. Una forma de construir.</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-tight" style="padding-top:0;">
|
||||
<div class="container">
|
||||
<div class="duo-columns">
|
||||
<div class="duo-col amor">
|
||||
<h4 style="color:var(--accent-amor);">AMOR</h4>
|
||||
<ul>
|
||||
<li>Pasión</li><li>Arte</li><li>Creatividad</li><li>Identidad</li><li>Empatía</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="duo-col roma">
|
||||
<h4 style="color:var(--accent-roma-bright);">ROMA</h4>
|
||||
<ul>
|
||||
<li>Estrategia</li><li>Arquitectura</li><li>Procesos</li><li>Tecnología</li><li>Estructura</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p class="lede" style="margin-top:var(--space-3); text-align:center; max-width:52ch; margin-inline:auto;">La creatividad da esencia. La estrategia construye el camino.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="background:var(--bg-sunken);">
|
||||
<div class="container">
|
||||
<p class="eyebrow">Posicionamiento</p>
|
||||
<h2 style="max-width:14ch;">Boutique, en serio.</h2>
|
||||
<div class="grid grid-3" style="margin-top:var(--space-4);">
|
||||
<div class="card">
|
||||
<h4 style="font-size:1.05rem;">Sin plantillas prefabricadas</h4>
|
||||
<p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.5rem;">Cada proyecto se construye a medida de la identidad y madurez del negocio.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h4 style="font-size:1.05rem;">Capacidad controlada</h4>
|
||||
<p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.5rem;">Priorizamos profundidad operativa sobre volumen de clientes.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h4 style="font-size:1.05rem;">Foco visual y de contenido</h4>
|
||||
<p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.5rem;">El criterio estético y la calidad de producción son el diferencial central.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="container">
|
||||
<p class="eyebrow">El equipo</p>
|
||||
<h2 style="max-width:16ch;">Las personas detrás de cada proyecto.</h2>
|
||||
<div class="grid grid-4" style="margin-top:var(--space-4);">
|
||||
<div class="team-slot">Foto pendiente<br>Nombre · Rol</div>
|
||||
<div class="team-slot">Foto pendiente<br>Nombre · Rol</div>
|
||||
<div class="team-slot">Foto pendiente<br>Nombre · Rol</div>
|
||||
<div class="team-slot">Foto pendiente<br>Nombre · Rol</div>
|
||||
</div>
|
||||
<p style="margin-top:var(--space-2); font-size:0.85rem; color:var(--text-soft);">Espacios reservados — se completan con fotografía real del equipo.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="background:var(--c-plum-2); color:var(--c-mist);">
|
||||
<div class="container" style="text-align:center;">
|
||||
<h2 style="max-width:18ch; margin-inline:auto; color:var(--c-mist);">¿Conocés qué podemos construir juntos?</h2>
|
||||
<div class="btn-row" style="justify-content:center; margin-top:var(--space-3);">
|
||||
<a href="servicios.html" class="btn btn-primary">Ver servicios</a>
|
||||
<a href="diagnostico.html" class="btn btn-secondary" style="border-color:rgba(234,240,238,0.3); color:var(--c-mist);">Empezar diagnóstico</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<div class="foot-grid">
|
||||
<div>
|
||||
<div class="logo-mark" style="color:var(--c-mist);">
|
||||
<svg viewBox="0 0 80 70" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="height:30px;">
|
||||
<path d="M2 66V34C2 16.3 16.3 2 34 2H46C63.7 2 78 16.3 78 34V66" stroke="var(--accent-blush)" stroke-width="6" fill="none" opacity="0.55"/>
|
||||
<path d="M14 66V34C14 20.7 24.7 10 38 10H42C55.3 10 66 20.7 66 34V66" stroke="currentColor" stroke-width="6" fill="none"/>
|
||||
</svg>
|
||||
<span class="wordmark" style="color:var(--c-mist);">amor&roma</span>
|
||||
</div>
|
||||
<p style="margin-top:0.8rem; color:#c9c2d6; font-style:italic; font-family:var(--font-display);">Marcas con esencia, construidas con estrategia.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Navegación</h5>
|
||||
<ul>
|
||||
<li><a href="index.html">Inicio</a></li>
|
||||
<li><a href="servicios.html">Servicios</a></li>
|
||||
<li><a href="planes.html">Planes</a></li>
|
||||
<li><a href="portfolio.html">Portfolio</a></li>
|
||||
<li><a href="nosotros.html">Nosotros</a></li>
|
||||
<li><a href="metodo.html">Método</a></li>
|
||||
<li><a href="diagnostico.html">Diagnóstico</a></li>
|
||||
<li><a href="contacto.html">Contacto</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Servicios</h5>
|
||||
<ul>
|
||||
<li><a href="servicios.html#branding">Branding</a></li>
|
||||
<li><a href="servicios.html#redes">Redes</a></li>
|
||||
<li><a href="servicios.html#web">Web</a></li>
|
||||
<li><a href="servicios.html#automatizaciones">Automatizaciones</a></li>
|
||||
<li><a href="servicios.html#paid-media">Paid Media</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Contacto <span style="opacity:.6; font-weight:400;">(datos de prueba)</span></h5>
|
||||
<ul>
|
||||
<li><a href="mailto:hola@amoryroma.com.ar">hola@amoryroma.com.ar</a></li>
|
||||
<li><a href="https://wa.me/5491100000000" target="_blank" rel="noopener">+54 9 11 0000-0000</a></li>
|
||||
<li><a href="https://instagram.com/amoryroma" target="_blank" rel="noopener">Instagram</a></li>
|
||||
<li><a href="https://linkedin.com/company/amoryroma" target="_blank" rel="noopener">LinkedIn</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="foot-bottom">
|
||||
<span>© <span data-year></span> Amor y Roma — Estudio Creativo. www.amoryroma.com.ar</span>
|
||||
<span>Política de privacidad · Términos y condiciones · Cookies</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<a class="whatsapp-float" href="https://wa.me/5491100000000" target="_blank" rel="noopener" aria-label="Escribir por WhatsApp">
|
||||
<svg viewBox="0 0 32 32" fill="currentColor" aria-hidden="true"><path d="M16.01 3C9.38 3 4 8.38 4 15.01c0 2.26.61 4.38 1.68 6.2L4 29l7.98-1.64a11.9 11.9 0 004.03.7c6.63 0 12.01-5.38 12.01-12.05C28.02 8.38 22.64 3 16.01 3zm0 21.8c-1.98 0-3.85-.55-5.44-1.5l-.39-.23-4.86 1 1.03-4.72-.25-.4a9.7 9.7 0 01-1.5-5.15c0-5.4 4.39-9.79 9.8-9.79 5.4 0 9.79 4.39 9.79 9.79.01 5.4-4.38 9.79-9.78 10zM21.4 18c-.28-.14-1.66-.82-1.92-.91-.26-.1-.44-.14-.63.14-.19.28-.72.9-.88 1.09-.16.19-.32.2-.6.07-.28-.14-1.17-.43-2.23-1.37-.83-.74-1.38-1.65-1.55-1.93-.16-.28-.02-.43.12-.57.13-.13.28-.33.42-.5.14-.16.19-.28.28-.47.09-.19.05-.35-.02-.5-.07-.14-.63-1.52-.87-2.08-.23-.55-.46-.47-.63-.48h-.54c-.19 0-.5.07-.76.35-.26.28-1 .98-1 2.38 0 1.4 1.02 2.76 1.16 2.95.14.19 2 3.05 4.85 4.27.68.29 1.21.47 1.62.6.68.22 1.3.19 1.79.11.55-.08 1.66-.68 1.9-1.34.24-.66.24-1.22.17-1.34-.07-.12-.25-.19-.53-.33z"/></svg>
|
||||
</a>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+214
@@ -0,0 +1,214 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es-AR">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Planes — Amor y Roma</title>
|
||||
<meta name="description" content="Plan Esencial, Impulso, Premium y Élite. Planes recurrentes de redes sociales y contenido para cada etapa de tu negocio.">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="container nav-row">
|
||||
<a href="index.html" class="logo-mark" aria-label="Amor y Roma — inicio">
|
||||
<svg viewBox="0 0 80 70" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M2 66V34C2 16.3 16.3 2 34 2H46C63.7 2 78 16.3 78 34V66" stroke="var(--accent-blush)" stroke-width="6" fill="none" opacity="0.55"/>
|
||||
<path d="M14 66V34C14 20.7 24.7 10 38 10H42C55.3 10 66 20.7 66 34V66" stroke="currentColor" stroke-width="6" fill="none"/>
|
||||
</svg>
|
||||
<span class="wordmark">amor&roma</span>
|
||||
</a>
|
||||
<nav class="nav-links" aria-label="Navegación principal">
|
||||
<a href="index.html">Inicio</a>
|
||||
<a href="servicios.html">Servicios</a>
|
||||
<a href="planes.html" aria-current="page">Planes</a>
|
||||
<a href="portfolio.html">Portfolio</a>
|
||||
<a href="nosotros.html">Nosotros</a>
|
||||
<a href="metodo.html">Método</a>
|
||||
<a href="contacto.html">Contacto</a>
|
||||
</nav>
|
||||
<div class="nav-actions">
|
||||
<a href="diagnostico.html" class="btn btn-primary">Encontrá tu solución</a>
|
||||
<button class="theme-toggle" data-theme-toggle type="button" aria-label="Cambiar tema claro/oscuro">
|
||||
<svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
|
||||
<svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.8A9 9 0 1111.2 3a7 7 0 009.8 9.8z"/></svg>
|
||||
</button>
|
||||
<button class="nav-toggle" data-nav-toggle type="button" aria-label="Abrir menú" aria-expanded="false">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-menu" data-mobile-menu>
|
||||
<a href="index.html">Inicio</a>
|
||||
<a href="servicios.html">Servicios</a>
|
||||
<a href="planes.html">Planes</a>
|
||||
<a href="portfolio.html">Portfolio</a>
|
||||
<a href="nosotros.html">Nosotros</a>
|
||||
<a href="metodo.html">Método</a>
|
||||
<a href="diagnostico.html">Diagnóstico</a>
|
||||
<a href="contacto.html">Contacto</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<section class="section-tight">
|
||||
<div class="container">
|
||||
<p class="eyebrow">Planes recurrentes</p>
|
||||
<h1 style="font-size:var(--step-3); max-width:20ch;">Distintos negocios. Distintas etapas. Un mismo objetivo: crecer.</h1>
|
||||
<p class="lede" style="margin-top:1rem;">Los cuatro planes acompañan diferentes niveles de madurez. Hacé clic en una tarjeta para ver el detalle completo.</p>
|
||||
<p style="margin-top:0.6rem; font-size:0.82rem; color:var(--text-soft);">* Precios de referencia (placeholder) — a confirmar antes de publicar.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-tight">
|
||||
<div class="container">
|
||||
<div class="grid grid-4">
|
||||
|
||||
<article class="plan-card" data-plan-trigger tabindex="0">
|
||||
<div>
|
||||
<h4 style="font-style:normal; font-family:var(--font-small); letter-spacing:0.02em;">Esencial</h4>
|
||||
<p class="price">Desde $45.000</p>
|
||||
<p style="color:var(--text-soft); font-size:0.88rem; margin-top:0.4rem;">Emprendedores iniciales que buscan ordenar y profesionalizar su imagen.</p>
|
||||
</div>
|
||||
<div class="details">
|
||||
<dl>
|
||||
<dt>Contenido</dt><dd>8 piezas/carruseles · 4 historias/semana</dd>
|
||||
<dt>Copywriting</dt><dd>Guías de estilo básicas y copys directos</dd>
|
||||
<dt>Automatización</dt><dd>Respuestas automáticas (FAQ en DM)</dd>
|
||||
<dt>Paid Media</dt><dd>No incluido (orgánico puro)</dd>
|
||||
<dt>Gestión</dt><dd>Programación de contenido</dd>
|
||||
<dt>Reportes</dt><dd>Mensual cuantitativo automatizado</dd>
|
||||
</dl>
|
||||
<a href="contacto.html?plan=esencial" class="btn btn-primary" style="width:100%; justify-content:center;">Quiero este plan</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="plan-card" data-plan-trigger tabindex="0">
|
||||
<div>
|
||||
<h4 style="font-style:normal; font-family:var(--font-small); letter-spacing:0.02em;">Impulso</h4>
|
||||
<p class="price">Desde $75.000</p>
|
||||
<p style="color:var(--text-soft); font-size:0.88rem; margin-top:0.4rem;">Pequeños negocios en etapa de validación y captación activa.</p>
|
||||
</div>
|
||||
<div class="details">
|
||||
<dl>
|
||||
<dt>Contenido</dt><dd>8 piezas · 4 Reels/TikToks · 6 historias/semana</dd>
|
||||
<dt>Copywriting</dt><dd>Persuasivo, con dirección de arte personalizada</dd>
|
||||
<dt>Automatización</dt><dd>Bienvenida + derivación a WhatsApp</dd>
|
||||
<dt>Paid Media</dt><dd>1 campaña de tráfico o alcance local</dd>
|
||||
<dt>Gestión</dt><dd>Moderación en horario comercial</dd>
|
||||
<dt>Reportes</dt><dd>Mensual con análisis de métricas clave</dd>
|
||||
</dl>
|
||||
<a href="contacto.html?plan=impulso" class="btn btn-primary" style="width:100%; justify-content:center;">Quiero este plan</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="plan-card" data-plan-trigger tabindex="0" data-featured="true">
|
||||
<div>
|
||||
<h4 style="font-style:normal; font-family:var(--font-small); letter-spacing:0.02em; color:var(--accent-amor);">Premium ★</h4>
|
||||
<p class="price">Desde $120.000</p>
|
||||
<p style="color:var(--text-soft); font-size:0.88rem; margin-top:0.4rem;">PyMEs con tracción comercial que buscan posicionamiento y flujo continuo.</p>
|
||||
</div>
|
||||
<div class="details">
|
||||
<dl>
|
||||
<dt>Contenido</dt><dd>10 piezas · 8 Reels/TikToks · historias diarias</dd>
|
||||
<dt>Copywriting</dt><dd>Storytelling avanzado y diseño editorial</dd>
|
||||
<dt>Automatización</dt><dd>Cualificación de leads + base de datos</dd>
|
||||
<dt>Paid Media</dt><dd>Gestión y optimización de conversión</dd>
|
||||
<dt>Gestión</dt><dd>Moderación activa de comunidad</dd>
|
||||
<dt>Reportes</dt><dd>Cualitativo + reunión de alineación (30 min)</dd>
|
||||
</dl>
|
||||
<a href="contacto.html?plan=premium" class="btn btn-primary" style="width:100%; justify-content:center;">Quiero este plan</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="plan-card" data-plan-trigger tabindex="0">
|
||||
<div>
|
||||
<h4 style="font-style:normal; font-family:var(--font-small); letter-spacing:0.02em;">Élite</h4>
|
||||
<p class="price">Desde $190.000</p>
|
||||
<p style="color:var(--text-soft); font-size:0.88rem; margin-top:0.4rem;">Empresas consolidadas que exigen liderazgo de marca y omnicanalidad.</p>
|
||||
</div>
|
||||
<div class="details">
|
||||
<dl>
|
||||
<dt>Contenido</dt><dd>12 piezas premium · 12 Reels alta producción</dd>
|
||||
<dt>Copywriting</dt><dd>Dirección creativa exclusiva y ganchos de retención</dd>
|
||||
<dt>Automatización</dt><dd>Multi-paso, etiquetado de leads y CRM</dd>
|
||||
<dt>Paid Media</dt><dd>Embudo completo (awareness, retargeting, conversión)</dd>
|
||||
<dt>Gestión</dt><dd>Protocolo prioritario y gestión de reputación</dd>
|
||||
<dt>Reportes</dt><dd>Dashboard en tiempo real + reunión ejecutiva</dd>
|
||||
</dl>
|
||||
<a href="contacto.html?plan=elite" class="btn btn-primary" style="width:100%; justify-content:center;">Quiero este plan</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
|
||||
<div style="text-align:center; margin-top:var(--space-4);">
|
||||
<a href="diagnostico.html" class="btn btn-ghost">No sé cuál elegir →</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<div class="foot-grid">
|
||||
<div>
|
||||
<div class="logo-mark" style="color:var(--c-mist);">
|
||||
<svg viewBox="0 0 80 70" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="height:30px;">
|
||||
<path d="M2 66V34C2 16.3 16.3 2 34 2H46C63.7 2 78 16.3 78 34V66" stroke="var(--accent-blush)" stroke-width="6" fill="none" opacity="0.55"/>
|
||||
<path d="M14 66V34C14 20.7 24.7 10 38 10H42C55.3 10 66 20.7 66 34V66" stroke="currentColor" stroke-width="6" fill="none"/>
|
||||
</svg>
|
||||
<span class="wordmark" style="color:var(--c-mist);">amor&roma</span>
|
||||
</div>
|
||||
<p style="margin-top:0.8rem; color:#c9c2d6; font-style:italic; font-family:var(--font-display);">Marcas con esencia, construidas con estrategia.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Navegación</h5>
|
||||
<ul>
|
||||
<li><a href="index.html">Inicio</a></li>
|
||||
<li><a href="servicios.html">Servicios</a></li>
|
||||
<li><a href="planes.html">Planes</a></li>
|
||||
<li><a href="portfolio.html">Portfolio</a></li>
|
||||
<li><a href="nosotros.html">Nosotros</a></li>
|
||||
<li><a href="metodo.html">Método</a></li>
|
||||
<li><a href="diagnostico.html">Diagnóstico</a></li>
|
||||
<li><a href="contacto.html">Contacto</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Servicios</h5>
|
||||
<ul>
|
||||
<li><a href="servicios.html#branding">Branding</a></li>
|
||||
<li><a href="servicios.html#redes">Redes</a></li>
|
||||
<li><a href="servicios.html#web">Web</a></li>
|
||||
<li><a href="servicios.html#automatizaciones">Automatizaciones</a></li>
|
||||
<li><a href="servicios.html#paid-media">Paid Media</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Contacto <span style="opacity:.6; font-weight:400;">(datos de prueba)</span></h5>
|
||||
<ul>
|
||||
<li><a href="mailto:hola@amoryroma.com.ar">hola@amoryroma.com.ar</a></li>
|
||||
<li><a href="https://wa.me/5491100000000" target="_blank" rel="noopener">+54 9 11 0000-0000</a></li>
|
||||
<li><a href="https://instagram.com/amoryroma" target="_blank" rel="noopener">Instagram</a></li>
|
||||
<li><a href="https://linkedin.com/company/amoryroma" target="_blank" rel="noopener">LinkedIn</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="foot-bottom">
|
||||
<span>© <span data-year></span> Amor y Roma — Estudio Creativo. www.amoryroma.com.ar</span>
|
||||
<span>Política de privacidad · Términos y condiciones · Cookies</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<a class="whatsapp-float" href="https://wa.me/5491100000000" target="_blank" rel="noopener" aria-label="Escribir por WhatsApp">
|
||||
<svg viewBox="0 0 32 32" fill="currentColor" aria-hidden="true"><path d="M16.01 3C9.38 3 4 8.38 4 15.01c0 2.26.61 4.38 1.68 6.2L4 29l7.98-1.64a11.9 11.9 0 004.03.7c6.63 0 12.01-5.38 12.01-12.05C28.02 8.38 22.64 3 16.01 3zm0 21.8c-1.98 0-3.85-.55-5.44-1.5l-.39-.23-4.86 1 1.03-4.72-.25-.4a9.7 9.7 0 01-1.5-5.15c0-5.4 4.39-9.79 9.8-9.79 5.4 0 9.79 4.39 9.79 9.79.01 5.4-4.38 9.79-9.78 10zM21.4 18c-.28-.14-1.66-.82-1.92-.91-.26-.1-.44-.14-.63.14-.19.28-.72.9-.88 1.09-.16.19-.32.2-.6.07-.28-.14-1.17-.43-2.23-1.37-.83-.74-1.38-1.65-1.55-1.93-.16-.28-.02-.43.12-.57.13-.13.28-.33.42-.5.14-.16.19-.28.28-.47.09-.19.05-.35-.02-.5-.07-.14-.63-1.52-.87-2.08-.23-.55-.46-.47-.63-.48h-.54c-.19 0-.5.07-.76.35-.26.28-1 .98-1 2.38 0 1.4 1.02 2.76 1.16 2.95.14.19 2 3.05 4.85 4.27.68.29 1.21.47 1.62.6.68.22 1.3.19 1.79.11.55-.08 1.66-.68 1.9-1.34.24-.66.24-1.22.17-1.34-.07-.12-.25-.19-.53-.33z"/></svg>
|
||||
</a>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
<script src="js/planes.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+226
@@ -0,0 +1,226 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es-AR">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Portfolio — Amor y Roma</title>
|
||||
<meta name="description" content="Proyectos que combinan identidad, estrategia y estructura. Casos de Branding, Web, Redes y Ecosistemas Digitales.">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="container nav-row">
|
||||
<a href="index.html" class="logo-mark" aria-label="Amor y Roma — inicio">
|
||||
<svg viewBox="0 0 80 70" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M2 66V34C2 16.3 16.3 2 34 2H46C63.7 2 78 16.3 78 34V66" stroke="var(--accent-blush)" stroke-width="6" fill="none" opacity="0.55"/>
|
||||
<path d="M14 66V34C14 20.7 24.7 10 38 10H42C55.3 10 66 20.7 66 34V66" stroke="currentColor" stroke-width="6" fill="none"/>
|
||||
</svg>
|
||||
<span class="wordmark">amor&roma</span>
|
||||
</a>
|
||||
<nav class="nav-links" aria-label="Navegación principal">
|
||||
<a href="index.html">Inicio</a>
|
||||
<a href="servicios.html">Servicios</a>
|
||||
<a href="planes.html">Planes</a>
|
||||
<a href="portfolio.html" aria-current="page">Portfolio</a>
|
||||
<a href="nosotros.html">Nosotros</a>
|
||||
<a href="metodo.html">Método</a>
|
||||
<a href="contacto.html">Contacto</a>
|
||||
</nav>
|
||||
<div class="nav-actions">
|
||||
<a href="diagnostico.html" class="btn btn-primary">Encontrá tu solución</a>
|
||||
<button class="theme-toggle" data-theme-toggle type="button" aria-label="Cambiar tema claro/oscuro">
|
||||
<svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
|
||||
<svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.8A9 9 0 1111.2 3a7 7 0 009.8 9.8z"/></svg>
|
||||
</button>
|
||||
<button class="nav-toggle" data-nav-toggle type="button" aria-label="Abrir menú" aria-expanded="false">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-menu" data-mobile-menu>
|
||||
<a href="index.html">Inicio</a>
|
||||
<a href="servicios.html">Servicios</a>
|
||||
<a href="planes.html">Planes</a>
|
||||
<a href="portfolio.html">Portfolio</a>
|
||||
<a href="nosotros.html">Nosotros</a>
|
||||
<a href="metodo.html">Método</a>
|
||||
<a href="diagnostico.html">Diagnóstico</a>
|
||||
<a href="contacto.html">Contacto</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<section class="section-tight">
|
||||
<div class="container">
|
||||
<p class="eyebrow">Portfolio</p>
|
||||
<h1 style="font-size:var(--step-3); max-width:20ch;">Proyectos que combinan identidad, estrategia y estructura.</h1>
|
||||
<p class="lede" style="margin-top:1rem;">Estos casos son placeholders representativos de nuestros cuatro arquetipos de trabajo — se reemplazan por proyectos reales antes de publicar.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-tight" style="padding-top:0;">
|
||||
<div class="container">
|
||||
<div class="portfolio-filters">
|
||||
<button class="pill" data-filter="todos" data-active="true">Todos</button>
|
||||
<button class="pill" data-filter="branding">Branding</button>
|
||||
<button class="pill" data-filter="redes">Redes</button>
|
||||
<button class="pill" data-filter="web">Web</button>
|
||||
<button class="pill" data-filter="automatizacion">Automatización</button>
|
||||
<button class="pill" data-filter="paid-media">Paid Media</button>
|
||||
<button class="pill" data-filter="integral">Integral</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-3 portfolio-grid">
|
||||
|
||||
<div class="case-card" data-case-trigger
|
||||
data-tags="branding,redes,integral"
|
||||
data-case-tag="Arquetipo 01"
|
||||
data-case-title="Identidad Integral"
|
||||
data-case-context="Cliente con desarrollo de marca completo, personaje propio y administración continua de redes."
|
||||
data-case-problem="Necesitaba una identidad memorable y presencia constante en redes."
|
||||
data-case-solution="Branding completo con personaje de marca + gestión y pauta continua en RRSS.">
|
||||
<div class="thumb">Identidad Integral · placeholder</div>
|
||||
<div class="body">
|
||||
<h4 style="font-size:1.05rem;">Identidad Integral</h4>
|
||||
<p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.4rem;">Branding + personaje de marca + RRSS.</p>
|
||||
<div class="tags"><span class="pill">Branding</span><span class="pill">Redes</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-card" data-case-trigger
|
||||
data-tags="web,integral"
|
||||
data-case-tag="Arquetipo 02"
|
||||
data-case-title="Infraestructura Institucional"
|
||||
data-case-context="Consultora de seguridad que necesitaba transmitir seriedad y soporte a procesos B2B complejos."
|
||||
data-case-problem="Su presencia digital no transmitía la confianza que su operación exigía."
|
||||
data-case-solution="Desarrollo web corporativo enfocado en credibilidad institucional y procesos B2B.">
|
||||
<div class="thumb">Infraestructura Institucional · placeholder</div>
|
||||
<div class="body">
|
||||
<h4 style="font-size:1.05rem;">Infraestructura Institucional</h4>
|
||||
<p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.4rem;">Web corporativa, credibilidad B2B.</p>
|
||||
<div class="tags"><span class="pill">Web</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-card" data-case-trigger
|
||||
data-tags="branding,web,redes,integral"
|
||||
data-case-tag="Arquetipo 03"
|
||||
data-case-title="Ecosistema Digital"
|
||||
data-case-context="Empresa de tecnología que necesitaba construir su presencia desde cero — el servicio insignia de la agencia."
|
||||
data-case-problem="No tenía marca, web ni canal de comunicación activo."
|
||||
data-case-solution="Branding desde cero + presencia web sólida + canal activo en redes sociales.">
|
||||
<div class="thumb">Ecosistema Digital · placeholder</div>
|
||||
<div class="body">
|
||||
<h4 style="font-size:1.05rem;">Ecosistema Digital</h4>
|
||||
<p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.4rem;">Branding + Web + Redes, integrados.</p>
|
||||
<div class="tags"><span class="pill">Branding</span><span class="pill">Web</span><span class="pill">Redes</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-card" data-case-trigger
|
||||
data-tags="web,redes"
|
||||
data-case-tag="Arquetipo 04"
|
||||
data-case-title="Profesionalización"
|
||||
data-case-context="Emprendimiento de consultores independientes que necesitaba captar y validar confianza."
|
||||
data-case-problem="Sin plataforma propia para captar clientes ni nutrir la relación con ellos."
|
||||
data-case-solution="Plataforma web para captar y validar + redes sociales para nutrir y generar confianza.">
|
||||
<div class="thumb">Profesionalización · placeholder</div>
|
||||
<div class="body">
|
||||
<h4 style="font-size:1.05rem;">Profesionalización</h4>
|
||||
<p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.4rem;">Web + gestión de RRSS.</p>
|
||||
<div class="tags"><span class="pill">Web</span><span class="pill">Redes</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-card" data-case-trigger
|
||||
data-tags="automatizacion,paid-media"
|
||||
data-case-tag="Placeholder"
|
||||
data-case-title="Captación Automatizada"
|
||||
data-case-context="PyME de servicios que perdía leads por procesos manuales."
|
||||
data-case-problem="Los prospectos se enfriaban antes de ser contactados."
|
||||
data-case-solution="Automatización de cualificación + campañas de captación optimizadas.">
|
||||
<div class="thumb">Captación Automatizada · placeholder</div>
|
||||
<div class="body">
|
||||
<h4 style="font-size:1.05rem;">Captación Automatizada</h4>
|
||||
<p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.4rem;">Automatización + Paid Media.</p>
|
||||
<div class="tags"><span class="pill">Automatización</span><span class="pill">Paid Media</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<div class="modal-backdrop" id="case-modal">
|
||||
<div class="modal" role="dialog" aria-modal="true" aria-label="Detalle de caso">
|
||||
<button class="modal-close" data-modal-close aria-label="Cerrar">✕</button>
|
||||
<div id="case-modal-body"></div>
|
||||
<a href="contacto.html" class="btn btn-primary" style="margin-top:1.2rem;">Ver proyecto / Hablar con nosotros</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<div class="foot-grid">
|
||||
<div>
|
||||
<div class="logo-mark" style="color:var(--c-mist);">
|
||||
<svg viewBox="0 0 80 70" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="height:30px;">
|
||||
<path d="M2 66V34C2 16.3 16.3 2 34 2H46C63.7 2 78 16.3 78 34V66" stroke="var(--accent-blush)" stroke-width="6" fill="none" opacity="0.55"/>
|
||||
<path d="M14 66V34C14 20.7 24.7 10 38 10H42C55.3 10 66 20.7 66 34V66" stroke="currentColor" stroke-width="6" fill="none"/>
|
||||
</svg>
|
||||
<span class="wordmark" style="color:var(--c-mist);">amor&roma</span>
|
||||
</div>
|
||||
<p style="margin-top:0.8rem; color:#c9c2d6; font-style:italic; font-family:var(--font-display);">Marcas con esencia, construidas con estrategia.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Navegación</h5>
|
||||
<ul>
|
||||
<li><a href="index.html">Inicio</a></li>
|
||||
<li><a href="servicios.html">Servicios</a></li>
|
||||
<li><a href="planes.html">Planes</a></li>
|
||||
<li><a href="portfolio.html">Portfolio</a></li>
|
||||
<li><a href="nosotros.html">Nosotros</a></li>
|
||||
<li><a href="metodo.html">Método</a></li>
|
||||
<li><a href="diagnostico.html">Diagnóstico</a></li>
|
||||
<li><a href="contacto.html">Contacto</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Servicios</h5>
|
||||
<ul>
|
||||
<li><a href="servicios.html#branding">Branding</a></li>
|
||||
<li><a href="servicios.html#redes">Redes</a></li>
|
||||
<li><a href="servicios.html#web">Web</a></li>
|
||||
<li><a href="servicios.html#automatizaciones">Automatizaciones</a></li>
|
||||
<li><a href="servicios.html#paid-media">Paid Media</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Contacto <span style="opacity:.6; font-weight:400;">(datos de prueba)</span></h5>
|
||||
<ul>
|
||||
<li><a href="mailto:hola@amoryroma.com.ar">hola@amoryroma.com.ar</a></li>
|
||||
<li><a href="https://wa.me/5491100000000" target="_blank" rel="noopener">+54 9 11 0000-0000</a></li>
|
||||
<li><a href="https://instagram.com/amoryroma" target="_blank" rel="noopener">Instagram</a></li>
|
||||
<li><a href="https://linkedin.com/company/amoryroma" target="_blank" rel="noopener">LinkedIn</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="foot-bottom">
|
||||
<span>© <span data-year></span> Amor y Roma — Estudio Creativo. www.amoryroma.com.ar</span>
|
||||
<span>Política de privacidad · Términos y condiciones · Cookies</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<a class="whatsapp-float" href="https://wa.me/5491100000000" target="_blank" rel="noopener" aria-label="Escribir por WhatsApp">
|
||||
<svg viewBox="0 0 32 32" fill="currentColor" aria-hidden="true"><path d="M16.01 3C9.38 3 4 8.38 4 15.01c0 2.26.61 4.38 1.68 6.2L4 29l7.98-1.64a11.9 11.9 0 004.03.7c6.63 0 12.01-5.38 12.01-12.05C28.02 8.38 22.64 3 16.01 3zm0 21.8c-1.98 0-3.85-.55-5.44-1.5l-.39-.23-4.86 1 1.03-4.72-.25-.4a9.7 9.7 0 01-1.5-5.15c0-5.4 4.39-9.79 9.8-9.79 5.4 0 9.79 4.39 9.79 9.79.01 5.4-4.38 9.79-9.78 10zM21.4 18c-.28-.14-1.66-.82-1.92-.91-.26-.1-.44-.14-.63.14-.19.28-.72.9-.88 1.09-.16.19-.32.2-.6.07-.28-.14-1.17-.43-2.23-1.37-.83-.74-1.38-1.65-1.55-1.93-.16-.28-.02-.43.12-.57.13-.13.28-.33.42-.5.14-.16.19-.28.28-.47.09-.19.05-.35-.02-.5-.07-.14-.63-1.52-.87-2.08-.23-.55-.46-.47-.63-.48h-.54c-.19 0-.5.07-.76.35-.26.28-1 .98-1 2.38 0 1.4 1.02 2.76 1.16 2.95.14.19 2 3.05 4.85 4.27.68.29 1.21.47 1.62.6.68.22 1.3.19 1.79.11.55-.08 1.66-.68 1.9-1.34.24-.66.24-1.22.17-1.34-.07-.12-.25-.19-.53-.33z"/></svg>
|
||||
</a>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
<script src="js/portfolio.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+256
@@ -0,0 +1,256 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es-AR">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Servicios — Amor y Roma</title>
|
||||
<meta name="description" content="Branding, Redes Sociales, Desarrollo Web, Automatizaciones y Paid Media. Soluciones digitales diseñadas para hacer crecer tu marca.">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="container nav-row">
|
||||
<a href="index.html" class="logo-mark" aria-label="Amor y Roma — inicio">
|
||||
<svg viewBox="0 0 80 70" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<path d="M2 66V34C2 16.3 16.3 2 34 2H46C63.7 2 78 16.3 78 34V66" stroke="var(--accent-blush)" stroke-width="6" fill="none" opacity="0.55"/>
|
||||
<path d="M14 66V34C14 20.7 24.7 10 38 10H42C55.3 10 66 20.7 66 34V66" stroke="currentColor" stroke-width="6" fill="none"/>
|
||||
</svg>
|
||||
<span class="wordmark">amor&roma</span>
|
||||
</a>
|
||||
<nav class="nav-links" aria-label="Navegación principal">
|
||||
<a href="index.html">Inicio</a>
|
||||
<a href="servicios.html" aria-current="page">Servicios</a>
|
||||
<a href="planes.html">Planes</a>
|
||||
<a href="portfolio.html">Portfolio</a>
|
||||
<a href="nosotros.html">Nosotros</a>
|
||||
<a href="metodo.html">Método</a>
|
||||
<a href="contacto.html">Contacto</a>
|
||||
</nav>
|
||||
<div class="nav-actions">
|
||||
<a href="diagnostico.html" class="btn btn-primary">Encontrá tu solución</a>
|
||||
<button class="theme-toggle" data-theme-toggle type="button" aria-label="Cambiar tema claro/oscuro">
|
||||
<svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
|
||||
<svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.8A9 9 0 1111.2 3a7 7 0 009.8 9.8z"/></svg>
|
||||
</button>
|
||||
<button class="nav-toggle" data-nav-toggle type="button" aria-label="Abrir menú" aria-expanded="false">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-menu" data-mobile-menu>
|
||||
<a href="index.html">Inicio</a>
|
||||
<a href="servicios.html">Servicios</a>
|
||||
<a href="planes.html">Planes</a>
|
||||
<a href="portfolio.html">Portfolio</a>
|
||||
<a href="nosotros.html">Nosotros</a>
|
||||
<a href="metodo.html">Método</a>
|
||||
<a href="diagnostico.html">Diagnóstico</a>
|
||||
<a href="contacto.html">Contacto</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<section class="section-tight">
|
||||
<div class="container">
|
||||
<p class="eyebrow">Servicios</p>
|
||||
<h1 style="font-size:var(--step-3); max-width:22ch;">Soluciones digitales diseñadas para hacer crecer tu marca.</h1>
|
||||
<p class="lede" style="margin-top:1rem;">No vendemos piezas sueltas: cada servicio resuelve un problema concreto de tu negocio, y puede combinarse con otros según tu etapa.</p>
|
||||
<a href="diagnostico.html" class="btn btn-primary" style="margin-top:1.5rem;">Encontrá tu solución</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SELECTOR DE NECESIDADES -->
|
||||
<section class="section-tight" style="background:var(--bg-sunken);">
|
||||
<div class="container">
|
||||
<h3>¿Qué necesita hoy tu negocio?</h3>
|
||||
<div class="grid grid-4" style="margin-top:var(--space-3);">
|
||||
<a href="diagnostico.html?interes=marca" class="card" style="text-align:center;">Construir una marca</a>
|
||||
<a href="diagnostico.html?interes=presencia" class="card" style="text-align:center;">Mejorar mi presencia digital</a>
|
||||
<a href="diagnostico.html?interes=contenido" class="card" style="text-align:center;">Generar contenido</a>
|
||||
<a href="diagnostico.html?interes=web" class="card" style="text-align:center;">Crear una web</a>
|
||||
<a href="diagnostico.html?interes=captacion" class="card" style="text-align:center;">Conseguir clientes</a>
|
||||
<a href="diagnostico.html?interes=automatizacion" class="card" style="text-align:center;">Automatizar procesos</a>
|
||||
<a href="diagnostico.html?interes=varias" class="card" style="text-align:center;">Escalar campañas</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BRANDING -->
|
||||
<section id="branding">
|
||||
<div class="container">
|
||||
<div class="grid grid-2" style="align-items:center;">
|
||||
<div>
|
||||
<p class="eyebrow">01 · Branding & Identidad</p>
|
||||
<h2 style="max-width:16ch;">La esencia visual y conceptual de tu marca.</h2>
|
||||
<p class="lede" style="margin-top:1rem;">Diagnóstico de marca, propuesta de valor, personalidad y todo el sistema de identidad que sostiene tu comunicación.</p>
|
||||
<a href="diagnostico.html?interes=marca" class="btn btn-primary" style="margin-top:1.5rem;">Construir mi marca</a>
|
||||
</div>
|
||||
<ul class="grid grid-2" style="font-family:var(--font-small); font-size:0.9rem;">
|
||||
<li class="card">Diagnóstico de marca</li>
|
||||
<li class="card">Propuesta de valor</li>
|
||||
<li class="card">Logotipo e isotipo</li>
|
||||
<li class="card">Sistema cromático</li>
|
||||
<li class="card">Tipografía</li>
|
||||
<li class="card">Personajes / mascotas</li>
|
||||
<li class="card">Manual de identidad</li>
|
||||
<li class="card">Kit de plantillas</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- REDES -->
|
||||
<section id="redes" style="background:var(--bg-sunken);">
|
||||
<div class="container">
|
||||
<div class="grid grid-2" style="align-items:center;">
|
||||
<ul class="grid grid-2" style="font-family:var(--font-small); font-size:0.9rem; order:2;">
|
||||
<li class="card">Estrategia y grilla</li>
|
||||
<li class="card">Copywriting</li>
|
||||
<li class="card">Dirección de arte</li>
|
||||
<li class="card">Reels / TikTok</li>
|
||||
<li class="card">Historias</li>
|
||||
<li class="card">Moderación</li>
|
||||
<li class="card">Reporting</li>
|
||||
<li class="card">Paid Media según plan</li>
|
||||
</ul>
|
||||
<div style="order:1;">
|
||||
<p class="eyebrow">02 · Redes Sociales & Contenido</p>
|
||||
<h2 style="max-width:16ch;">Contenido con criterio, no solo calendario.</h2>
|
||||
<p class="lede" style="margin-top:1rem;">Estrategia, dirección de arte y gestión pensadas para generar comunidad real, no solo publicaciones.</p>
|
||||
<a href="planes.html" class="btn btn-primary" style="margin-top:1.5rem;">Ver planes</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- WEB -->
|
||||
<section id="web">
|
||||
<div class="container">
|
||||
<p class="eyebrow">03 · Desarrollo Web</p>
|
||||
<h2 style="max-width:20ch;">Activos digitales construidos alrededor de tu embudo.</h2>
|
||||
<div class="grid grid-3" style="margin-top:var(--space-4);">
|
||||
<div class="card">
|
||||
<h4 style="font-size:1.05rem;">Landing Pages</h4>
|
||||
<p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.5rem;">Para campañas y lanzamientos puntuales.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h4 style="font-size:1.05rem;">Sitios corporativos</h4>
|
||||
<p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.5rem;">Para empresas y organizaciones B2B.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h4 style="font-size:1.05rem;">Catálogos / E-commerce</h4>
|
||||
<p style="color:var(--text-soft); font-size:0.9rem; margin-top:0.5rem;">Para comercialización digital directa.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin-top:var(--space-3); color:var(--text-soft); font-size:0.92rem;">Mobile first · velocidad · SEO técnico · analítica · Meta Pixel · integración con WhatsApp API.</p>
|
||||
<a href="diagnostico.html?interes=web" class="btn btn-primary" style="margin-top:1.5rem;">Quiero una web</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- AUTOMATIZACIONES -->
|
||||
<section id="automatizaciones" style="background:var(--bg-sunken);">
|
||||
<div class="container">
|
||||
<p class="eyebrow">04 · Automatizaciones</p>
|
||||
<h2 style="max-width:18ch;">De la conversación a la venta, sin perder oportunidades.</h2>
|
||||
<div class="timeline" style="margin-top:var(--space-4); grid-template-columns:repeat(5,1fr) !important;">
|
||||
<div class="step"><h4 style="font-style:normal; font-size:1rem;">Interacción</h4></div>
|
||||
<div class="step"><h4 style="font-style:normal; font-size:1rem;">Cualificación</h4></div>
|
||||
<div class="step"><h4 style="font-style:normal; font-size:1rem;">Lead</h4></div>
|
||||
<div class="step"><h4 style="font-style:normal; font-size:1rem;">Notificación</h4></div>
|
||||
<div class="step"><h4 style="font-style:normal; font-size:1rem;">Seguimiento</h4></div>
|
||||
</div>
|
||||
<p style="margin-top:var(--space-3); color:var(--text-soft); font-size:0.92rem;">Instagram · Facebook · WhatsApp · captación · cualificación · notificaciones internas.</p>
|
||||
<a href="diagnostico.html?interes=automatizacion" class="btn btn-primary" style="margin-top:1.5rem;">Quiero automatizar</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PAID MEDIA -->
|
||||
<section id="paid-media">
|
||||
<div class="container">
|
||||
<p class="eyebrow">05 · Paid Media</p>
|
||||
<h2 style="max-width:18ch;">Publicidad que se optimiza, no que se apaga.</h2>
|
||||
<p class="lede" style="margin-top:1rem;">Auditoría, definición de públicos, conversiones, creatividades, testing y optimización continua.</p>
|
||||
<p style="margin-top:0.8rem; color:var(--text-soft); font-size:0.85rem;">La inversión publicitaria (Meta Ads, Google Ads) corre por cuenta del cliente; nuestros honorarios cubren estrategia, configuración, creatividades y optimización.</p>
|
||||
<a href="diagnostico.html?interes=captacion" class="btn btn-primary" style="margin-top:1.5rem;">Quiero generar oportunidades</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SOLUCIONES INTEGRALES -->
|
||||
<section style="background:var(--c-plum-2); color:var(--c-mist);">
|
||||
<div class="container">
|
||||
<h2 style="max-width:18ch; color:var(--c-mist);">Las marcas no crecen por piezas aisladas.</h2>
|
||||
<p class="lede" style="margin-top:1rem; color:#c9c2d6;">A veces la solución está en conectar varias disciplinas.</p>
|
||||
<div class="grid grid-4" style="margin-top:var(--space-4);">
|
||||
<div class="card" style="background:rgba(255,255,255,0.06); border-color:rgba(234,240,238,0.18); color:var(--c-mist);">Branding + Redes</div>
|
||||
<div class="card" style="background:rgba(255,255,255,0.06); border-color:rgba(234,240,238,0.18); color:var(--c-mist);">Branding + Web + Redes</div>
|
||||
<div class="card" style="background:rgba(255,255,255,0.06); border-color:rgba(234,240,238,0.18); color:var(--c-mist);">Web + Automatización + Paid Media</div>
|
||||
<div class="card" style="background:rgba(255,255,255,0.06); border-color:rgba(234,240,238,0.18); color:var(--c-mist);">Ecosistema Digital completo</div>
|
||||
</div>
|
||||
<a href="diagnostico.html?interes=varias" class="btn btn-primary" style="margin-top:var(--space-4);">Encontrar mi combinación</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<div class="foot-grid">
|
||||
<div>
|
||||
<div class="logo-mark" style="color:var(--c-mist);">
|
||||
<svg viewBox="0 0 80 70" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="height:30px;">
|
||||
<path d="M2 66V34C2 16.3 16.3 2 34 2H46C63.7 2 78 16.3 78 34V66" stroke="var(--accent-blush)" stroke-width="6" fill="none" opacity="0.55"/>
|
||||
<path d="M14 66V34C14 20.7 24.7 10 38 10H42C55.3 10 66 20.7 66 34V66" stroke="currentColor" stroke-width="6" fill="none"/>
|
||||
</svg>
|
||||
<span class="wordmark" style="color:var(--c-mist);">amor&roma</span>
|
||||
</div>
|
||||
<p style="margin-top:0.8rem; color:#c9c2d6; font-style:italic; font-family:var(--font-display);">Marcas con esencia, construidas con estrategia.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Navegación</h5>
|
||||
<ul>
|
||||
<li><a href="index.html">Inicio</a></li>
|
||||
<li><a href="servicios.html">Servicios</a></li>
|
||||
<li><a href="planes.html">Planes</a></li>
|
||||
<li><a href="portfolio.html">Portfolio</a></li>
|
||||
<li><a href="nosotros.html">Nosotros</a></li>
|
||||
<li><a href="metodo.html">Método</a></li>
|
||||
<li><a href="diagnostico.html">Diagnóstico</a></li>
|
||||
<li><a href="contacto.html">Contacto</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Servicios</h5>
|
||||
<ul>
|
||||
<li><a href="servicios.html#branding">Branding</a></li>
|
||||
<li><a href="servicios.html#redes">Redes</a></li>
|
||||
<li><a href="servicios.html#web">Web</a></li>
|
||||
<li><a href="servicios.html#automatizaciones">Automatizaciones</a></li>
|
||||
<li><a href="servicios.html#paid-media">Paid Media</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Contacto <span style="opacity:.6; font-weight:400;">(datos de prueba)</span></h5>
|
||||
<ul>
|
||||
<li><a href="mailto:hola@amoryroma.com.ar">hola@amoryroma.com.ar</a></li>
|
||||
<li><a href="https://wa.me/5491100000000" target="_blank" rel="noopener">+54 9 11 0000-0000</a></li>
|
||||
<li><a href="https://instagram.com/amoryroma" target="_blank" rel="noopener">Instagram</a></li>
|
||||
<li><a href="https://linkedin.com/company/amoryroma" target="_blank" rel="noopener">LinkedIn</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="foot-bottom">
|
||||
<span>© <span data-year></span> Amor y Roma — Estudio Creativo. www.amoryroma.com.ar</span>
|
||||
<span>Política de privacidad · Términos y condiciones · Cookies</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<a class="whatsapp-float" href="https://wa.me/5491100000000" target="_blank" rel="noopener" aria-label="Escribir por WhatsApp">
|
||||
<svg viewBox="0 0 32 32" fill="currentColor" aria-hidden="true"><path d="M16.01 3C9.38 3 4 8.38 4 15.01c0 2.26.61 4.38 1.68 6.2L4 29l7.98-1.64a11.9 11.9 0 004.03.7c6.63 0 12.01-5.38 12.01-12.05C28.02 8.38 22.64 3 16.01 3zm0 21.8c-1.98 0-3.85-.55-5.44-1.5l-.39-.23-4.86 1 1.03-4.72-.25-.4a9.7 9.7 0 01-1.5-5.15c0-5.4 4.39-9.79 9.8-9.79 5.4 0 9.79 4.39 9.79 9.79.01 5.4-4.38 9.79-9.78 10zM21.4 18c-.28-.14-1.66-.82-1.92-.91-.26-.1-.44-.14-.63.14-.19.28-.72.9-.88 1.09-.16.19-.32.2-.6.07-.28-.14-1.17-.43-2.23-1.37-.83-.74-1.38-1.65-1.55-1.93-.16-.28-.02-.43.12-.57.13-.13.28-.33.42-.5.14-.16.19-.28.28-.47.09-.19.05-.35-.02-.5-.07-.14-.63-1.52-.87-2.08-.23-.55-.46-.47-.63-.48h-.54c-.19 0-.5.07-.76.35-.26.28-1 .98-1 2.38 0 1.4 1.02 2.76 1.16 2.95.14.19 2 3.05 4.85 4.27.68.29 1.21.47 1.62.6.68.22 1.3.19 1.79.11.55-.08 1.66-.68 1.9-1.34.24-.66.24-1.22.17-1.34-.07-.12-.25-.19-.53-.33z"/></svg>
|
||||
</a>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user