/* contact-card.css — Le Grand Digital Crew
   Componente: Membership Card de contacto
   Uso: <link rel="stylesheet" href="/assets/css/contact-card.css">
   Requiere: Anton + Montserrat + Cormorant Garamond (Google Fonts)
   Variables requeridas en :root — --ease, --yellow, --bg, --white, --dark, --w40
*/

/* CONTACTO TARJETA — estilo membership card */
.contacto-card{
  padding:clamp(5rem,10vw,8rem) clamp(1.25rem,5vw,4rem);
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
}
.card-wrap{
  position:relative;
  opacity:0;transform:translateY(30px) rotate(-1.5deg);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.card-wrap.in{opacity:1;transform:translateY(0) rotate(-1.5deg);}
.card-wrap:hover{transform:translateY(-6px) rotate(0deg);transition:transform .5s var(--ease),opacity .9s var(--ease);}
.membership-card{
  background:var(--dark);
  border:1px solid rgba(232,186,30,0.3);
  padding:clamp(2.5rem,5vw,4rem) clamp(2rem,5vw,4rem);
  max-width:680px;width:100%;
  position:relative;
  box-shadow:0 40px 80px rgba(0,0,0,0.5);
}
/* Esquinas decorativas */
.membership-card::before,.membership-card::after{
  content:'';position:absolute;width:20px;height:20px;
  border-color:var(--yellow);border-style:solid;
}
.membership-card::before{top:12px;left:12px;border-width:1px 0 0 1px;}
.membership-card::after{bottom:12px;right:12px;border-width:0 1px 1px 0;}

.card__eyebrow{
  font-size:.58rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(232,186,30,0.6);display:block;margin-bottom:1.5rem;
}
.card__title{
  font-family:'Anton',sans-serif;
  font-size:clamp(2.5rem,7vw,5rem);font-weight:400;
  text-transform:uppercase;line-height:.92;color:var(--white);
  margin-bottom:.4rem;
}
.card__title span{color:var(--yellow);}

.card__divider{
  height:1px;background:rgba(232,186,30,0.2);
  margin:1.5rem 0;position:relative;
}
.card__divider::before{
  content:'EMPECEMOS ALGO MEMORABLE';
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--dark);padding:0 1rem;
  font-size:.52rem;font-weight:700;letter-spacing:.22em;
  color:rgba(232,186,30,0.5);white-space:nowrap;
}

.card__perks{
  list-style:none;margin-bottom:2rem;display:flex;flex-direction:column;gap:.6rem;
}
.card__perk{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:clamp(.9rem,1.8vw,1.1rem);font-weight:300;
  color:rgba(234,234,232,0.6);display:flex;align-items:baseline;gap:.6rem;
}
.card__perk::before{
  content:'✦';font-size:.5rem;color:var(--yellow);
  font-style:normal;flex-shrink:0;
}

.card__form{
  display:grid;grid-template-columns:1fr 1fr;gap:.75rem;
  margin-bottom:.75rem;
}
@media(max-width:500px){.card__form{grid-template-columns:1fr;}}

.card__input{
  font-family:'Montserrat',sans-serif;font-size:.85rem;font-weight:400;
  background:rgba(234,234,232,0.05);border:1px solid rgba(234,234,232,0.12);
  color:var(--white);padding:.75em 1em;outline:none;
  transition:border-color .3s,background .3s;
  -webkit-appearance:none;border-radius:0;
}
.card__input::placeholder{color:rgba(234,234,232,0.25);}
.card__input:focus{border-color:var(--yellow);background:rgba(232,186,30,0.04);}
.card__input--full{grid-column:1/-1;}

