// Home B — GRID + STICKERS (hybrid y2k chaos) — fixes v2

// FALLBACK reach (si el JSON falla al cargar). Real numbers validados manualmente
// el 29 abr. La fuente de verdad ahora es konecta/follower-counts.json
// (auto-generado por Apify cron 1x/día).
const FALLBACK_REACH = 692400;

// Returns [formattedCount, ref, meta] donde meta = { ig_total, tt_total, accounts, updated_at }.
// El número viene de fetch a /konecta/follower-counts.json al montar; si falla, usa FALLBACK.
// El initial count-up animation siempre corre. El drift interval se pausa fuera de viewport.
function useLiveReach() {
  const [target, setTarget] = React.useState(FALLBACK_REACH);
  const [meta, setMeta] = React.useState(null);
  const [n, setN] = React.useState(0);
  const ref = React.useRef(null);
  const reachedRef = React.useRef(false);

  // Cargar conteo real desde JSON
  React.useEffect(() => {
    fetch('/konecta/follower-counts.json', { cache: 'no-store' })
      .then(r => r.ok ? r.json() : null)
      .then(data => {
        if (!data || typeof data.combined !== 'number') return;
        setTarget(data.combined);
        setMeta({
          ig_total: data.ig?.total ?? null,
          tt_total: data.tt?.total ?? null,
          ig_accounts: data.ig?.accounts ?? {},
          tt_accounts: data.tt?.accounts ?? {},
          updated_at: data.updated_at ?? null,
        });
      })
      .catch(() => {/* fallback ya en estado */});
  }, []);

  // Animación count-up al montar
  React.useEffect(() => {
    const duration = 2200;
    const start = performance.now();
    const startVal = n;
    const targetVal = target;
    let rafId = null;
    const tick = (now) => {
      const t = Math.min(1, (now - start) / duration);
      const eased = t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
      setN(Math.floor(startVal + (targetVal - startVal) * eased));
      if (t < 1) {
        rafId = requestAnimationFrame(tick);
      } else {
        rafId = null;
        reachedRef.current = true;
      }
    };
    rafId = requestAnimationFrame(tick);
    return () => { if (rafId) cancelAnimationFrame(rafId); };
  }, [target]);

  // Drift sutil cuando ya llegamos al target
  React.useEffect(() => {
    let driftId = null;
    let drift = 0;
    const startDrift = () => {
      if (driftId != null) return;
      driftId = setInterval(() => {
        drift = (drift + 1) % 6;
        if (reachedRef.current) setN(target + drift);
      }, 3500);
    };
    const stopDrift = () => { if (driftId != null) { clearInterval(driftId); driftId = null; } };

    const supportsIO = typeof IntersectionObserver !== 'undefined';
    if (!supportsIO || !ref.current) {
      startDrift();
      return stopDrift;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) startDrift(); else stopDrift(); });
    }, { threshold: 0 });
    io.observe(ref.current);
    return () => { io.disconnect(); stopDrift(); };
  }, [target]);

  return [n.toLocaleString('en-US'), ref, meta];
}

function Accordion({ title, kicker, bg, children, defaultOpen = false, dark = false }) {
  const [open, setOpen] = React.useState(defaultOpen);
  const fg = dark ? K.paper : K.ink;
  const borderColor = dark ? K.paper : K.ink;
  return (
    <div style={{
      border: `3px solid ${K.ink}`, background: bg, marginBottom: 14, color: fg,
      transform: open ? 'scale(1.008)' : 'scale(1)',
      boxShadow: open ? `6px 6px 0 ${dark ? K.accent : K.ink}` : 'none',
      transition: 'transform 0.22s cubic-bezier(.2,.8,.2,1), box-shadow 0.22s',
    }}>
      <button data-k-accordion onClick={() => setOpen(o => !o)} data-k-cursor={open ? 'cerrar' : 'abrir'} style={{
        width: '100%', padding: '18px 22px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        gap: 16,
        background: 'transparent', border: 'none', textAlign: 'left', cursor: 'pointer', color: fg,
      }}>
        <div style={{ minWidth: 0, flex: 1 }}>
          {kicker && <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 2, opacity: 0.7, color: fg }}>{kicker}</div>}
          <div style={{ fontFamily: K.display, fontSize: 26, textTransform: 'uppercase', marginTop: 4, lineHeight: 1.05, color: fg }}>{title}</div>
        </div>
        <div style={{
          width: 44, height: 44, border: `3px solid ${borderColor}`, background: open ? fg : 'transparent',
          color: open ? bg : fg, display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: K.display, fontSize: 24, flexShrink: 0, transform: open ? 'rotate(45deg)' : 'none',
          transition: 'transform 0.2s, background 0.2s',
        }}>+</div>
      </button>
      {open && (
        <div style={{ padding: '0 22px 22px', fontFamily: K.sans, fontSize: 14, lineHeight: 1.6, borderTop: `2px dashed ${borderColor}`, paddingTop: 18, color: fg }}>
          {children}
        </div>
      )}
    </div>
  );
}

