new_amoryroma/portfolio.html

<!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>

<div id="header-placeholder"></div>

<main>

  <section class="section-tight">
    <div class="container">
      <p class="eyebrow">PORTFOLIO</p>
      <h1 style="font-size:var(--step-4); max-width:20ch;">Proyectos que combinan <span class="grad-word">identidad,</span> 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>

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

<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>