.card__submit-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:.25rem;}
.card__submit{
  font-family:'Anton',sans-serif;font-size:1.1rem;font-weight:400;
  letter-spacing:.06em;text-transform:uppercase;
  padding:.65em 2.2em;background:var(--yellow);color:var(--bg);
  border:none;cursor:none;
  transition:background .25s,transform .3s var(--ease),letter-spacing .3s;
  display:inline-flex;align-items:center;gap:.5rem;
}
.card__submit:hover{background:#f0ca4a;transform:translateY(-2px);letter-spacing:.1em;}

.card__contacts{display:flex;flex-direction:column;gap:.75rem;}
.card__contact-link{display:flex;flex-direction:column;gap:.15rem;text-decoration:none;transition:opacity .2s;}
.card__contact-link:hover{opacity:.7;}
.card__contact-label{font-size:.52rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(232,186,30,0.5);}
.card__contact-val{font-size:.8rem;font-weight:600;color:rgba(234,234,232,0.7);letter-spacing:.02em;}

.card__dues{
  font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(234,234,232,0.25);font-style:italic;
}

  </style>
</head>
<body>

  <div id="cur" aria-hidden="true"><div id="cur-dot"></div><div id="cur-ring"></div></div>

  <header id="navbar" class="navbar" role="banner">
<div class="navbar__inner">
  <a href="/" class="navbar__logo" aria-label="Le Grand — Inicio">Le Grand</a>
  <nav class="navbar__nav" aria-label="Navegación principal">
    <a href="/servicios/" class="navbar__link">Servicios</a>
    <a href="/casos/" class="navbar__link is-active">Trabajo</a>
    <a href="/insights/" class="navbar__link">Insights</a>
    <a href="/nosotros/" class="navbar__link">Nosotros</a>
    <a href="/contacto/" class="navbar__link">Contacto</a>
  </nav>
  <a href="/contacto/" class="navbar__cta">Hablemos</a>
  <button class="navbar__hamburger" id="menuToggle" aria-label="Abrir menú" aria-expanded="false" aria-controls="mobileMenu" type="button"><span aria-hidden="true"></span><span aria-hidden="true"></span></button>
</div>
<div class="mobile-menu" id="mobileMenu" aria-hidden="true" role="dialog" aria-modal="true">
  <a href="/servicios/" class="mobile-menu__link">Servicios</a>
  <a href="/casos/" class="mobile-menu__link">Trabajo</a>
  <a href="/insights/" class="mobile-menu__link">Insights</a>
  <a href="/nosotros/" class="mobile-menu__link">Nosotros</a>
  <a href="/contacto/" class="mobile-menu__link">Contacto</a>
  <div class="mobile-menu__footer">
    <p class="mobile-menu__tagline">Que se vea no basta. Tiene que conectar.</p>
    <div class="mobile-menu__social">
      <a href="https://instagram.com/legrnd" target="_blank" rel="noopener noreferrer">Instagram</a>
      <a href="https://linkedin.com/company/legrand" target="_blank" rel="noopener noreferrer">LinkedIn</a>
    </div>
  </div>
</div>
  </header>

  <main id="contenido-principal" tabindex="-1">

<nav class="breadcrumbs" aria-label="Ruta de navegación">
  <ol>
    <li><a href="/">Inicio</a></li>
    <li aria-hidden="true">·</li>
    <li aria-current="page">Trabajo</li>
  </ol>
</nav>

<!-- HERO -->
<div class="hero">
  <span class="hero__label">— Nuestro trabajo</span>
  <h1 class="hero__title" id="heroTitle">
    Trabajo<br><em>real.</em>
  </h1>
  <p class="hero__sub" id="heroSub">Marcas reales. Retos reales. Resultados medibles. Así es como trabajamos.</p>
</div>

<!-- FILTROS -->
<div class="filters" role="group" aria-label="Filtrar por categoría">
  <button class="filter-btn is-active" data-filter="all" type="button">Todos</button>
  <button class="filter-btn" data-filter="estrategia" type="button">Estrategia</button>
  <button class="filter-btn" data-filter="contenido" type="button">Contenido</button>
  <button class="filter-btn" data-filter="video" type="button">Video</button>
  <button class="filter-btn" data-filter="fotografia" type="button">Fotografía</button>
  <button class="filter-btn" data-filter="datos" type="button">Datos</button>
</div>

<!-- GRID -->
<div class="cases-grid" id="casesGrid">

  <!-- CASTROL — destacado -->
  <!-- IMAGEN: /assets/images/casos/caso-castrol-hero.webp · 1400×600px -->
  <a href="/casos/castrol/" class="case-card case-card--featured" data-categories="estrategia contenido video" aria-label="Ver caso: Castrol">
    <div class="case-card__img">
      <div class="case-card__img-inner" style="background-image:url('/assets/images/caso-castrol.webp');background-color:#1a0a0a;"></div>
      <div class="case-card__overlay"></div>
    </div>
    <div class="case-card__info">
      <div class="case-card__meta">
        <div class="case-card__tags"><span class="case-card__tag">Estrategia</span><span class="case-card__tag">Contenido</span><span class="case-card__tag">Video</span></div>
        <span class="case-card__year">2024</span>
      </div>
      <h2 class="case-card__title">Castrol — Ecosistema digital para una marca global en Colombia</h2>
      <p class="case-card__desc">Desarrollamos la estrategia de contenido digital de Castrol Colombia: tono, calendario editorial, producción audiovisual y comunidad de motociclistas.</p>
      <span class="case-card__cta">Ver caso completo →</span>
    </div>
  </a>

  <!-- ZELERY -->
  <!-- IMAGEN: /assets/images/casos/caso-zelery.webp · 700×525px -->
  <a href="/casos/zelery/" class="case-card" data-categories="datos estrategia" aria-label="Ver caso: Zelery">
    <div class="case-card__img">
      <div class="case-card__img-inner" style="background-image:url('/assets/images/caso-zelery.webp');background-color:#0a1a0a;"></div>
      <div class="case-card__overlay"></div>
    </div>
    <div class="case-card__info">
      <div class="case-card__meta">
        <div class="case-card__tags"><span class="case-card__tag">Datos</span><span class="case-card__tag">Estrategia</span></div>
        <span class="case-card__year">2024</span>
      </div>
      <h2 class="case-card__title">Zelery — Dashboard de analytics para startup de innovación</h2>
      <p class="case-card__desc">Construimos el sistema de medición y reportes de Zelery, convirtiendo datos en decisiones estratégicas.</p>
      <span class="case-card__cta">Ver caso →</span>
    </div>
  </a>

  <!-- RUEDA ELÉCTRICA -->
  <!-- IMAGEN: /assets/images/casos/caso-rueda.webp · 700×525px -->
  <a href="/casos/rueda-electrica/" class="case-card" data-categories="fotografia video" aria-label="Ver caso: Rueda Eléctrica">
    <div class="case-card__img">
      <div class="case-card__img-inner" style="background-image:url('/assets/images/caso-rueda.webp');background-color:#0a0a1a;"></div>
      <div class="case-card__overlay"></div>
    </div>
    <div class="case-card__info">
      <div class="case-card__meta">
        <div class="case-card__tags"><span class="case-card__tag">Fotografía</span><span class="case-card__tag">Video</span></div>
        <span class="case-card__year">2024</span>
      </div>
      <h2 class="case-card__title">Rueda Eléctrica — Lanzamiento de producto audiovisual</h2>
      <p class="case-card__desc">Producción fotográfica y audiovisual para el lanzamiento de la línea de scooters eléctricos en Colombia.</p>
      <span class="case-card__cta">Ver caso →</span>
    </div>
  </a>

  <!-- CANDY AVIATION -->
  <!-- IMAGEN: /assets/images/casos/caso-candy.webp · 700×525px -->
  <a href="/casos/candy-aviation/" class="case-card" data-categories="estrategia contenido" aria-label="Ver caso: Candy Aviation">
    <div class="case-card__img">
      <div class="case-card__img-inner" style="background-image:url('/assets/images/caso-candy.webp');background-color:#0d0d1a;"></div>
      <div class="case-card__overlay"></div>
    </div>
    <div class="case-card__info">
      <div class="case-card__meta">
        <div class="case-card__tags"><span class="case-card__tag">Estrategia</span><span class="case-card__tag">Contenido</span></div>
        <span class="case-card__year">2024</span>
      </div>
      <h2 class="case-card__title">Candy Aviation — Presencia digital para academia de aviación</h2>
      <p class="case-card__desc">Estrategia de contenido y producción audiovisual para posicionar a Candy Aviation en el mercado digital latinoamericano.</p>
      <span class="case-card__cta">Ver caso →</span>
    </div>
  </a>

  <!-- SOY MOTERA -->
  <!-- IMAGEN: /assets/images/casos/caso-soymotera.webp · 700×525px -->
  <a href="/casos/soy-motera/" class="case-card" data-categories="contenido video" aria-label="Ver caso: Soy Motera">
    <div class="case-card__img">
      <div class="case-card__img-inner" style="background-image:url('/assets/images/caso-soymotera.webp');background-color:#1a0a10;"></div>
      <div class="case-card__overlay"></div>
    </div>
    <div class="case-card__info">
      <div class="case-card__meta">
        <div class="case-card__tags"><span class="case-card__tag">Contenido</span><span class="case-card__tag">Video</span></div>
        <span class="case-card__year">2024</span>
      </div>
      <h2 class="case-card__title">Soy Motera — Comunidad digital para mujeres motociclistas</h2>
      <p class="case-card__desc">Creación de contenido editorial y audiovisual que consolidó a Soy Motera como la comunidad de referencia para motociclistas en Colombia.</p>
      <span class="case-card__cta">Ver caso →</span>
    </div>
  </a>

  <!-- PASTELLE KITCHEN -->
  <!-- IMAGEN: /assets/images/casos/caso-pastelle.webp · 700×525px -->
  <a href="/casos/pastelle-kitchen/" class="case-card" data-categories="fotografia contenido" aria-label="Ver caso: Pastelle Kitchen">
    <div class="case-card__img">
      <div class="case-card__img-inner" style="background-image:url('/assets/images/caso-pastelle.webp');background-color:#1a1208;"></div>
      <div class="case-card__overlay"></div>
    </div>
    <div class="case-card__info">
      <div class="case-card__meta">
        <div class="case-card__tags"><span class="case-card__tag">Fotografía</span><span class="case-card__tag">Contenido</span></div>
        <span class="case-card__year">2024</span>
      </div>
      <h2 class="case-card__title">Pastelle Kitchen — Identidad visual y contenido gastronómico</h2>
      <p class="case-card__desc">Fotografía de producto y contenido editorial para posicionar a Pastelle Kitchen como referente de cocina saludable en Bogotá.</p>
      <span class="case-card__cta">Ver caso →</span>
    </div>
  </a>

</div>

<!-- CONTACTO — Membership Card -->
<section class="contacto-card" id="contacto" aria-label="Contacto">
  <div class="card-wrap" id="cardWrap">
    <div class="membership-card">
      <span class="card__eyebrow">— Le Grand Digital Crew</span>
      <h2 class="card__title">TU MARCA MERECE<br><span>ESTAR AQUÍ</span></h2>

      <div class="card__divider"></div>

      <ul class="card__perks" aria-label="EMPECEMOS ALGO MEMORABLE">
        <li class="card__perk">Si conectaste con nuestra visión, el próximo gran proyecto puede ser el tuyo. Cuéntanos sobre tu marca y empecemos la conversación.</li>
      </ul>

      <form class="card__form" id="cardForm" action="https://formspree.io/f/[TU-ID]" method="POST" novalidate>
        <input type="text" name="nombre" placeholder="¿Cómo te llamas?" class="card__input" required />
        <input type="email" name="email" placeholder="¿Dónde podemos escribirte?" class="card__input" required />
        <input type="text" name="mensaje" placeholder="Háblanos de tu marca, proyecto o idea." class="card__input card__input--full" />
        <div class="card__submit-row card__input--full">
          <button type="submit" class="card__submit">LET'S TALK ↗</button>
          <div class="card__contacts">
            <a href="mailto:crew@legranddc.co" class="card__contact-link">
              <span class="card__contact-label">Email</span>
              <span class="card__contact-val">crew@legranddc.co</span>
            </a>
            <a href="https://wa.me/573144401949" target="_blank" rel="noopener noreferrer" class="card__contact-link">
              <span class="card__contact-label">WhatsApp</span>
              <span class="card__contact-val">+57 314 440 1949</span>
            </a>
          </div>
        </div>
      </form>
    </div>
  </div>
</section>

  </main>

  <!-- Footer se carga dinámicamente -->
  <div id="site-footer"></div>
  <link rel="stylesheet" href="/assets/css/footer.css" />
  <script src="/assets/js/footer.js"></script>


  <script>
  (function(){
const isFine=window.matchMedia('(pointer: fine)').matches;
const isReduced=window.matchMedia('(prefers-reduced-motion: reduce)').matches;

/* CURSOR */
const dot=document.getElementById('cur-dot'),ring=document.getElementById('cur-ring');
let mx=0,my=0,cx=0,cy=0;
const lerp=(a,b,t)=>a+(b-a)*t;
if(isFine){document.addEventListener('mousemove',e=>{mx=e.clientX;my=e.clientY;},{passive:true});(function tick(){cx=lerp(cx,mx,.12);cy=lerp(cy,my,.12);dot.style.transform=`translate(${mx}px,${my}px) translate(-50%,-50%)`;ring.style.transform=`translate(${cx}px,${cy}px) translate(-50%,-50%)`;requestAnimationFrame(tick);})();}

/* NAVBAR */
const navbar=document.getElementById('navbar');
window.addEventListener('scroll',()=>navbar.classList.toggle('is-scrolled',window.scrollY>50),{passive:true});

/* MOBILE MENU */
const mt=document.getElementById('menuToggle'),mm=document.getElementById('mobileMenu');
if(mt&&mm){mt.addEventListener('click',()=>{const o=mm.classList.toggle('is-open');mt.setAttribute('aria-expanded',o);mm.setAttribute('aria-hidden',!o);document.body.style.overflow=o?'hidden':'';});}

if(!isReduced){
  /* Hero */
  ['heroTitle','heroSub'].forEach((id,i)=>{
    const el=document.getElementById(id);
    if(el)setTimeout(()=>el.classList.add('in'),100+i*120);
  });

  /* Cards */
  const cardObs=new IntersectionObserver(entries=>{
    entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');cardObs.unobserve(e.target);}});
  },{threshold:0,rootMargin:'0px 0px -60px 0px'});
  document.querySelectorAll('.case-card').forEach(c=>cardObs.observe(c));
} else {
  document.querySelectorAll('.case-card,.hero__title,.hero__sub').forEach(el=>el.classList.add('in'));
}

/* FILTROS */
const filterBtns=document.querySelectorAll('.filter-btn');
const cards=document.querySelectorAll('.case-card[data-categories]');
filterBtns.forEach(btn=>{
  btn.addEventListener('click',()=>{
    filterBtns.forEach(b=>b.classList.remove('is-active'));
    btn.classList.add('is-active');
    const f=btn.dataset.filter;
    cards.forEach(card=>{
      const cats=card.dataset.categories||'';
      const show=f==='all'||cats.includes(f);
      card.hidden=!show;
    });
  });
});

/* CURSOR hover en cards */
if(isFine){document.querySelectorAll('.case-card').forEach(c=>{c.addEventListener('mouseenter',()=>ring&&ring.classList.add('big'));c.addEventListener('mouseleave',()=>ring&&ring.classList.remove('big'));});}

/* CONTACTO TARJETA */
const cardWrap=document.getElementById('cardWrap');
if(cardWrap){new IntersectionObserver(e=>{e.forEach(x=>{if(x.isIntersecting)cardWrap.classList.add('in');});},{threshold:0.2}).observe(cardWrap);}

  })();
  </script>

</body>
</html>