function HomeB() {
  const [count, counterRef, reachMeta] = useLiveReach();
  const [paletteOpen, setPaletteOpen] = React.useState(false);
  const [hover, setHover] = React.useState(null);
  const logoBandRef = React.useRef(null);
  const [bandRunning, setBandRunning] = React.useState(false);
  const [casosFeatured, setCasosFeatured] = React.useState([]);
  React.useEffect(() => {
    fetch('konecta/casos-data.json', { cache: 'no-cache' })
      .then(r => r.ok ? r.json() : null)
      .then(data => {
        if (!data || !data.casos) return;
        const featured = data.casos
          .filter(c => c.featured_home)
          .sort((a, b) => (a.featured_home_order || 99) - (b.featured_home_order || 99));
        setCasosFeatured(featured);
      })
      .catch(() => {});
  }, []);
  React.useEffect(() => {
    const h = (e) => { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') { e.preventDefault(); setPaletteOpen(o => !o); } };
    window.addEventListener('keydown', h); return () => window.removeEventListener('keydown', h);
  }, []);
  // Logo band — queda estático (Nescafé + Porcelanosa primero) hasta que la sección entre al viewport
  React.useEffect(() => {
    if (!logoBandRef.current) return;
    const el = logoBandRef.current;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) setBandRunning(true); });
    }, { threshold: 0.25 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  return (
    <div style={{ background: K.paper, minHeight: '100vh', fontFamily: K.sans, color: K.ink, paddingBottom: 80,
      backgroundImage: `radial-gradient(${K.dim} 0.8px, transparent 1px)`, backgroundSize: '18px 18px',
    }}>
      <TopBar onCmdK={() => setPaletteOpen(true)} />
      <Marquee bg={K.accent} items={['★ CREAMOS CONTENIDO QUE KONECTA', '★ 695K SEGUIDORES COMBINADOS', '★ @DESCUBRE.CDMX', '★ @MEXICOEXPLORERS', '★ @CIENDETODO', '★ CDMX · EDO MEX · PUE · MOR · HGO · QRO']} />

      {/* HERO */}
      <section id="hub" style={{ padding: '70px 44px 50px', borderBottom: `3px solid ${K.ink}`, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: 50, left: '50%', background: K.yellow, padding: '6px 12px', fontFamily: K.mono, fontSize: 10, letterSpacing: 1.5, transform: 'rotate(-4deg)', border: `2px solid ${K.ink}`, boxShadow: `3px 3px 0 ${K.ink}`, textTransform: 'uppercase', zIndex: 3 }}>estudio ★ cdmx</div>
        <div style={{ position: 'absolute', top: 240, right: 440, fontFamily: K.display, fontSize: 140, color: K.lime, transform: 'rotate(18deg)', zIndex: 0, lineHeight: 1 }}>★</div>

        <div style={{ fontFamily: K.mono, fontSize: 11, textTransform: 'uppercase', letterSpacing: 2, color: K.dim, marginBottom: 18, position: 'relative', zIndex: 2 }}>
          &gt; booting konecta_v2.exe <span style={{ color: K.accent }}>●</span>
        </div>

        {/* H1 — fixed: no overlapping rotations on contiguous inline spans */}
        <h1 className="k-hero-h1" style={{ fontFamily: K.display, fontSize: 'clamp(56px, 9.2vw, 150px)', lineHeight: 0.9, letterSpacing: -3, textTransform: 'uppercase', margin: 0, position: 'relative', zIndex: 2, maxWidth: '70%' }}>
          Un estudio.<br />
          <span style={{ WebkitTextStroke: `2px ${K.ink}`, color: 'transparent' }}>Nueve servicios.</span><br />
          Una forma de <span style={{ background: K.accent, color: '#fff', padding: '0 14px', display: 'inline-block', transform: 'rotate(-2deg)', boxShadow: `6px 6px 0 ${K.ink}` }}>konectar.</span>
        </h1>

        {/* SUBHEAD — pitch que convierte el orgullo de marca en una promesa concreta.
            Aplica: specificity (números reales con nombres), reframing ("recomendación" vs "anuncio"),
            social proof anchor (3 casos en microcopy mono), pratfall sutil ("No hacemos publicidad."). */}
        <div className="k-hero-subhead" style={{
          marginTop: 26, maxWidth: 580, position: 'relative', zIndex: 2,
        }}>
          <div style={{
            fontFamily: K.display, fontSize: 'clamp(22px, 2.6vw, 32px)',
            lineHeight: 1.15, textTransform: 'uppercase', letterSpacing: '-0.5px',
            marginBottom: 16,
          }}>
            No hacemos publicidad. <span style={{
              background: K.lime, color: K.ink,
              padding: '2px 10px', display: 'inline-block',
              transform: 'rotate(-1deg)', boxShadow: `3px 3px 0 ${K.ink}`,
              border: `2px solid ${K.ink}`,
            }}>te metemos en la conversación.</span>
          </div>
          <p style={{
            fontFamily: K.sans, fontSize: 16.5, lineHeight: 1.5, maxWidth: 540,
            margin: 0, color: K.ink,
          }}>
            <b style={{ background: K.yellow, padding: '0 4px' }}>695,000 personas reales</b> nos siguen porque encontramos lo bueno de México antes que nadie. Cuando tu marca aparece en uno de nuestros reels, la gente no la ve como anuncio: la ve como <b>recomendación</b>.
          </p>
          <div style={{
            fontFamily: K.mono, fontSize: 11, color: K.dim, marginTop: 16,
            letterSpacing: 0.8, lineHeight: 1.6,
          }}>
            /casos: <b style={{ color: K.ink }}>Hakuna Caguama 504K</b> · <b style={{ color: K.ink }}>Onn &amp; Off 455K</b> · <b style={{ color: K.ink }}>Japi Ramen +720 seguidores en 24 días</b>
          </div>
        </div>

        {/* Live counter — only publicidad is real now */}
        <div ref={counterRef} className="k-hero-counter" style={{ position: 'absolute', top: 100, right: 44, border: `3px solid ${K.ink}`, padding: 18, background: K.lime, minWidth: 280, transform: 'rotate(3deg)', boxShadow: `8px 8px 0 ${K.ink}`, zIndex: 4 }}>
          <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 1.5, display: 'flex', justifyContent: 'space-between' }}>
            <span>seguidores · konecta</span>
            <span style={{ background: K.ink, color: K.lime, padding: '1px 5px' }}>LIVE</span>
          </div>
          <div style={{ fontFamily: K.mono, fontSize: 42, fontWeight: 700, letterSpacing: -1, marginTop: 4 }}>{count}</div>
          <div style={{ fontFamily: K.mono, fontSize: 10, marginTop: 2, opacity: 0.7 }}>seguidores combinados (IG + TikTok)</div>
          <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
            <div style={{ flex: 1, background: K.accent, color: '#fff', padding: '6px 8px', fontFamily: K.mono, fontSize: 10, border: `2px solid ${K.ink}` }}>IG · {reachMeta?.ig_total ? (reachMeta.ig_total / 1000).toFixed(reachMeta.ig_total >= 100000 ? 1 : 0) + 'K' : '458.8K'}</div>
            <div style={{ flex: 1, background: K.ink, color: K.paper, padding: '6px 8px', fontFamily: K.mono, fontSize: 10 }}>TT · {reachMeta?.tt_total ? (reachMeta.tt_total / 1000).toFixed(reachMeta.tt_total >= 100000 ? 1 : 0) + 'K' : '233.6K'}</div>
          </div>
          <div style={{ fontFamily: K.mono, fontSize: 9, marginTop: 8, opacity: 0.6, lineHeight: 1.5 }}>@descubre.cdmx · @mexicoexplorers · @ciendetodo</div>
        </div>

        <div style={{ display: 'flex', gap: 14, marginTop: 40, position: 'relative', zIndex: 2, alignItems: 'center', flexWrap: 'wrap' }}>
          <a href={waLink('Hola Konecta, vi su página y me late meter mi lugar a uno de sus reels. ¿Cómo armamos?')} target="_blank" rel="noreferrer" data-k-cursor="whatsapp" data-cta="home-hero" style={{ background: '#22c55e', color: '#fff', padding: '20px 32px', fontFamily: K.mono, fontSize: 15, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 1.5, textDecoration: 'none', border: `3px solid ${K.ink}`, transform: 'rotate(-1deg)', boxShadow: `6px 6px 0 ${K.ink}`, display: 'inline-flex', alignItems: 'center', gap: 10 }}>
            <span style={{ width: 22, height: 22, borderRadius: '50%', background: '#fff', color: '#22c55e', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontFamily: K.display, fontSize: 13 }}>W</span>
            escríbenos por whatsapp ↗
          </a>
          <a href="/publicidad#paquetes" className="k-hero-secondary" data-k-cursor="paquetes desde $7,500" style={{ color: K.dim, padding: '14px 4px', fontFamily: K.mono, fontSize: 11, textTransform: 'uppercase', letterSpacing: 1.5, textDecoration: 'none', borderBottom: `2px solid ${K.dim}` }}>ver paquetes desde $7,500 ↗</a>
          <a href="/guia.html" className="k-hero-secondary" data-k-cursor="guía gratis" data-cta="home-hero-guia" style={{ color: K.dim, padding: '14px 4px', fontFamily: K.mono, fontSize: 11, textTransform: 'uppercase', letterSpacing: 1.5, textDecoration: 'none', borderBottom: `2px solid ${K.dim}` }}>↓ guía gratis · 5 cosas antes de invertir ↗</a>
        </div>

        <div className="k-hero-decor" style={{ position: 'absolute', bottom: 24, right: 44, border: `3px double ${K.accent}`, color: K.accent, padding: '8px 14px', fontFamily: K.mono, fontSize: 11, fontWeight: 700, letterSpacing: 2, transform: 'rotate(-10deg)', textTransform: 'uppercase', zIndex: 3 }}>100% real ★ sin filtros</div>
      </section>

      {/* CASOS DESTACADOS — proof social above the fold. Top 3 cases (featured_home en JSON).
          Linkea cada card al reel real (verifiable) y al final a /casos.html. */}
      <section id="casos-home" style={{ padding: '52px 44px 44px', background: K.paper, borderBottom: `3px solid ${K.ink}` }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16, marginBottom: 24 }}>
          <div>
            <div style={{ fontFamily: K.mono, fontSize: 11, textTransform: 'uppercase', letterSpacing: 2, color: K.dim }}>/ casos destacados · números reales</div>
            <h2 style={{ fontFamily: K.display, fontSize: 'clamp(34px, 5.5vw, 56px)', textTransform: 'uppercase', lineHeight: 0.95, letterSpacing: -1.2, marginTop: 4 }}>
              Así se ve <span style={{ background: K.lime, color: K.ink, padding: '0 10px', display: 'inline-block', transform: 'rotate(-1deg)', border: `2.5px solid ${K.ink}` }}>en vivo.</span>
            </h2>
            <div style={{ marginTop: 10, fontSize: 14.5, color: K.dim, maxWidth: 520, lineHeight: 1.5 }}>
              Toca cualquier card y abre Instagram. Cero filtros, cero números inflados.
            </div>
          </div>
          <a href="/casos.html" data-k-cursor="ver los 6 casos" style={{
            background: K.ink, color: K.paper, padding: '14px 18px',
            fontFamily: K.mono, fontSize: 11, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase',
            textDecoration: 'none', border: `3px solid ${K.ink}`, boxShadow: `4px 4px 0 ${K.lime}`,
          }}>ver los 6 casos completos ↗</a>
        </div>

        {/* Layout responsivo: desktop = card vertical · mobile = card horizontal con metricas a la derecha */}
        <style>{`
          .kch-card { background: ${K.paper}; border: 3px solid ${K.ink}; box-shadow: 6px 6px 0 ${K.ink}; text-decoration: none; color: ${K.ink}; display: flex; flex-direction: column; transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s; overflow: hidden; }
          .kch-card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 ${K.ink}; }
          .kch-thumb { position: relative; aspect-ratio: 9/16; max-height: 380px; background: ${K.ink}; overflow: hidden; }
          .kch-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
          .kch-thumb .badge { position: absolute; top: 12px; left: 12px; background: ${K.accent}; color: #fff; padding: 4px 10px; font-family: ${K.mono}; font-size: 9.5px; font-weight: 700; letter-spacing: 1.5px; border: 2px solid ${K.ink}; text-transform: uppercase; z-index: 2; }
          .kch-thumb .grad { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.7) 100%); pointer-events: none; }
          .kch-overlay { position: absolute; bottom: 12px; left: 12px; right: 12px; color: #fff; display: flex; justify-content: space-between; align-items: flex-end; z-index: 2; }
          .kch-overlay .tier { font-family: ${K.mono}; font-size: 10px; opacity: .85; letter-spacing: 1.4px; text-transform: uppercase; }
          .kch-overlay .brand { font-family: ${K.display}; font-size: 22px; line-height: 1; letter-spacing: -.4px; text-transform: uppercase; margin-top: 3px; }
          .kch-overlay .views { font-family: ${K.display}; font-size: 30px; line-height: .9; letter-spacing: -.7px; color: ${K.lime}; font-variant-numeric: tabular-nums; }
          .kch-foot { padding: 12px 14px 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-family: ${K.mono}; font-size: 10.5px; letter-spacing: 1.3px; text-transform: uppercase; border-top: 1.5px dashed ${K.ink}; color: ${K.dim}; }
          .kch-foot .right { color: ${K.ink}; }
          .kch-side { display: none; }

          @media (max-width: 720px) {
            .kch-card { flex-direction: row; }
            .kch-thumb { width: 44%; flex-shrink: 0; max-height: none; }
            .kch-overlay { display: none; } /* en mobile las stats van al panel lateral */
            .kch-side { display: flex; flex: 1; flex-direction: column; padding: 14px 14px 12px; gap: 6px; min-width: 0; }
            .kch-side .tier { font-family: ${K.mono}; font-size: 10px; letter-spacing: 1.3px; color: ${K.dim}; text-transform: uppercase; }
            .kch-side .brand { font-family: ${K.display}; font-size: 20px; line-height: .95; letter-spacing: -.4px; text-transform: uppercase; }
            .kch-side .handle { font-family: ${K.mono}; font-size: 10px; color: ${K.dim}; letter-spacing: 1.2px; }
            .kch-side .views-big { margin-top: auto; padding-top: 10px; border-top: 1.5px dashed ${K.ink}; }
            .kch-side .views-big .num { font-family: ${K.display}; font-size: 30px; line-height: .9; letter-spacing: -.8px; color: ${K.accent}; font-variant-numeric: tabular-nums; }
            .kch-side .views-big .lab { font-family: ${K.mono}; font-size: 9.5px; color: ${K.dim}; letter-spacing: 1.3px; text-transform: uppercase; margin-top: 2px; }
            .kch-side .stats-row { display: flex; gap: 14px; font-family: ${K.mono}; font-size: 11px; color: ${K.ink}; font-weight: 700; letter-spacing: .5px; }
            .kch-side .stats-row b { font-family: ${K.display}; font-size: 14px; font-weight: 400; letter-spacing: -.3px; }
            .kch-foot { display: none; } /* en mobile el "ver reel" va dentro del kch-side */
            .kch-side .cta { font-family: ${K.mono}; font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase; color: ${K.ink}; padding-top: 6px; }
          }
        `}</style>

        <div className="k-casos-row" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 18 }}>
          {casosFeatured.length === 0 ? (
            <div style={{ gridColumn: '1 / -1', padding: '40px 0', textAlign: 'center', fontFamily: K.mono, fontSize: 12, color: K.dim, letterSpacing: 1.5, textTransform: 'uppercase' }}>
              / cargando casos...
            </div>
          ) : casosFeatured.map((c, i) => {
            const fmtKM = (n) => {
              if (n >= 1_000_000) return (n / 1_000_000).toFixed(1).replace(/\.0$/, '') + 'M';
              if (n >= 1_000) return (n / 1_000).toFixed(n >= 100_000 ? 0 : 1).replace(/\.0$/, '') + 'K';
              return String(n);
            };
            const totalViews = (c.ig_views || 0) + (c.tt_views || 0);
            return (
              <a key={c.slug} className="kch-card" href={c.reel_ig_url} target="_blank" rel="noreferrer" data-k-cursor={`${c.brand} ↗`}>
                <div className="kch-thumb">
                  <img src={c.thumb} alt={`${c.brand} reel`} loading="lazy" />
                  <span className="badge">{c.kicker}</span>
                  <div className="grad" />
                  {/* Desktop overlay (hidden en mobile via CSS) */}
                  <div className="kch-overlay">
                    <div>
                      <div className="tier">{c.tier}</div>
                      <div className="brand">{c.brand}</div>
                    </div>
                    <div className="views">{fmtKM(totalViews)}</div>
                  </div>
                </div>
                {/* Mobile-only side panel · solo aparece <720px */}
                <div className="kch-side">
                  <div className="tier">{c.tier}</div>
                  <div className="brand">{c.brand}</div>
                  <div className="handle">{c.handle}</div>
                  <div className="stats-row">
                    <span><b>{fmtKM(c.ig_views)}</b> ig</span>
                    <span><b>{fmtKM(c.ig_likes)}</b> likes</span>
                  </div>
                  <div className="views-big">
                    <div className="num">{fmtKM(totalViews)}</div>
                    <div className="lab">vistas combinadas</div>
                  </div>
                  <div className="cta">ver reel ↗</div>
                </div>
                {/* Desktop foot · hidden en mobile */}
                <div className="kch-foot">
                  <span>{c.handle}</span>
                  <span className="right">ver reel ↗</span>
                </div>
              </a>
            );
          })}
        </div>

        {/* Sales-tool bridge: link discreto a /comparar para prospectos que dudan del precio */}
        <div style={{ marginTop: 24, fontFamily: K.mono, fontSize: 12, letterSpacing: 1.3, textTransform: 'uppercase', color: K.dim, display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
          <span>/ ¿dudas del precio?</span>
          <a href="/comparar.html" data-k-cursor="vs. pauta" style={{ color: K.ink, textDecoration: 'none', borderBottom: `2px solid ${K.ink}`, fontWeight: 700 }}>compara con la pauta tradicional ↗</a>
        </div>
      </section>

      {/* BANDA DE LOGOS — marcas reales que han colaborado. Nescafé + Porcelanosa destacadas como marcas ancla.
          Animación pausada al cargar (muestra Nescafé + Porcelanosa primero); arranca al entrar en viewport. */}
      <section ref={logoBandRef} id="clientes" aria-label="marcas con las que hemos trabajado" style={{ padding: '32px 0 28px', background: K.ink, color: K.paper, borderBottom: `3px solid ${K.ink}`, position: 'relative', overflowX: 'hidden', overflowY: 'visible' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 20, padding: '0 44px 18px', fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 2, opacity: 0.8 }}>
          <span>▸ marcas que han confiado en nosotros</span>
          <span style={{ flex: 1, borderTop: `1px dashed ${K.paper}`, opacity: 0.3 }} />
          <span style={{ background: K.lime, color: K.ink, padding: '2px 8px', letterSpacing: 1.5, fontWeight: 700 }}>90+ marcas · desde 2022</span>
        </div>
        <div style={{ overflowX: 'hidden', overflowY: 'visible', position: 'relative', maskImage: 'linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)', WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)' }}>
          <div style={{ display: 'inline-flex', gap: 0, animation: 'kb-logos 42s linear infinite', animationPlayState: bandRunning ? 'running' : 'paused', whiteSpace: 'nowrap' }}>
            {(() => {
              // 9 marcas reales con las que ha colaborado el estudio (compartidas por el cliente).
              // anchor=true marca las dos "pesadas" (Nescafé MX, Porcelanosa) con badge destacado.
              // Si el usuario sube PNGs a konecta/assets/logos-ig/<handle>.png, cambiar fallback por <img>.
              const brands = [
                { handle: 'nescafemex',        name: 'Nescafé México', sector: 'fmcg · global',       anchor: true,  color: K.accent },
                { handle: 'porcelanosa',       name: 'Porcelanosa',    sector: 'interiorismo',        anchor: true,  color: K.lime },
                { handle: 'japiramen',         name: 'Japi Ramen',     sector: 'comida · japonesa',   anchor: false, color: K.yellow },
                { handle: 'lamagiadelbosque_', name: 'La Magia del Bosque', sector: 'hospedaje · cabañas', anchor: false, color: K.lime },
                { handle: 'onnandoffofficial', name: 'On & Off',       sector: 'outlet · premium',    anchor: false, color: K.accent },
                { handle: 'hakuna_cahuama',    name: 'Hakuna Cahuama', sector: 'bar temático',        anchor: false, color: K.yellow },
                { handle: 'frituur.mx',        name: 'Frituur',        sector: 'comida · belga',      anchor: false, color: K.lime },
                { handle: 'budapestcafemx',    name: 'Budapest Café',  sector: 'café · húngaro',      anchor: false, color: K.accent },
                { handle: 'richeesemx',        name: 'Richeese',       sector: 'fondue · cheese',     anchor: false, color: K.yellow },
              ];
              const row = [...brands, ...brands];
              return row.map((b, i) => {
                const initials = b.name.replace(/[^A-Za-zÁÉÍÓÚÑáéíóúñ ]/g, '').split(' ').filter(Boolean).slice(0, 2).map(w => w[0]).join('').toUpperCase();
                return (
                  <a
                    key={i}
                    href={`https://www.instagram.com/${b.handle}/`}
                    target="_blank" rel="noreferrer"
                    data-k-cursor={`@${b.handle}`}
                    style={{
                      display: 'inline-flex', alignItems: 'center', gap: 16,
                      padding: '10px 28px',
                      borderRight: `1px solid rgba(242,238,226,0.18)`,
                      whiteSpace: 'nowrap', textDecoration: 'none', color: K.paper,
                      position: 'relative',
                    }}
                  >
                    {b.anchor && (
                      <span style={{
                        position: 'absolute', top: -4, right: 8,
                        background: K.lime, color: K.ink,
                        padding: '2px 8px',
                        fontFamily: K.mono, fontSize: 9, fontWeight: 700, letterSpacing: 1.4,
                        border: `2px solid ${K.ink}`,
                        boxShadow: `2px 2px 0 ${K.accent}`,
                        textTransform: 'uppercase',
                        zIndex: 3,
                        whiteSpace: 'nowrap',
                      }}>★ destacada</span>
                    )}
                    {/* Avatar: logo en PAPER silhouette sobre fondo INK (matches banda) */}
                    <span style={{
                      width: 72, height: 72,
                      border: `2.5px solid ${b.anchor ? K.lime : K.paper}`,
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      flexShrink: 0,
                      background: K.ink,
                      borderRadius: '50%',
                      boxShadow: b.anchor ? `4px 4px 0 ${K.accent}` : 'none',
                      overflow: 'hidden',
                      position: 'relative',
                    }}>
                      <img
                        src={`konecta/assets/logos/${b.handle}.png?v=2`}
                        alt={b.name}
                        loading="lazy"
                        decoding="async"
                        width={70}
                        height={70}
                        style={{
                          width: '78%', height: '78%',
                          objectFit: 'contain',
                          display: 'block',
                          // Los PNGs ya vienen en PAPER (beige claro) con fondo transparente — sin filter
                        }}
                        onError={(e) => {
                          e.currentTarget.style.display = 'none';
                          const fb = e.currentTarget.nextElementSibling;
                          if (fb) fb.style.display = 'inline-flex';
                        }}
                      />
                      <span style={{
                        display: 'none', position: 'absolute', inset: 0,
                        alignItems: 'center', justifyContent: 'center',
                        fontFamily: K.display, fontSize: initials.length === 1 ? 26 : 18,
                        color: K.paper,
                        letterSpacing: -0.5,
                      }}>{initials}</span>
                    </span>
                    <span style={{ display: 'inline-flex', flexDirection: 'column', lineHeight: 1 }}>
                      <span style={{
                        fontFamily: K.display, fontSize: b.anchor ? 30 : 26,
                        textTransform: 'uppercase', letterSpacing: -0.4,
                      }}>{b.name}</span>
                      <span style={{
                        fontFamily: K.mono, fontSize: 10, opacity: 0.6,
                        textTransform: 'uppercase', letterSpacing: 1.5, marginTop: 6,
                      }}>@{b.handle} · {b.sector}</span>
                    </span>
                  </a>
                );
              });
            })()}
          </div>
        </div>
        <style>{`@keyframes kb-logos { from { transform: translateX(0); } to { transform: translateX(-50%); } }`}</style>
      </section>

      {/* NOSOTROS — original text from repo, as proper section */}
      {/* EQUIPO — el equipo detrás de Konecta. Anti-agency, pero NO solopreneur. */}
      <section id="equipo" style={{ padding: '60px 44px 56px', background: K.paper, borderBottom: `3px solid ${K.ink}`, position: 'relative' }}>
        <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 2, color: K.dim, marginBottom: 6 }}>/ el equipo</div>
        <h2 style={{ fontFamily: K.display, fontSize: 'clamp(34px, 5.5vw, 60px)', textTransform: 'uppercase', lineHeight: 0.95, letterSpacing: -1.2, margin: '0 0 12px', maxWidth: 900 }}>
          No es agencia. <span style={{ background: K.lime, color: K.ink, padding: '0 10px', display: 'inline-block', transform: 'rotate(-1deg)', border: `2.5px solid ${K.ink}` }}>Es un estudio</span> chico y honesto.
        </h2>
        <div style={{ fontFamily: K.sans, fontSize: 14.5, color: K.dim, maxWidth: 620, marginBottom: 36 }}>
          Cuando escribas por WhatsApp, te contesta una persona real. Cuando lleguemos a grabar, la cámara y la producción la lleva el mismo equipo siempre. Sin freelancers anónimos.
        </div>

        <style>{`
          .k-team-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 18px; align-items: stretch; max-width: 1180px; }
          @media (max-width: 1020px) { .k-team-grid { grid-template-columns: 1fr 1fr 1fr; } .k-team-card.lead { grid-column: 1 / -1; } }
          @media (max-width: 720px) { .k-team-grid { grid-template-columns: 1fr 1fr; } .k-team-card.lead { grid-column: 1 / -1; } }
          @media (max-width: 480px) { .k-team-grid { grid-template-columns: 1fr; } .k-team-card.lead { grid-column: auto; } }
          .k-team-card { background: #fff; border: 3px solid ${K.ink}; padding: 0; display: flex; flex-direction: column; position: relative; }
          .k-team-card.lead { background: ${K.paper}; box-shadow: 8px 8px 0 ${K.accent}; flex-direction: row; align-items: stretch; }
          .k-team-card.support { box-shadow: 5px 5px 0 ${K.ink}; }
          .k-team-photo { background: ${K.ink}; overflow: hidden; flex-shrink: 0; }
          .k-team-card.support .k-team-photo { aspect-ratio: 1; width: 100%; }
          .k-team-card.lead .k-team-photo { width: 42%; min-width: 180px; aspect-ratio: auto; }
          @media (max-width: 720px) { .k-team-card.lead { flex-direction: column; } .k-team-card.lead .k-team-photo { width: 100%; aspect-ratio: 1; } }
          .k-team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: contrast(1.04); }
          .k-team-info { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
          .k-team-card.lead .k-team-info { padding: 22px 22px 22px; gap: 8px; justify-content: center; }
          .k-team-info .role { font-family: ${K.mono}; font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: ${K.dim}; }
          .k-team-info .name { font-family: ${K.display}; font-size: 22px; line-height: 1; letter-spacing: -.3px; text-transform: uppercase; }
          .k-team-card.lead .k-team-info .name { font-size: clamp(26px, 3.4vw, 34px); margin-top: 2px; }
          .k-team-info .bio { font-family: ${K.sans}; font-size: 13px; line-height: 1.5; color: ${K.ink}; margin-top: 2px; }
          .k-team-card.lead .k-team-info .bio { font-size: 14.5px; }
          .k-team-info .ig { font-family: ${K.mono}; font-size: 10px; color: ${K.dim}; letter-spacing: 1.2px; margin-top: 4px; }
          .k-team-card .badge { position: absolute; top: -10px; right: 14px; background: ${K.yellow}; color: ${K.ink}; padding: 3px 9px; font-family: ${K.mono}; font-size: 9.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; border: 2.5px solid ${K.ink}; transform: rotate(-3deg); z-index: 4; }
        `}</style>

        <div className="k-team-grid">
          {/* Angel · founder · lead card horizontal con foto a la izquierda */}
          <div className="k-team-card lead">
            <span className="badge">founder ★</span>
            <div className="k-team-photo">
              <img src="konecta/assets/team/angel.jpg?v=4" alt="Ángel Galindo · fundador Konecta" loading="lazy" />
            </div>
            <div className="k-team-info">
              <div className="role">fundador · estratega · cdmx</div>
              <div className="name">Ángel Galindo</div>
              <div className="bio">
                Llevo Konecta desde la primera idea. Te contesto los WhatsApp y voy a grabar contigo. 10 años en audiovisual desde los 14.
              </div>
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 8 }}>
                <a href="https://www.instagram.com/ciendetodo" target="_blank" rel="noreferrer" data-cta="equipo-ig-ciendetodo" style={{
                  fontFamily: K.mono, fontSize: 10.5, fontWeight: 700, letterSpacing: 1.3, textTransform: 'uppercase',
                  color: K.ink, textDecoration: 'none', padding: '6px 10px',
                  background: K.lime, border: `2.5px solid ${K.ink}`, boxShadow: `3px 3px 0 ${K.ink}`,
                }}>@ciendetodo ↗</a>
                <a href={waLink('Hola Ángel, vi su página y me late lo que hacen. ¿Cómo arrancamos?')} target="_blank" rel="noreferrer" data-cta="equipo-wa-angel" style={{
                  fontFamily: K.mono, fontSize: 10.5, fontWeight: 700, letterSpacing: 1.3, textTransform: 'uppercase',
                  color: '#fff', textDecoration: 'none', padding: '6px 10px',
                  background: '#22c55e', border: `2.5px solid ${K.ink}`, boxShadow: `3px 3px 0 ${K.ink}`,
                }}>whatsapp ↗</a>
              </div>
            </div>
          </div>

          {/* Elias · cinematografía */}
          <div className="k-team-card support">
            <div className="k-team-photo"><img src="konecta/assets/team/elias.jpg" alt="Elías · cinematografía Konecta" loading="lazy" /></div>
            <div className="k-team-info">
              <div className="role">cinematografía · cámara</div>
              <div className="name">Elías</div>
              <div className="bio">La cámara y la mirada cinematográfica. Lo que hace que un reel se sienta hecho a mano.</div>
            </div>
          </div>

          {/* Montse · producción */}
          <div className="k-team-card support">
            <div className="k-team-photo"><img src="konecta/assets/team/montse.jpg" alt="Montse · producción Konecta" loading="lazy" /></div>
            <div className="k-team-info">
              <div className="role">producción · shoots</div>
              <div className="name">Montse</div>
              <div className="bio">Coordina las grabaciones, mantiene el set en pie y se asegura de que se grabó todo lo necesario.</div>
            </div>
          </div>

          {/* Paula · edición */}
          <div className="k-team-card support">
            <div className="k-team-photo"><img src="konecta/assets/team/paula.jpg" alt="Paula · edición Konecta" loading="lazy" /></div>
            <div className="k-team-info">
              <div className="role">edición · postproducción</div>
              <div className="name">Paula</div>
              <div className="bio">Hace que los videos se sientan rítmicos. Cada corte, transición y subtítulo pasan por sus manos.</div>
            </div>
          </div>
        </div>
      </section>

      <section id="nosotros" style={{ padding: '70px 44px 50px', borderBottom: `3px solid ${K.ink}`, background: K.paper, position: 'relative', overflow: 'hidden' }}>
        {/* P2.4 — solid bg overlay to suppress global dot pattern (visual rest in long section) */}
        <div style={{ position: 'absolute', inset: 0, background: K.paper, zIndex: 0 }} />
        {/* decorative stickers */}
        <div style={{ position: 'absolute', top: 30, right: 60, fontFamily: K.mono, fontSize: 10, background: K.yellow, padding: '4px 10px', border: `2px solid ${K.ink}`, transform: 'rotate(8deg)', letterSpacing: 1.5, textTransform: 'uppercase', boxShadow: `3px 3px 0 ${K.ink}`, zIndex: 3 }}>neta ★</div>
        {/* Decorative corner — collage animado de stickers (reemplaza :) vacío) */}
        <div style={{ position: 'absolute', bottom: 30, right: 40, width: 260, height: 260, zIndex: 0, pointerEvents: 'none' }}>
          <style>{`
            @keyframes kb-float-1 { 0%, 100% { transform: translate(0, 0) rotate(-8deg); } 50% { transform: translate(-6px, -10px) rotate(-6deg); } }
            @keyframes kb-float-2 { 0%, 100% { transform: translate(0, 0) rotate(12deg); } 50% { transform: translate(8px, -6px) rotate(14deg); } }
            @keyframes kb-float-3 { 0%, 100% { transform: translate(0, 0) rotate(-4deg); } 50% { transform: translate(-4px, 8px) rotate(-2deg); } }
            @keyframes kb-float-4 { 0%, 100% { transform: translate(0, 0) rotate(20deg); } 50% { transform: translate(6px, -4px) rotate(22deg); } }
            @keyframes kb-pulse { 0%, 100% { opacity: 0.9; } 50% { opacity: 1; } }
          `}</style>
          {/* chat bubble */}
          <div style={{
            position: 'absolute', top: 10, left: 20,
            background: K.lime, color: K.ink,
            border: `3px solid ${K.ink}`, boxShadow: `4px 4px 0 ${K.ink}`,
            padding: '10px 14px 12px', borderRadius: '18px 18px 18px 4px',
            fontFamily: K.display, fontSize: 18, textTransform: 'uppercase', lineHeight: 1,
            animation: 'kb-float-1 5.2s ease-in-out infinite',
          }}>¡neta!</div>
          {/* star sticker */}
          <div style={{
            position: 'absolute', top: 40, right: 10,
            background: K.accent, color: '#fff',
            border: `3px solid ${K.ink}`, boxShadow: `4px 4px 0 ${K.ink}`,
            width: 70, height: 70, display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: K.display, fontSize: 42, lineHeight: 1,
            animation: 'kb-float-2 4.6s ease-in-out infinite',
          }}>★</div>
          {/* heart polaroid */}
          <div style={{
            position: 'absolute', bottom: 80, left: 0,
            background: K.paper, color: K.ink,
            border: `3px solid ${K.ink}`, boxShadow: `5px 5px 0 ${K.accent}`,
            padding: '8px 8px 14px', width: 94,
            animation: 'kb-float-3 6.4s ease-in-out infinite',
          }}>
            <div style={{ width: '100%', aspectRatio: '1', background: K.yellow, border: `2px solid ${K.ink}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: K.display, fontSize: 40, color: K.accent }}>♡</div>
            <div style={{ fontFamily: K.mono, fontSize: 8, marginTop: 4, letterSpacing: 1, textAlign: 'center', textTransform: 'uppercase' }}>cdmx·mx</div>
          </div>
          {/* tag */}
          <div style={{
            position: 'absolute', bottom: 10, right: 30,
            background: K.ink, color: K.lime,
            border: `3px solid ${K.ink}`, boxShadow: `4px 4px 0 ${K.yellow}`,
            padding: '6px 10px',
            fontFamily: K.mono, fontSize: 10, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase',
            animation: 'kb-float-4 5.8s ease-in-out infinite',
          }}>hecho con amor</div>
          {/* glowing dot */}
          <div style={{
            position: 'absolute', top: 130, left: 90,
            width: 14, height: 14, borderRadius: '50%', background: K.yellow,
            border: `2px solid ${K.ink}`,
            animation: 'kb-pulse 1.8s ease-in-out infinite',
          }} />
        </div>

        <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 2, color: K.dim, position: 'relative', zIndex: 2 }}>/ quiénes_somos</div>
        <div style={{ fontFamily: K.display, fontSize: 'clamp(44px,7vw,80px)', textTransform: 'uppercase', lineHeight: 0.95, marginBottom: 10, position: 'relative', zIndex: 2 }}>
          este <span style={{ fontStyle: 'italic', background: K.accent, color: '#fff', padding: '0 14px', display: 'inline-block', transform: 'rotate(-1deg)', boxShadow: `5px 5px 0 ${K.ink}` }}>somos</span> nosotros
        </div>
        <div style={{ fontFamily: K.mono, fontSize: 12, color: K.dim, marginBottom: 36, maxWidth: 620, position: 'relative', zIndex: 2 }}>
          ↓ sin rollos ni poses. aquí está lo que hacemos y por qué.
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 30, position: 'relative', zIndex: 2, maxWidth: 1100 }}>
          {/* Left column — main copy */}
          <div style={{ fontFamily: K.sans, fontSize: 15, lineHeight: 1.65, color: K.ink }}>
            <p style={{ margin: '0 0 16px' }}>
              <b>Este somos nosotros.</b> Aunque nos veas con diferentes nombres: 100 de todo, Descubre CDMX, México Explorers… al final es lo mismo: contar lo increíble que tiene México, pero sin rollos ni poses.
            </p>
            <p style={{ margin: '0 0 16px' }}>
              No podemos venir a decir que nuestra misión es "cambiar la industria digital" ni sacar diplomas que no tenemos. Lo que sí tenemos son ganas de mostrar todo lo que pasa entre un buen lugar, una calle llena de vida o un viaje que se convierte en recuerdo.
            </p>

            <div style={{ fontFamily: K.display, fontSize: 22, textTransform: 'uppercase', marginTop: 28, marginBottom: 10, borderTop: `2px solid ${K.ink}`, paddingTop: 18, letterSpacing: -0.5 }}>¿a qué + por qué?</div>
            <p style={{ margin: '0 0 12px' }}>
              En corto: hacemos que la gente quiera conocer, probar y vivir lo que tu negocio ofrece.
            </p>
            <p style={{ margin: '0 0 14px' }}>
              Porque nos gusta. Porque cada vez que descubrimos un lugar nuevo, queremos que más gente lo viva. Detrás de cada negocio hay alguien dejándolo todo para que funcione, y nos emociona pensar que con un buen video podemos darle ese empujón que necesita.
            </p>

            {/* Pull-quote gigante — el manifiesto de los influencers */}
            <figure style={{
              margin: '32px -8px 8px', padding: '28px 24px 26px',
              background: K.ink, color: K.paper,
              border: `3px solid ${K.ink}`, boxShadow: `8px 8px 0 ${K.accent}`,
              transform: 'rotate(-1.2deg)', position: 'relative',
            }}>
              <span style={{ position: 'absolute', top: -18, left: 18, fontFamily: K.mono, fontSize: 10, background: K.yellow, color: K.ink, padding: '4px 10px', letterSpacing: 2, border: `2px solid ${K.ink}`, textTransform: 'uppercase', boxShadow: `3px 3px 0 ${K.ink}` }}>neta ★</span>
              <span style={{ position: 'absolute', top: -4, left: 14, fontFamily: K.display, fontSize: 120, color: K.accent, lineHeight: 0.6, opacity: 0.9, pointerEvents: 'none' }}>"</span>
              <blockquote style={{ margin: 0, paddingLeft: 52, fontFamily: K.display, fontSize: 'clamp(24px, 3vw, 34px)', lineHeight: 1.05, textTransform: 'uppercase', letterSpacing: -0.5 }}>
                No nos gusta que nos digan <span style={{ fontStyle: 'italic', background: K.accent, color: '#fff', padding: '0 8px', display: 'inline-block', transform: 'rotate(1deg)' }}>"influencers"</span>.
              </blockquote>
              <figcaption style={{ margin: '14px 0 0 52px', fontFamily: K.sans, fontSize: 14, lineHeight: 1.55, opacity: 0.88 }}>
                Preferimos pensar que lo que hacemos es <b>recomendar</b>, como cuando le dices a un amigo: <i>"tienes que ir, neta te va a encantar"</i>. Solo que en vez de decírselo a 3 personas, lo compartimos con <b>695K</b>.
              </figcaption>
            </figure>

            <div style={{ marginTop: 36, padding: 20, border: `3px solid ${K.ink}`, background: K.lime, boxShadow: `6px 6px 0 ${K.ink}`, transform: 'rotate(-0.5deg)' }}>
              <div style={{ fontFamily: K.display, fontSize: 22, textTransform: 'uppercase', marginBottom: 6 }}>entonces, ¿qué sigue?</div>
              <p style={{ margin: '0 0 8px', fontFamily: K.sans, fontSize: 14, lineHeight: 1.6 }}>
                Si tienes un lugar que vale la pena descubrir, comer o explorar, probablemente deberíamos hablar.
              </p>
              <p style={{ margin: 0, fontFamily: K.mono, fontSize: 11, color: K.dim, fontStyle: 'italic' }}>
                leer esto es gratis. el resto lo platicamos por whatsapp.
              </p>
            </div>
          </div>

          {/* Right column — the 3 sub-brands as stickers */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16, position: 'sticky', top: 100, alignSelf: 'start' }}>
            <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 2, color: K.dim, marginBottom: 4 }}>/ 3 cuentas · 1 estudio</div>

            <a href="https://www.instagram.com/ciendetodo" target="_blank" rel="noreferrer" data-k-cursor="@ciendetodo" style={{
              display: 'block', padding: 18, border: `3px solid ${K.ink}`, background: K.accent, color: '#fff',
              boxShadow: `6px 6px 0 ${K.ink}`, transform: 'rotate(-2deg)', textDecoration: 'none',
            }}>
              <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 2, opacity: 0.8 }}>sub-marca 01</div>
              <div style={{ fontFamily: K.display, fontSize: 30, textTransform: 'uppercase', lineHeight: 1, marginTop: 4 }}>100 de todo</div>
              <p style={{ margin: '10px 0 0', fontFamily: K.sans, fontSize: 13, lineHeight: 1.5 }}>
                lo variado y divertido, lo que se antoja y lo que sorprende.
              </p>
              <div style={{ fontFamily: K.mono, fontSize: 11, marginTop: 10, opacity: 0.9 }}>@ciendetodo ↗</div>
            </a>

            <a href="https://www.instagram.com/descubre.cdmx" target="_blank" rel="noreferrer" data-k-cursor="@descubre.cdmx" style={{
              display: 'block', padding: 18, border: `3px solid ${K.ink}`, background: K.ink, color: K.paper,
              boxShadow: `6px 6px 0 ${K.accent}`, transform: 'rotate(1deg)', textDecoration: 'none',
            }}>
              <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 2, opacity: 0.7 }}>sub-marca 02</div>
              <div style={{ fontFamily: K.display, fontSize: 30, textTransform: 'uppercase', lineHeight: 1, marginTop: 4 }}>descubre cdmx</div>
              <p style={{ margin: '10px 0 0', fontFamily: K.sans, fontSize: 13, lineHeight: 1.5, opacity: 0.9 }}>
                rincones, comida, experiencias, todo lo que hace única a la capital.
              </p>
              <div style={{ fontFamily: K.mono, fontSize: 11, marginTop: 10, color: K.lime }}>@descubre.cdmx ↗</div>
            </a>

            <a href="https://www.instagram.com/mexicoexplorers" target="_blank" rel="noreferrer" data-k-cursor="@mexicoexplorers" style={{
              display: 'block', padding: 18, border: `3px solid ${K.ink}`, background: K.yellow, color: K.ink,
              boxShadow: `6px 6px 0 ${K.ink}`, transform: 'rotate(-1deg)', textDecoration: 'none',
            }}>
              <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 2, opacity: 0.7 }}>sub-marca 03</div>
              <div style={{ fontFamily: K.display, fontSize: 30, textTransform: 'uppercase', lineHeight: 1, marginTop: 4 }}>méxico explorers</div>
              <p style={{ margin: '10px 0 0', fontFamily: K.sans, fontSize: 13, lineHeight: 1.5 }}>
                playas, montañas, pueblos mágicos y cualquier lugar que valga la pena explorar.
              </p>
              <div style={{ fontFamily: K.mono, fontSize: 11, marginTop: 10 }}>@mexicoexplorers ↗</div>
            </a>
          </div>
        </div>
      </section>

      {/* SERVICES GRID — Publicidad hero + 5 secundarios tiles compact */}
      <section id="services" style={{ padding: '60px 44px 30px', position: 'relative', borderTop: `3px solid ${K.ink}` }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 24, flexWrap: 'wrap', gap: 12 }}>
          <div style={{ position: 'relative' }}>
            <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 2, color: K.dim }}>/ servicios</div>
            <div style={{ fontFamily: K.display, fontSize: 52, textTransform: 'uppercase', position: 'relative', lineHeight: 0.95, marginTop: 4 }}>
              qué <span style={{ fontStyle: 'italic', color: K.accent }}>hacemos</span> bien
            </div>
            <div style={{ fontFamily: K.mono, fontSize: 12, color: K.dim, marginTop: 6, maxWidth: 520 }}>
              ↓ hoy nos especializamos en una sola cosa: <b style={{ color: K.ink }}>publicidad orgánica que la gente sí ve</b>. Enterprise activa para marcas grandes B2B. Los otros 7 servicios están en construcción. Los soltamos cuando estén tan afinados como este.
            </div>
          </div>
          <div style={{ fontFamily: K.mono, fontSize: 12, color: K.dim, alignSelf: 'flex-end' }}>2 activos · 7 pronto</div>
        </div>

        {(() => {
          const pub = SERVICES.find(s => s.id === 'pub');
          const others = SERVICES.filter(s => s.id !== 'pub');

          return (
            <>
              {/* HERO — Publicidad (the only active service, takes full width) */}
              <a
                href="/publicidad#paquetes"
                onMouseEnter={() => setHover(pub.id)}
                onMouseLeave={() => setHover(null)}
                data-k-cursor={`k/${pub.num}`}
                style={{
                  display: 'grid',
                  gridTemplateColumns: '1.2fr 1fr',
                  gap: 0,
                  border: `3px solid ${K.ink}`,
                  boxShadow: `8px 8px 0 ${K.ink}`,
                  background: pub.hue,
                  color: pub.fg,
                  textDecoration: 'none',
                  position: 'relative',
                  overflow: 'hidden',
                  marginBottom: 18,
                  transition: 'transform 0.22s cubic-bezier(.2,.8,.2,1), box-shadow 0.22s',
                  transform: hover === pub.id ? 'translate(-2px, -2px)' : 'none',
                }}
              >
                {/* giant 01 watermark */}
                <div style={{ position: 'absolute', top: -40, right: -20, fontFamily: K.display, fontSize: 320, opacity: 0.1, lineHeight: 0.8, pointerEvents: 'none', color: '#fff' }}>{pub.num}</div>

                {/* LEFT — headline + desc */}
                <div style={{ padding: '32px 34px 30px', position: 'relative', zIndex: 2 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
                    <div style={{ fontFamily: K.mono, fontSize: 13, fontWeight: 700 }}>K/{pub.num}</div>
                    <div style={{
                      fontFamily: K.mono, fontSize: 10, padding: '3px 8px',
                      background: '#22c55e', color: K.ink,
                      border: `2px solid ${K.ink}`, fontWeight: 700, letterSpacing: 1.2,
                    }}>● {pub.tag}</div>
                    <div style={{
                      fontFamily: K.mono, fontSize: 10, padding: '3px 8px',
                      background: K.lime, color: K.ink,
                      border: `2px solid ${K.ink}`, fontWeight: 700, letterSpacing: 1.2,
                      transform: 'rotate(-3deg)',
                      boxShadow: `2px 2px 0 ${K.ink}`,
                    }}>★ servicio estrella</div>
                  </div>
                  <div className="k-pub-card-title" style={{
                    fontFamily: K.display, fontSize: 'clamp(56px, 8vw, 100px)',
                    lineHeight: 0.88, textTransform: 'uppercase', letterSpacing: '-2px',
                    marginTop: 6,
                  }}>{pub.name}</div>
                  <div style={{ fontFamily: K.display, fontSize: 22, marginTop: 12, lineHeight: 1.1, maxWidth: 420, opacity: 0.95 }}>
                    {pub.kicker}
                  </div>
                  <p style={{ margin: '16px 0 22px', fontFamily: K.sans, fontSize: 15, lineHeight: 1.5, maxWidth: 460 }}>
                    {pub.desc}
                  </p>
                  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontFamily: K.mono, fontSize: 12, textTransform: 'uppercase', letterSpacing: 1.5, borderBottom: `2px solid currentColor`, paddingBottom: 3 }}>
                    ver paquetes ↗
                  </div>
                </div>

                {/* RIGHT — price teaser + quick facts */}
                <div style={{
                  padding: '32px 34px',
                  background: 'rgba(10,10,10,0.18)',
                  position: 'relative', zIndex: 2,
                  borderLeft: `3px solid rgba(255,255,255,0.3)`,
                  display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 14,
                }}>
                  <div>
                    <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 2, opacity: 0.75 }}>desde</div>
                    <div style={{ fontFamily: K.display, fontSize: 78, lineHeight: 0.85, letterSpacing: '-3px', marginTop: 4 }}>$7,500</div>
                    <div style={{ fontFamily: K.mono, fontSize: 11, opacity: 0.85, marginTop: 4 }}>3 paquetes · mini · básico · premium</div>
                  </div>
                  <div style={{ height: 2, background: 'rgba(255,255,255,0.3)', margin: '2px 0' }} />
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, fontFamily: K.mono, fontSize: 11 }}>
                    <div>
                      <div style={{ opacity: 0.7, fontSize: 9, textTransform: 'uppercase', letterSpacing: 1.2, marginBottom: 3 }}>entrega</div>
                      <div style={{ fontWeight: 700 }}>6–8 días</div>
                    </div>
                    <div>
                      <div style={{ opacity: 0.7, fontSize: 9, textTransform: 'uppercase', letterSpacing: 1.2, marginBottom: 3 }}>alcance mín.</div>
                      <div style={{ fontWeight: 700 }}>40K garantizado</div>
                    </div>
                    <div>
                      <div style={{ opacity: 0.7, fontSize: 9, textTransform: 'uppercase', letterSpacing: 1.2, marginBottom: 3 }}>promedio real</div>
                      <div style={{ fontWeight: 700 }}>100K+ por red</div>
                    </div>
                    <div>
                      <div style={{ opacity: 0.7, fontSize: 9, textTransform: 'uppercase', letterSpacing: 1.2, marginBottom: 3 }}>redes</div>
                      <div style={{ fontWeight: 700 }}>IG + TikTok</div>
                    </div>
                  </div>
                </div>
              </a>

              {/* SECONDARY — other 5 services as compact tiles, visually subordinated */}
              <div style={{
                display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
                marginTop: 28, marginBottom: 14, gap: 12,
              }}>
                <div style={{ fontFamily: K.mono, fontSize: 11, textTransform: 'uppercase', letterSpacing: 2, color: K.dim }}>
                  / próximamente · 5 servicios más
                </div>
                <div style={{ fontFamily: K.mono, fontSize: 11, color: K.dim, fontStyle: 'italic' }}>
                  click → entra a la lista de espera
                </div>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 10 }}>
                {others.map((s) => {
                  const hoverOn = hover === s.id;
                  // Map SERVICES.id → placeholder page slug
                  const SLUGS = { ases: 'asesorias', cur: 'cursos', acel: 'aceleradora', prod: 'produccion', inf: 'influencers' };
                  const slug = SLUGS[s.id];
                  return (
                    <a
                      key={s.id}
                      href={slug ? `/${slug}` : '#'}
                      onMouseEnter={() => setHover(s.id)}
                      onMouseLeave={() => setHover(null)}
                      data-k-cursor="lista de espera ↗"
                      style={{
                        position: 'relative',
                        padding: '16px 14px 14px',
                        border: `2.5px solid ${K.ink}`,
                        background: hoverOn ? s.hue : K.paper,
                        color: hoverOn ? s.fg : K.ink,
                        textDecoration: 'none',
                        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                        minHeight: 150,
                        transition: 'background 0.22s, color 0.22s, transform 0.18s',
                        transform: hoverOn ? 'translate(-2px, -2px)' : 'none',
                        boxShadow: hoverOn ? `4px 4px 0 ${K.ink}` : 'none',
                        overflow: 'hidden',
                      }}
                    >
                      {/* diagonal stripes — always on for "soon" status */}
                      {!hoverOn && (
                        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', backgroundImage: `repeating-linear-gradient(135deg, transparent 0 14px, rgba(10,10,10,0.045) 14px 16px)`, zIndex: 0 }} />
                      )}

                      <div style={{ position: 'relative', zIndex: 1 }}>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontFamily: K.mono, fontSize: 10, fontWeight: 700 }}>
                          <span>K/{s.num}</span>
                          <span style={{
                            fontSize: 8, padding: '2px 6px',
                            background: hoverOn ? 'rgba(10,10,10,0.25)' : K.ink,
                            color: hoverOn ? s.fg : K.paper,
                            letterSpacing: 1,
                            border: hoverOn ? `1.5px solid ${s.fg}` : 'none',
                          }}>◔ {s.tag}</span>
                        </div>
                        <div style={{
                          fontFamily: K.display, fontSize: 22,
                          textTransform: 'uppercase', lineHeight: 0.95, marginTop: 14,
                          letterSpacing: '-0.5px',
                        }}>{s.name}</div>
                        <div style={{
                          fontFamily: K.mono, fontSize: 10, marginTop: 6, opacity: 0.75, lineHeight: 1.35,
                        }}>{s.kicker}</div>
                      </div>
                      <div style={{
                        position: 'relative', zIndex: 1,
                        marginTop: 10, fontFamily: K.mono, fontSize: 9,
                        textTransform: 'uppercase', letterSpacing: 1, opacity: 0.7,
                        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                      }}>
                        <span>ver más ↗</span>
                        <span style={{ fontSize: 14 }}>◔</span>
                      </div>
                    </a>
                  );
                })}
              </div>
            </>
          );
        })()}
      </section>

      {/* PAQUETES vive ahora en publicidad.html — quitado del home por ser reiterativo con el hero de "Publicidad" que ya muestra el precio desde + quick facts */}

      {/* PROCESO — now expandable */}
      <section id="proceso" style={{ padding: '70px 44px 50px', marginTop: 40, borderTop: `3px solid ${K.ink}`, borderBottom: `3px solid ${K.ink}`, position: 'relative' }}>
        <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 2, color: K.dim }}>/ sistema</div>
        <div style={{ fontFamily: K.display, fontSize: 'clamp(44px,7vw,80px)', textTransform: 'uppercase', lineHeight: 0.95, marginBottom: 10 }}>
          CÓMO <span style={{ fontStyle: 'italic', background: K.yellow, padding: '0 12px', display: 'inline-block', transform: 'rotate(-2deg)' }}>funciona</span>
        </div>
        <div style={{ fontFamily: K.mono, fontSize: 12, color: K.dim, marginBottom: 30, maxWidth: 620 }}>
          ↓ del primer <b style={{ color: K.ink }}>"hola, ¿cómo estás?"</b> hasta tu reel publicado: <b style={{ color: K.ink }}>6 a 8 días</b>. Hablas directo con quien va a llegar a grabar. Sin reuniones largas, cero intermediarios.
        </div>

        <Accordion kicker="paso 01" title="Elección del paquete publicitario" bg={K.paper} defaultOpen>
          <p style={{ margin: '0 0 14px' }}>Una vez que elijas paquete y forma de pago, agendamos la visita. Si tienes dudas antes de agendar, escríbenos o agenda una llamada de 15 min.</p>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <a href={waLink('Hola Konecta, antes de agendar mi visita quería hacerles una pregunta rápida.')} target="_blank" rel="noreferrer" data-k-cursor="whatsapp" data-cta="home-proceso-dudas" style={{ display: 'inline-block', background: '#22c55e', color: '#fff', fontFamily: K.mono, fontSize: 12, textTransform: 'uppercase', letterSpacing: 1.5, padding: '10px 16px', textDecoration: 'none', border: `3px solid ${K.ink}`, boxShadow: `4px 4px 0 ${K.ink}` }}>whatsapp ↗</a>
            <button type="button" data-cal-namespace="konecta" data-cal-link="konecta" data-cal-config='{"layout":"month_view"}' data-cta="home-cal" data-k-cursor="agendar 15 min" style={{ background: K.lime, color: K.ink, fontFamily: K.mono, fontSize: 12, textTransform: 'uppercase', letterSpacing: 1.5, padding: '10px 16px', cursor: 'pointer', border: `3px solid ${K.ink}`, boxShadow: `4px 4px 0 ${K.ink}`, fontWeight: 700 }}>📅 agendar 15 min ↗</button>
          </div>
        </Accordion>

        <Accordion kicker="paso 02" title="Visita" bg={K.paper}>
          <p style={{ margin: '0 0 10px' }}>La visita dura máximo 2 horas (con margen de 30 min). Cada hora extra: $1,000. Si necesitas reagendar con menos de 24 horas de anticipación, se cobran $1,000 adicionales.</p>
          <ul style={{ margin: 0, paddingLeft: 18, lineHeight: 1.8 }}>
            <li>Reel promocional con tus platos sugeridos o a nuestra elección (recomendamos una mesa para 3 o 4 personas).</li>
            <li>Stories en vivo durante la visita.</li>
          </ul>
        </Accordion>

        <Accordion kicker="paso 03" title="Pago" bg={K.paper}>
          <p style={{ margin: '0 0 10px' }}>Se pide <b>50% de anticipo el día de la grabación</b>. La <b>liquidación</b> se puede hacer por <b>transferencia bancaria</b> o en <b>efectivo</b>.</p>
          <p style={{ margin: '14px 0 8px', fontFamily: K.mono, fontSize: 12, color: K.dim, textTransform: 'uppercase', letterSpacing: 1 }}>Datos de transferencia bancaria:</p>
          <div style={{ background: '#f3f0e8', border: `2px solid ${K.ink}`, padding: '12px 14px', fontFamily: K.mono, fontSize: 13, lineHeight: 1.8 }}>
            <div><b>CLABE:</b> 012180015252491441</div>
            <div><b>Beneficiario:</b> JOSÉ ÁNGEL GALINDO SÁNCHEZ</div>
            <div><b>Banco:</b> BBVA</div>
          </div>
        </Accordion>

        <Accordion kicker="paso 04" title="Tiempos de Entrega y Publicación" bg={K.paper}>
          <p style={{ margin: '0 0 12px', fontSize: 13, color: K.dim }}>Nuestros tiempos están diseñados para maximizar el impacto de tu contenido:</p>
          <ul style={{ margin: 0, paddingLeft: 18, lineHeight: 1.7, display: 'grid', gap: 12 }}>
            <li><b>Paquete Mini:</b> El reel se entrega entre <b>6 a 8 días naturales</b> después de la grabación. Se publica en los días de mayor audiencia (recomendamos miércoles, jueves o sábado), sujeto a disponibilidad en nuestro calendario.</li>
            <li><b>Paquete Básico (2 videos):</b> El primer video se entrega entre <b>6 a 8 días naturales</b>. El segundo video se publica <b>4 semanas después</b> del primero y se te entrega <b>2 días antes</b> de su publicación (o el mismo día) para tu revisión.</li>
            <li><b>Paquete Premium (3 videos):</b> El proceso se repite. El primer video se entrega entre 6 a 8 días naturales. El segundo video se publica 4 semanas después del primero, y el tercero se publica <b>4 semanas después</b> del segundo. Cada pieza se entrega <b>2 días antes</b> de su respectiva fecha de publicación (o el mismo día).</li>
          </ul>
        </Accordion>

        {/* FAQ secundario — estrategia + cobertura viven aquí, no en el flujo 01→04 */}
        <div style={{
          marginTop: 64,
          padding: '44px 36px 40px',
          background: K.paper,
          border: `3px solid ${K.ink}`,
          boxShadow: `8px 8px 0 ${K.ink}`,
          position: 'relative',
        }}>
          {/* sticker label */}
          <div style={{
            position: 'absolute', top: -14, left: 28,
            background: K.yellow, color: K.ink,
            fontFamily: K.mono, fontSize: 10, fontWeight: 700, letterSpacing: 2,
            padding: '5px 12px', border: `3px solid ${K.ink}`, boxShadow: `3px 3px 0 ${K.ink}`,
            textTransform: 'uppercase', transform: 'rotate(-2deg)',
          }}>FAQ · lo que también preguntan</div>

          <div style={{
            display: 'grid',
            gridTemplateColumns: 'minmax(180px, 220px) 1fr',
            gap: 36,
            alignItems: 'start',
            marginTop: 6,
          }}>
            {/* LEFT — intro column */}
            <div style={{ position: 'sticky', top: 24 }}>
              <div style={{ fontFamily: K.display, fontSize: 36, textTransform: 'uppercase', lineHeight: 0.9, letterSpacing: '-1px' }}>
                cosas<br/>que <span style={{ fontStyle: 'italic', color: K.accent }}>también</span><br/>preguntan
              </div>
              <div style={{ fontFamily: K.mono, fontSize: 11, color: K.dim, marginTop: 14, lineHeight: 1.6 }}>
                ↓ dudas frecuentes que<br/>no encajan en el flujo<br/>de 4 pasos.
              </div>
              <div style={{
                marginTop: 20, paddingTop: 14, borderTop: `2px dashed ${K.ink}`,
                fontFamily: K.mono, fontSize: 10, color: K.dim, letterSpacing: 1,
              }}>
                ¿otra duda?<br/>
                <a href={waLink('Hola Konecta, tengo una duda que no vi en las preguntas frecuentes. ¿Me la pueden resolver?')} data-k-cursor="whatsapp" data-cta="home-faq" style={{ color: K.accent, textDecoration: 'underline', fontWeight: 700 }}>mándanos whatsapp ↗</a>
              </div>
            </div>

            {/* RIGHT — questions */}
            <div>
              <Accordion kicker="faq · cuentas" title="¿En qué cuentas se publica mi contenido?" bg={K.paper}>
                <p style={{ margin: '0 0 10px' }}>Lo elegimos según tu lugar: usamos la cuenta que mejor encaje con tu público. A veces publicamos en dos cuentas a la vez, sin costo extra, para sumar alcance.</p>
                <ul style={{ margin: 0, paddingLeft: 18, lineHeight: 1.8 }}>
                  <li><b>Instagram:</b> te añadimos como colaborador directo en la publicación.</li>
                  <li><b>TikTok:</b> si tienes perfil activo, te etiquetamos en la descripción.</li>
                </ul>
              </Accordion>

              <Accordion kicker="faq · cobertura" title="¿Qué cobertura geográfica tienen?" bg={K.paper}>
                <p style={{ margin: '0 0 10px' }}>El precio base cubre <b>CDMX y zonas cercanas del Estado de México</b>.</p>
                <p style={{ margin: '0 0 10px' }}>Para <b>Puebla, Morelos, Hidalgo o Querétaro</b>, platicamos para cotizar viáticos.</p>
                <p style={{ margin: 0 }}>Para destinos más lejanos, te pasamos una cotización adicional con traslado y hospedaje.</p>
              </Accordion>
            </div>
          </div>
        </div>
      </section>

      {/* RESULTADOS — reels reales embebidos. Rediseño: grid limpio, más aire, sin rotaciones apelmazadas */}
      <section id="resultados" style={{ padding: '80px 44px 70px', background: K.paper, borderTop: `3px solid ${K.ink}`, borderBottom: `3px solid ${K.ink}`, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: 24, right: 40, fontFamily: K.mono, fontSize: 10, background: K.accent, color: '#fff', padding: '5px 10px', border: `2px solid ${K.ink}`, transform: 'rotate(-3deg)', letterSpacing: 1.5, boxShadow: `3px 3px 0 ${K.ink}`, textTransform: 'uppercase' }}>★ reels en vivo</div>
        <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 2, color: K.dim }}>/ resultados</div>
        <div style={{ fontFamily: K.display, fontSize: 'clamp(44px,7vw,80px)', textTransform: 'uppercase', lineHeight: 0.95, marginBottom: 10 }}>
          resultados <span style={{ fontStyle: 'italic', background: K.yellow, padding: '0 12px', display: 'inline-block', transform: 'rotate(-2deg)', border: `3px solid ${K.ink}` }}>recientes</span>.
        </div>
        <div style={{ fontFamily: K.mono, fontSize: 13, color: K.dim, marginBottom: 40, maxWidth: 680, lineHeight: 1.5 }}>
          ↓ los últimos <b style={{ color: K.ink }}>10 reels publicados</b> en <b>@ciendetodo</b>, <b>@descubre.cdmx</b> y <b>@mexicoexplorers</b>. Vistas, likes y comentarios verificables: toca cualquiera y abre Instagram. <b style={{ color: K.ink }}>Todo orgánico, sin pauta. Sin números inflados.</b>
        </div>

        {/* Reels data — 10 reels reales de @ciendetodo con métricas auditadas.
            Thumbnails servidos desde konecta/reels/<shortcode>.webp (540x960, ~50KB cada uno).
            Originales JPG 720x1280 viven en konecta/assets/reels/ por si hay que regenerar.
            Saves/shares: Instagram los oculta públicamente desde 2024 → no se muestran.
            Vistas = total plays (incluye repeticiones). Unique views en hover/tooltip futuro. */}
        <div data-k-grid="reels-full" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
          gap: '48px 28px',
          padding: '10px 0',
        }}>
          {[
            { id: 'DWrd2xEjj-L', tag: 'comida',      lugar: 'Japi Ramen',              handle: '@japiramen',          zona: 'Del Valle, CDMX',     views: 190761, likes: 13333, comments: 93,  dur: 101 },
            { id: 'DWKBZ39jhvL', tag: 'comida',      lugar: 'La Magia del Bosque',     handle: '@lamagiadelbosque_',  zona: 'Puebla · cabañas',    views: 134258, likes: 7287,  comments: 583, dur: 72 },
            { id: 'DOZUxEBkmla', tag: 'experiencia', lugar: 'Onn & Off',               handle: '@onnandoffofficial',  zona: 'Condesa, CDMX',       views: 454877, likes: 10662, comments: 70,  dur: 41 },
            { id: 'DMRdcP7uQsh', tag: 'lugar',       lugar: 'Hakuna Caguama',          handle: '@hakuna_cahuama',     zona: 'CDMX',                views: 503975, likes: 21028, comments: 152, dur: 44 },
            { id: 'DMI5MyhueRI', tag: 'comida',      lugar: 'Frituur',                 handle: '@frituur.mx',         zona: 'Cuauhtémoc, CDMX',    views: 250855, likes: 9431,  comments: 48,  dur: 32 },
            { id: 'DMB_VQEObPT', tag: 'experiencia', lugar: 'Budapest Café',           handle: '@budapestcafemx',     zona: 'CDMX',                views: 142733, likes: 4890,  comments: 46,  dur: 23 },
            { id: 'DJ9g0fbxXLS', tag: 'lugar',       lugar: 'Fonda Bowls · Aviario',   handle: '@fondabowls',         zona: 'Polanco, CDMX',       views: 139485, likes: 7719,  comments: 29,  dur: 72 },
            { id: 'DIkpUbkuu_n', tag: 'comida',      lugar: 'Richeese',                handle: '@richeesemx',         zona: 'CDMX',                views: 222247, likes: 6473,  comments: 51,  dur: 42 },
            { id: 'DFHIkwWurbn', tag: 'experiencia', lugar: 'Terraza del Barrio',      handle: '@terrazadelbarrio.mx',zona: 'Xochimilco, CDMX',    views: 196207, likes: 6485,  comments: 34,  dur: 23 },
            { id: 'DE6MNpou2Df', tag: 'lugar',       lugar: 'Natsukashii',             handle: '@natsukashii.mx',     zona: 'San Rafael, CDMX',    views: 221226, likes: 7489,  comments: 27,  dur: 22 },
          ].map((reel, i) => {
            // Category theming — each tag has its own visual language
            const theme = {
              comida:      { tint: K.accent,  overlay: 'rgba(227,70,48,0.72)',  fg: '#fff', icon: '🍴', label: 'comida',      swatchFg: '#fff',  accent2: K.yellow },
              lugar:       { tint: K.cyan,    overlay: 'rgba(98,201,224,0.62)', fg: K.ink,  icon: '📍', label: 'lugar',       swatchFg: K.ink,   accent2: K.lime   },
              experiencia: { tint: K.violet,  overlay: 'rgba(124,92,255,0.72)', fg: '#fff', icon: '★',  label: 'experiencia', swatchFg: '#fff',  accent2: K.yellow },
            }[reel.tag];

            // Format metrics: 190761 → "190.8K", 13333 → "13.3K", < 1000 → "152"
            const fmt = (n) => {
              if (n >= 1_000_000) return (n / 1_000_000).toFixed(1).replace(/\.0$/, '') + 'M';
              if (n >= 1_000)     return (n / 1_000).toFixed(1).replace(/\.0$/, '') + 'K';
              return String(n);
            };
            const fmtDur = (s) => {
              const m = Math.floor(s / 60);
              const ss = Math.round(s % 60);
              return m > 0 ? `${m}:${String(ss).padStart(2, '0')}` : `${ss}s`;
            };
            const isViral = reel.views >= 300_000;
            const reelUrl = `https://www.instagram.com/ciendetodo/reel/${reel.id}/`;
            const thumbUrl = `konecta/reels/${reel.id}.webp?v=4`;

            return (
              <a
                key={reel.id}
                href={reelUrl}
                target="_blank"
                rel="noreferrer"
                data-k-cursor="ver en IG ↗"
                data-k-reel-full-card
                style={{
                  display: 'flex', flexDirection: 'column', textDecoration: 'none', color: K.ink,
                  transition: 'transform 0.22s cubic-bezier(.2,.8,.2,1)',
                }}
                onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-4px)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; }}
              >
                {/* Number + tag row (above card) */}
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
                  <div style={{
                    fontFamily: K.display, fontSize: 36, lineHeight: 0.9,
                    letterSpacing: '-1.5px', color: K.ink,
                  }}>
                    <span style={{ opacity: 0.3 }}>#</span>{String(i + 1).padStart(2, '0')}
                  </div>
                  <div style={{
                    background: theme.tint, color: theme.swatchFg,
                    padding: '4px 10px',
                    fontFamily: K.mono, fontSize: 10, fontWeight: 700, letterSpacing: 1.5,
                    border: `2px solid ${K.ink}`, textTransform: 'uppercase',
                    display: 'flex', alignItems: 'center', gap: 6,
                  }}>
                    <span style={{ fontSize: 12 }}>{theme.icon}</span>
                    {theme.label}
                  </div>
                </div>

                {/* THUMBNAIL FRAME (9:16) */}
                <div style={{
                  position: 'relative',
                  border: `3px solid ${K.ink}`,
                  boxShadow: `6px 6px 0 ${K.ink}`,
                  background: K.ink,
                  aspectRatio: '9 / 16',
                  overflow: 'hidden',
                }}>
                  {/* Placeholder (shown if <img> fails to load) */}
                  <div style={{
                    position: 'absolute', inset: 0,
                    background: `repeating-linear-gradient(135deg, #2a2a2a 0 12px, #1f1f1f 12px 24px)`,
                    display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                    color: 'rgba(255,255,255,0.35)', textAlign: 'center', padding: 18,
                  }}>
                    <div style={{ fontFamily: K.mono, fontSize: 10, letterSpacing: 1.5, textTransform: 'uppercase', marginBottom: 8 }}>pendiente</div>
                    <div style={{ fontFamily: K.mono, fontSize: 10, opacity: 0.6, wordBreak: 'break-all', lineHeight: 1.4 }}>{reel.id}.webp</div>
                  </div>

                  {/* Real thumbnail */}
                  <img
                    src={thumbUrl}
                    alt={`${reel.lugar} · reel @ciendetodo`}
                    loading="lazy"
                    decoding="async"
                    width={360}
                    height={640}
                    onError={(e) => { e.currentTarget.style.display = 'none'; }}
                    style={{
                      position: 'absolute', inset: 0, width: '100%', height: '100%',
                      objectFit: 'cover', display: 'block',
                    }}
                  />

                  {/* Category-tinted overlay — subtle color wash top + dark gradient bottom for legibility */}
                  <div style={{
                    position: 'absolute', inset: 0, pointerEvents: 'none',
                    background: `linear-gradient(180deg, ${theme.overlay} 0%, transparent 28%, transparent 48%, rgba(10,10,10,0.95) 100%)`,
                    mixBlendMode: 'multiply',
                  }} />
                  {/* Second pass — pure dark bottom for metric legibility (not multiplied) */}
                  <div style={{
                    position: 'absolute', inset: 0, pointerEvents: 'none',
                    background: `linear-gradient(180deg, transparent 55%, rgba(10,10,10,0.75) 100%)`,
                  }} />

                  {/* TOP-LEFT category icon — big */}
                  <div style={{
                    position: 'absolute', top: 10, left: 12,
                    fontSize: 26, lineHeight: 1,
                    filter: 'drop-shadow(2px 2px 0 rgba(0,0,0,0.7))',
                  }}>{theme.icon}</div>

                  {/* TOP-RIGHT duration chip */}
                  <div style={{
                    position: 'absolute', top: 12, right: 12,
                    background: 'rgba(10,10,10,0.75)', color: '#fff',
                    padding: '3px 8px',
                    fontFamily: K.mono, fontSize: 10, fontWeight: 700, letterSpacing: 1,
                    border: `1.5px solid rgba(255,255,255,0.3)`,
                    backdropFilter: 'blur(6px)',
                  }}>{fmtDur(reel.dur)}</div>

                  {/* MID-TOP viral badge (only for 300K+) */}
                  {isViral && (
                    <div style={{
                      position: 'absolute', top: 46, right: 10,
                      background: K.lime, color: K.ink,
                      padding: '4px 9px',
                      fontFamily: K.mono, fontSize: 10, fontWeight: 700, letterSpacing: 1.4,
                      border: `2px solid ${K.ink}`, boxShadow: `3px 3px 0 ${K.ink}`,
                      textTransform: 'uppercase', transform: 'rotate(4deg)',
                    }}>★ viral</div>
                  )}

                  {/* "play" circle — center */}
                  <div style={{
                    position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
                    width: 64, height: 64, borderRadius: '50%',
                    background: 'rgba(255,255,255,0.95)', color: K.ink,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 24, paddingLeft: 4,
                    boxShadow: `0 0 0 3px ${K.ink}, 5px 5px 0 ${K.ink}`,
                    pointerEvents: 'none',
                  }}>▶</div>

                  {/* BOTTOM: views hero + metrics row */}
                  <div style={{
                    position: 'absolute', bottom: 0, left: 0, right: 0,
                    padding: '16px 14px 14px',
                    color: '#fff',
                  }}>
                    {/* HERO VIEWS — big & bright */}
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 10 }}>
                      <div style={{
                        fontFamily: K.display, fontSize: 38, lineHeight: 0.9,
                        letterSpacing: '-2px', color: theme.accent2,
                      }}>{fmt(reel.views)}</div>
                      <div style={{
                        fontFamily: K.mono, fontSize: 9, textTransform: 'uppercase', letterSpacing: 1.5,
                        opacity: 0.85, paddingBottom: 2,
                      }}>▶ vistas</div>
                    </div>

                    {/* Sub-metrics row — likes + comments */}
                    <div style={{
                      display: 'flex', gap: 14, alignItems: 'center',
                      borderTop: '1.5px solid rgba(255,255,255,0.25)',
                      paddingTop: 8,
                    }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                        <span style={{ fontSize: 12, color: theme.accent2 }}>♥</span>
                        <span style={{ fontFamily: K.mono, fontSize: 11, fontWeight: 700 }}>{fmt(reel.likes)}</span>
                      </div>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                        <span style={{ fontSize: 11 }}>💬</span>
                        <span style={{ fontFamily: K.mono, fontSize: 11, fontWeight: 700 }}>{fmt(reel.comments)}</span>
                      </div>
                      <div style={{ flex: 1 }} />
                      <div style={{
                        fontFamily: K.mono, fontSize: 9, opacity: 0.6, letterSpacing: 1, textTransform: 'uppercase',
                      }}>IG reel</div>
                    </div>
                  </div>
                </div>

                {/* FOOTER — lugar + zona + external link */}
                <div style={{
                  marginTop: 14, display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 10,
                  fontFamily: K.mono, color: K.ink,
                }}>
                  <div style={{ minWidth: 0, flex: 1 }}>
                    <div style={{
                      fontFamily: K.display, fontSize: 17, lineHeight: 1.1,
                      textTransform: 'uppercase', letterSpacing: '-0.5px',
                      whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                    }}>{reel.lugar}</div>
                    <div style={{
                      fontSize: 10, opacity: 0.65, marginTop: 3, letterSpacing: 0.5,
                      whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                    }}>
                      <span style={{ color: theme.tint, fontWeight: 700 }}>{reel.handle}</span>
                      <span style={{ opacity: 0.6 }}> · {reel.zona}</span>
                    </div>
                  </div>
                  <span style={{
                    color: K.ink, flexShrink: 0,
                    textTransform: 'uppercase', letterSpacing: 1.2, fontWeight: 700, fontSize: 11,
                    borderBottom: `2px solid ${K.ink}`, paddingBottom: 1,
                  }}>ver ↗</span>
                </div>
              </a>
            );
          })}
        </div>

        <div style={{ marginTop: 48, padding: '20px 22px', background: K.ink, color: K.paper, border: `3px solid ${K.ink}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, flexWrap: 'wrap' }}>
            <div style={{ fontFamily: K.display, fontSize: 48, lineHeight: 0.9 }}>458.8K</div>
            <div style={{ fontFamily: K.mono, fontSize: 11, textTransform: 'uppercase', letterSpacing: 1.5, opacity: 0.7 }}>seguidores IG · @ciendetodo + submarcas</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, flexWrap: 'wrap' }}>
            <div style={{ fontFamily: K.display, fontSize: 48, lineHeight: 0.9, color: K.lime }}>233.6K</div>
            <div style={{ fontFamily: K.mono, fontSize: 11, textTransform: 'uppercase', letterSpacing: 1.5, opacity: 0.7 }}>seguidores TikTok</div>
          </div>
          <a href="https://www.instagram.com/ciendetodo/" target="_blank" rel="noreferrer" data-k-cursor="seguir" style={{
            background: K.lime, color: K.ink, padding: '12px 18px',
            fontFamily: K.mono, fontSize: 12, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 1.5,
            textDecoration: 'none', border: `2px solid ${K.paper}`, boxShadow: `4px 4px 0 ${K.paper}`, whiteSpace: 'nowrap',
          }}>ver perfil completo ↗</a>
        </div>

        <div style={{ marginTop: 16, fontFamily: K.mono, fontSize: 11, color: K.dim, display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
          <span>▸ métricas tomadas directo de Instagram y TikTok</span>
          <span>▸ entregamos reporte PDF al cierre de cada campaña</span>
        </div>
      </section>

      {/* GARANTÍA + HONESTIDAD — expandable */}
      <section id="honestidad" style={{ padding: '70px 44px 60px', borderBottom: `3px solid ${K.ink}` }}>
        <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 2, color: K.dim }}>/ lo_importante</div>
        <div style={{ fontFamily: K.display, fontSize: 'clamp(40px,6vw,72px)', textTransform: 'uppercase', lineHeight: 0.95, marginBottom: 10 }}>
          nuestra <span style={{ fontStyle: 'italic', background: K.lime, padding: '0 12px', display: 'inline-block', transform: 'rotate(-1deg)', border: `3px solid ${K.ink}` }}>palabra</span>
        </div>
        <div style={{ fontFamily: K.mono, fontSize: 12, color: K.dim, marginBottom: 30, maxWidth: 620 }}>
          ↓ así trabajamos con cada cliente. haz clic para abrir cada bloque.
        </div>

        <Accordion kicker="garantía" title="Nuestra apuesta: mínimo 40,000 visualizaciones" bg={K.ink} dark defaultOpen>
          <p style={{ margin: '0 0 12px' }}>Por contrato te <b>garantizamos al menos 40,000 visualizaciones</b> sumando Instagram + TikTok. Es el mínimo con el que te aseguramos que recuperas la inversión.</p>
          <p style={{ margin: '0 0 12px' }}>En la práctica, <b>la mayoría de nuestros reels cruzan las 100,000 vistas por red</b>. El promedio real está muy por encima del mínimo garantizado. Lo puedes ver en los reels de @ciendetodo más abajo.</p>
          <p style={{ margin: '0 0 12px' }}>Si no llegamos al mínimo, te damos una <b>segunda visita gratis</b> con el mismo paquete para cumplir el objetivo. Sin letra chica.</p>
          <p style={{ margin: 0 }}>Entendemos las <b>expectativas de los dueños de negocios</b> y aspiramos a <b>relaciones a largo plazo</b> con quienes nos elijan.</p>
        </Accordion>

        <Accordion kicker="cláusula" title="Comunicación orgánica, genuina y honesta" bg={K.lime}>
          <p style={{ margin: '0 0 12px' }}>Nuestros seguidores valoran que les hablemos con honestidad. Por eso confían en nuestras recomendaciones y terminan en tu restaurante, experiencia o alojamiento como clientes.</p>
          <p style={{ margin: 0 }}>La gente busca autenticidad. Si algún plato, servicio o aspecto de la experiencia no nos convence, te pediremos con amabilidad no insistir en compartirlo.</p>
        </Accordion>
      </section>

      {/* CTA */}
      <section id="contacto" style={{ padding: '60px 44px 70px', background: K.accent, color: '#fff', borderBottom: `3px solid ${K.ink}`, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: 20, left: '45%', fontFamily: K.display, fontSize: 360, color: 'rgba(255,255,255,0.1)', lineHeight: 0.8, pointerEvents: 'none' }}>★</div>

        {/* mini-stats + garantía — reframe: el promedio real es el protagonista, el piso contractual está en pequeño */}
        <div style={{
          margin: '0 0 40px', padding: '20px 24px', maxWidth: 720,
          background: K.paper, color: K.ink, border: `3px solid ${K.ink}`,
          boxShadow: `6px 6px 0 ${K.ink}`, transform: 'rotate(-0.8deg)', position: 'relative', zIndex: 2,
          display: 'flex', alignItems: 'center', gap: 24, flexWrap: 'wrap',
        }}>
          <span style={{ position: 'absolute', top: -14, left: 16, background: K.lime, color: K.ink, padding: '3px 10px', fontFamily: K.mono, fontSize: 10, fontWeight: 700, letterSpacing: 1.5, border: `2px solid ${K.ink}`, textTransform: 'uppercase', boxShadow: `3px 3px 0 ${K.ink}` }}>★ lo que pasa en la práctica</span>
          <div>
            <div style={{ fontFamily: K.display, fontSize: 64, lineHeight: 0.88, letterSpacing: '-2px' }}>100K+</div>
            <div style={{ fontFamily: K.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: 1.2, opacity: 0.7, marginTop: 2 }}>vistas promedio / red social</div>
          </div>
          <div style={{ width: 2, alignSelf: 'stretch', background: K.ink, opacity: 0.2 }} />
          <div style={{ flex: 1, minWidth: 220 }}>
            <div style={{ fontFamily: K.sans, fontSize: 15, lineHeight: 1.45, fontWeight: 500 }}>La mayoría de nuestros reels <b>cruzan las 100K</b> en IG + TikTok. El mínimo garantizado de 40K es nuestra apuesta segura.</div>
            <div style={{ fontFamily: K.mono, fontSize: 10, opacity: 0.7, marginTop: 6, letterSpacing: 0.8, textTransform: 'uppercase' }}>si no llegamos a 40K → 2da visita gratis</div>
          </div>
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 20, position: 'relative', zIndex: 2 }}>
          <div style={{ fontFamily: K.display, fontSize: 'clamp(48px,8vw,130px)', textTransform: 'uppercase', lineHeight: 0.88 }}>
            ¿Listo?<br/>
            <span style={{ fontStyle: 'italic' }}>vamos.</span>
          </div>
          <a href={waLink('Hola Konecta, ¡estoy listo! Quiero meter mi lugar a uno de sus reels. ¿Cómo arrancamos?')} data-k-cursor="escribir ↗" data-cta="home-final" className="k-final-cta" style={{ background: K.ink, color: K.paper, padding: '22px 32px', fontFamily: K.mono, fontSize: 14, textTransform: 'uppercase', letterSpacing: 1.5, textDecoration: 'none', border: `3px solid ${K.paper}`, transform: 'rotate(-2deg)', boxShadow: `6px 6px 0 ${K.lime}` }}>
            escríbenos por whatsapp ↗
          </a>
        </div>
      </section>

      <footer style={{ padding: '18px 44px', background: K.ink, color: K.paper, display: 'flex', justifyContent: 'space-between', fontFamily: K.mono, fontSize: 11, flexWrap: 'wrap', gap: 12 }}>
        <span>KONECTA · v2.0 · CDMX</span>
        <span style={{ opacity: 0.7 }}>respondemos &lt; 2h · lun–sáb · 10:00–20:00</span>
        <span>5667-72-75-83 · whatsapp ↗</span>
      </footer>

      <Palette open={paletteOpen} onClose={() => setPaletteOpen(false)} onNav={(id) => {
        // 'pub' goes to Publicidad page; other services are "soon" → scroll to #services
        if (id === 'pub') {
          window.location.href = '/publicidad#paquetes';
          return;
        }
        const el = document.getElementById('services');
        if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }} />
      <StickyWA />
    </div>
  );
}

window.HomeB = HomeB;