ayr2026/nosotros.html

<!DOCTYPE html>
<html lang="es" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Conoce la filosofía, metodología y principios de Amor y Roma, agencia boutique de marketing digital. Marcas con esencia, construidas con estrategia.">
  <title>Nosotros | Amor y Roma — Agencia Boutique</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css">
  <link rel="stylesheet" href="style/main.css">
  <link rel="stylesheet" href="style/nosotros.css">
</head>
<body>
  <div id="menu-container"></div>

  <main>
    <!-- SECCIÓN 1: HERO / FILOSOFÍA -->
    <section class="hero-section nosotros-hero">
      <div class="hero-content">
        <h1 class="hero-title">Amor&Roma</h1>
        <p class="hero-subtitle">
         No somos una agencia tradicional. <br>Combinamos el arte del marketing digital con la ciencia de los datos.
        </p>
        <div class="hero-cta-group">
          <a href="#nosotros-dualidad" class="btn btn-primary">Descubre nuestra dualidad</a>
          <a href="contacto.html" class="btn btn-secondary">Hablemos de tu proyecto</a>
        </div>
      </div>
    </section>

    <!-- SECCIÓN 2: LA DUALIDAD DE MARCA -->
    <section id="nosotros-dualidad" class="dualidad-section">
      <div class="section-header">
        <h2 class="section-title">Nuestra Dualidad Estratégica</h2>
        <p class="section-subtitle">El nombre de nuestra agencia no responde a una visión romántica tradicional, sino a dos pilares operativos inseparables.</p>
      </div>
      <div class="dualidad-grid">
        <article class="dualidad-card card-amor">
          <div class="card-icon icon-amor"></div>
          <h3>Amor</h3>
          <span class="card-tag">La Pasión y el Arte</span>
          <p>Representa el instinto creativo, la intuición visual, la dirección de arte meticulosa, la empatía con la visión del cliente y la estética no negociable. <br>Es el alma y la identidad de cada marca.</p>
        </article>
        <article class="dualidad-card card-roma">
          <div class="card-icon icon-roma"></div>
          <h3>Roma</h3>
          <span class="card-tag">La Construcción y la Estructura</span>
          <p>Representa la arquitectura, el método, la ingeniería de procesos, la estrategia a largo plazo y la infraestructura digital orientada a resultados. <br>Es el imperio que sostiene esa visión.</p>
        </article>
      </div>
    </section>

    <!-- SECCIÓN: QUIÉNES SOMOS / EQUIPO -->
    <section id="nosotros-equipo" class="equipo-section">
      <div class="section-header">
        <h2 class="section-title">Mentes creativas, con <span class="text-gradient">mucha energía.</span></h2>
        <p class="section-subtitle">Combinamos el arte del Marketing con la Ciencia de los datos.</p>
      </div>

      <div class="equipo-grid">
        <!-- PATRICIA -->
        <article class="equipo-card">
          <div class="equipo-firma">Patricia Pugliese</div>
          <span class="equipo-rol">Estrategia & Creatividad</span>
          <p class="equipo-descripcion">
            Investigación, branding, identidad visual y todo lo que da forma a una marca con personalidad.
          </p>
        </article>

        <!-- FRANCISCO -->
        <article class="equipo-card">
          <div class="equipo-firma">Francisco Anfuso</div>
          <span class="equipo-rol">Desarrollo & Tecnología</span>
          <p class="equipo-descripcion">
            Diseño web, desarrollo, automatizaciones y soluciones técnicas que funcionan sin complicaciones.
          </p>
        </article>
      </div>

      <p class="equipo-colaboradores">
     Trabajamos en equipo ayudando a las PyMEs a competir y crecer.      </p>
    </section>

    <!-- SECCIÓN 3: PRINCIPIOS BOUTIQUE -->
    <section id="nosotros-principios" class="principios-section">
      <div class="section-header">
        <h2 class="section-title">El Posicionamiento "Boutique"</h2>
        <p class="section-subtitle">Ser una agencia boutique implica tres principios rectores que protegen la calidad y el resultado de tu proyecto.</p>
      </div>
      <div class="principios-grid">
        <div class="principio-item">
          <div class="principio-numero">01</div>
          <h4>Cero plantillas prefabricadas</h4>
          <p>Cada diseño, arquitectura web o plan de contenidos se crea a medida de la identidad, necesidades y madurez real de tu negocio.</p>
        </div>
        <div class="principio-item">
          <div class="principio-numero">02</div>
          <h4>Capacidad controlada de cuentas</h4>
          <p>Priorizamos la profundidad operativa sobre el volumen desmedido de clientes, garantizando atención directa y personalización real.</p>
        </div>
        <div class="principio-item">
          <div class="principio-numero">03</div>
          <h4>Foco visual y de contenido</h4>
          <p>Aunque la automatización es clave, nuestro valor diferencial perceptible está en el criterio estético, la narrativa visual y la calidad de producción.</p>
        </div>
      </div>
    </section>

    <!-- SECCIÓN 4: TRANSPARENCIA -->
    <section id="nosotros-transparencia" class="transparencia-section">
      <div class="section-header">
        <h2 class="section-title">Transparencia antes de la primera reunión</h2>
        <p class="section-subtitle">Los números, dichos de entrada, no como parte de una negociación, sino como punto de partida.</p>
      </div>
      
      <div class="transparencia-grid">
        <!-- Tarjeta 1: INVERSIÓN -->
        <article class="transparencia-card">
          <div class="transparencia-icono">
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
              <path d="M12 2v20M2 12h20" stroke-linecap="round"/>
              <circle cx="12" cy="12" r="10" stroke-linecap="round"/>
            </svg>
          </div>
          <p class="transparencia-titulo">INVERSIÓN</p>
          <p class="transparencia-dato">Desde $250.000/mes</p>
          <p class="transparencia-texto">
            Planes desde <strong>$250.000</strong> (Esencial) hasta <strong>$1.000.000</strong> (Élite). El armado inicial —branding, sitio web— se presupuesta por proyecto.
          </p>
        </article>

        <!-- Tarjeta 2: TIEMPOS -->
        <article class="transparencia-card">
          <div class="transparencia-icono">
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
              <circle cx="12" cy="12" r="10" stroke-linecap="round"/>
              <path d="M12 6v6l4 2" stroke-linecap="round"/>
            </svg>
          </div>
          <p class="transparencia-titulo">TIEMPOS</p>
          <p class="transparencia-dato">15-30 días</p>
          <p class="transparencia-texto">
            Presencia digital lista en <strong>15-30 días</strong>. Resultados de posicionamiento sostenido en <strong>3-6 meses</strong>. Sin promesas de magia inmediata.
          </p>
        </article>

        <!-- Tarjeta 3: CONTRATO -->
        <article class="transparencia-card">
          <div class="transparencia-icono">
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke-linecap="round"/>
              <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" stroke-linecap="round"/>
            </svg>
          </div>
          <p class="transparencia-titulo">CONTRATO</p>
          <p class="transparencia-dato">3 meses · luego mensual</p>
          <p class="transparencia-texto">
            Compromiso mínimo de <strong>3 meses</strong> para que la estrategia tome forma, luego renovación mensual. Cancelación con <strong>30 días de aviso</strong>.
          </p>
        </article>
      </div>
    </section>

    <!-- SECCIÓN 5: CASOS TESTIGO / ARQUETIPOS -->
    <section id="nosotros-casos" class="casos-section">
      <div class="section-header">
        <h2 class="section-title">Matriz de Soluciones</h2>
        <p class="section-subtitle">Nuestra experiencia define arquetipos de solución que comercializamos con total solvencia operativa.</p>
      </div>
      
      <div class="casos-grid-simetrico">
        <!-- ARQUETIPO 1 -->
        <article class="caso-card">
          <div class="caso-header">
            <span class="caso-badge">Mordi - El mundo en un bocado</span>
            <h3 class="caso-titulo">Identidad Integral</h3>
          </div>
          <p class="caso-descripcion">Desarrollo de marca completo, mascota propia y administración continua de redes.</p>
          <div class="caso-leccion">
            <strong>Lección:</strong> Capacidad de crear activos creativos de alto impacto y sostenerlos con pauta publicitaria.
          </div>
        </article>

        <!-- ARQUETIPO 2 -->
        <article class="caso-card">
          <div class="caso-header">
            <span class="caso-badge">ArWorks - higiene y seguridad</span>
            <h3 class="caso-titulo">Infraestructura B2B</h3>
          </div>
          <p class="caso-descripcion">Consultora de Seguridad: Sitio web corporativo a medida y arquitectura sobria.</p>
          <div class="caso-leccion">
            <strong>Lección:</strong> Validación de desarrollo web enfocado en transmitir seriedad, confianza y soporte a procesos complejos.
          </div>
        </article>

        <!-- ARQUETIPO 3 (INSÍGNIA) -->
        <article class="caso-card caso-insignia">
          <div class="caso-header">
            <span class="caso-badge caso-badge-insignia">vetta io</span>
            <h3 class="caso-titulo">Ecosistema Digital Completo</h3>
          </div>
          <p class="caso-descripcion">Empresa de Tecnología: Branding + Web a medida + RRSS activas.</p>
          <div class="caso-leccion caso-leccion-insignia">
            <strong>Lección:</strong> Nuestro servicio estrella. Integra identidad desde cero, presencia web sólida y canal de comunicación activo.
          </div>
        </article>

        <!-- ARQUETIPO 4 -->
        <article class="caso-card">
          <div class="caso-header">
            <span class="caso-badge">ide - consultores</span>
            <h3 class="caso-titulo">Profesionalización de Servicios</h3>
          </div>
          <p class="caso-descripcion">Consultores Independientes: Web a medida + Gestión estratégica de RRSS.</p>
          <div class="caso-leccion">
            <strong>Lección:</strong> El modelo estándar para pequeñas firmas: plataforma para captar y validar, redes para nutrir y generar confianza.
          </div>
        </article>
      </div>
    </section>

    <!-- SECCIÓN 6: CTA FINAL -->
    <section class="cta-section">
      <div class="cta-card">
        <h2 class="cta-title">¿Listo para construir tu imperio con esencia?</h2>
        <p class="cta-subtitle">Agendemos una reunión. Sin plantillas, sin compromisos, solo estrategia a medida.</p>
        <div class="cta-buttons">
          <a href="contacto.html" class="btn btn-cta-primary">Hablemos de tu proyecto</a>
          <a href="inicio.html#portfolio" class="btn btn-cta-secondary">Ver Casos de Éxito</a>
        </div>
      </div>
    </section>
  </main>

  <div id="footer-container"></div>

  <script src="scripts/main.js"></script>
</body>
</html>