// ============================================================
// MOBILE — Propuesta 3 (Perímetro · editorial · Fraunces serif)
// Only home with hamburger menu
// ============================================================
const { useState: useState3 } = React;

const m3Theme = `
  .m3 {
    --green: #8DC149;
    --green-deep: #4A7A1A;
    --forest: #0E3326;
    --forest-deep: #081E16;
    --cream: #F4F1EA;
    --cream-2: #EBE6D7;
    --paper: #FBFAF6;
    --ink: #0B1410;
    --ink-2: #3A4A40;
    --ink-3: #6D7A72;
    --ink-4: #9AA39C;
    --line: #E0DDD3;
    --line-soft: #EDEAE0;
    --hot: #C6452B;
    background: var(--paper); color: var(--ink);
    font-family: 'Manrope', sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100%;
    position: relative;
  }
  .m3 a { color: inherit; text-decoration: none; }
  .m3 button { font-family: inherit; cursor: pointer; border: 0; background: transparent; }
  .m3 * { box-sizing: border-box; }
  .m3 .serif { font-family: 'Fraunces', serif; font-weight: 500; letter-spacing: -0.02em; }

  .m3-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 56px 16px 12px;
    background: var(--paper); border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 20;
  }
  .m3-top .ham, .m3-top .icon-btn { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; color: var(--forest-deep); }
  .m3-top .icon-btn { color: var(--ink-2); position: relative; }
  .m3-top .icon-btn .badge { position: absolute; top: 4px; right: 4px; width: 14px; height: 14px; background: var(--forest-deep); color: var(--green); font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
  .m3-top .logo, .m3-top img.logo { height: 22px; display: block; width: auto; }

  .m3-search { padding: 12px 16px; background: var(--paper); border-bottom: 1px solid var(--line); }
  .m3-search .input-wrap { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--cream); border-radius: 999px; }
  .m3-search .input-wrap svg { width: 16px; height: 16px; color: var(--ink-3); }
  .m3-search input { flex: 1; border: 0; background: transparent; outline: 0; font-size: 14px; color: var(--ink); font-family: inherit; }

  .m3-kicker { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.15em; color: var(--green-deep); margin-bottom: 8px; display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; }
  .m3-kicker::before { content: ""; width: 18px; height: 1px; background: var(--green-deep); }

  /* Hero */
  .m3-hero { padding: 24px 16px 28px; background: var(--paper); }
  .m3-hero h1 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 64px; line-height: 0.88; letter-spacing: -0.04em; color: var(--forest-deep); margin-bottom: 18px; }
  .m3-hero h1 em { font-style: italic; color: var(--green-deep); font-weight: 400; }
  .m3-hero h1 .line2 { display: block; margin-left: 32px; }
  .m3-hero .lede { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin-bottom: 18px; }
  .m3-hero .lede em { font-family: 'Fraunces', serif; font-style: italic; color: var(--forest-deep); font-size: 16px; }
  .m3-hero .ctas { display: flex; flex-direction: column; gap: 8px; }

  .m3-featured-band { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px 28px; background: var(--paper); }
  .m3-featured-band .main-card { background: var(--forest-deep); color: var(--cream); border-radius: 14px; padding: 22px 24px; position: relative; overflow: hidden; }
  .m3-featured-band .main-card .kicker { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; color: var(--green); margin-bottom: 10px; }
  .m3-featured-band .main-card h3 { font-family: 'Fraunces', serif; font-size: 26px; line-height: 1.05; letter-spacing: -0.02em; }
  .m3-featured-band .main-card h3 em { font-style: italic; color: var(--green); }
  .m3-featured-band .main-card .specs { display: flex; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
  .m3-featured-band .main-card .specs div { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: rgba(244,241,234,0.5); letter-spacing: 0.08em; }
  .m3-featured-band .main-card .specs strong { display: block; font-family: 'Manrope'; font-size: 18px; color: var(--green); margin-bottom: 2px; font-weight: 700; letter-spacing: -0.02em; }
  .m3-featured-band .price-card { background: var(--cream-2); border-radius: 14px; padding: 18px; display: flex; gap: 14px; align-items: center; }
  .m3-featured-band .price-card .ph-wrap { width: 80px; height: 80px; background: var(--paper); border-radius: 10px; padding: 10px; flex-shrink: 0; }
  .m3-featured-band .price-card .ph-wrap img { width: 100%; height: 100%; object-fit: contain; }
  .m3-featured-band .price-card .label { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--ink-3); letter-spacing: 0.06em; }
  .m3-featured-band .price-card h4 { font-family: 'Fraunces', serif; font-size: 15px; line-height: 1.2; margin: 4px 0 6px; color: var(--forest-deep); }
  .m3-featured-band .price-card .price { font-family: 'Fraunces', serif; font-size: 22px; color: var(--green-deep); letter-spacing: -0.02em; font-weight: 500; }
  .m3-featured-band .price-card .price small { font-size: 9px; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; display: block; }

  /* Trust */
  .m3-trust { background: var(--paper); padding: 18px 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .m3-trust .item { display: flex; gap: 10px; align-items: center; }
  .m3-trust .ic { width: 36px; height: 36px; background: var(--cream); display: flex; align-items: center; justify-content: center; color: var(--green-deep); flex-shrink: 0; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
  .m3-trust .ic svg { width: 18px; height: 18px; }
  .m3-trust h4 { font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 1px; }
  .m3-trust p { font-size: 10px; color: var(--ink-3); }

  /* Index (categories) */
  .m3-index { padding: 36px 16px; background: var(--cream); }
  .m3-index h2.serif { font-size: 30px; margin-bottom: 8px; line-height: 1; }
  .m3-index h2.serif em { font-style: italic; color: var(--green-deep); }
  .m3-index .lede { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-bottom: 22px; max-width: 280px; }
  .m3-index .ix-row { display: grid; grid-template-columns: 36px 1fr 28px; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
  .m3-index .ix-row:first-child { border-top: 1px solid var(--line); }
  .m3-index .ix-row .num { font-family: 'Fraunces', serif; font-style: italic; font-size: 18px; color: var(--ink-3); }
  .m3-index .ix-row .title { font-family: 'Fraunces', serif; font-size: 20px; letter-spacing: -0.02em; color: var(--forest-deep); font-weight: 500; line-height: 1.15; }
  .m3-index .ix-row .meta { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-3); letter-spacing: 0.05em; margin-top: 2px; }
  .m3-index .ix-row .arr { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink-3); }

  /* Featured products */
  .m3-feat { padding: 36px 16px; background: var(--paper); }
  .m3-feat h2.serif { font-size: 28px; line-height: 1.05; margin-bottom: 4px; }
  .m3-feat h2.serif em { font-style: italic; color: var(--green-deep); }
  .m3-feat .pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
  .m3-pcard { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
  .m3-pcard .img-wrap { aspect-ratio: 1; background: var(--cream); padding: 16px; position: relative; }
  .m3-pcard .img-wrap img { width: 100%; height: 100%; object-fit: contain; }
  .m3-pcard .badge { position: absolute; top: 8px; left: 8px; padding: 3px 8px; background: white; border: 1px solid var(--line); border-radius: 999px; font-size: 9px; font-weight: 600; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; }
  .m3-pcard .info { padding: 12px; }
  .m3-pcard .sku { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--ink-3); letter-spacing: 0.04em; }
  .m3-pcard h4 { font-family: 'Fraunces', serif; font-size: 14px; line-height: 1.2; color: var(--forest-deep); margin: 4px 0 8px; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .m3-pcard .stock { font-size: 10px; color: var(--green-deep); display: block; margin-bottom: 4px; font-weight: 500; }
  .m3-pcard .price { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 500; color: var(--forest-deep); letter-spacing: -0.02em; }
  .m3-pcard .old { font-size: 11px; color: var(--ink-3); text-decoration: line-through; margin-left: 4px; }

  /* Editorial dark */
  .m3-editorial { padding: 40px 16px; background: var(--forest-deep); color: var(--cream); position: relative; overflow: hidden; }
  .m3-editorial h2 { font-family: 'Fraunces', serif; font-size: 36px; line-height: 0.95; letter-spacing: -0.03em; font-weight: 500; margin-bottom: 16px; }
  .m3-editorial h2 em { font-style: italic; color: var(--green); }
  .m3-editorial .lede { font-size: 14px; line-height: 1.6; color: rgba(244,241,234,0.75); margin-bottom: 22px; }
  .m3-editorial .quote-card { background: rgba(244,241,234,0.04); border: 1px solid rgba(244,241,234,0.1); border-radius: 14px; padding: 24px 22px; position: relative; }
  .m3-editorial .quote-card .mark { position: absolute; top: -12px; left: 22px; font-family: 'Fraunces', serif; font-size: 56px; line-height: 1; color: var(--green); font-style: italic; }
  .m3-editorial .quote-card blockquote { font-family: 'Fraunces', serif; font-size: 18px; line-height: 1.3; color: var(--cream); font-style: italic; font-weight: 400; margin-bottom: 20px; }
  .m3-editorial .quote-card .author { display: flex; gap: 12px; align-items: center; padding-top: 16px; border-top: 1px solid rgba(244,241,234,0.1); }
  .m3-editorial .quote-card .author .av { width: 38px; height: 38px; background: rgba(141,193,73,0.18); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--green); font-family: 'Fraunces', serif; font-weight: 500; font-size: 13px; }
  .m3-editorial .quote-card .author h5 { font-size: 13px; font-weight: 600; color: var(--cream); }
  .m3-editorial .quote-card .author p { font-size: 10px; color: rgba(244,241,234,0.55); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; }
  .m3-editorial .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(244,241,234,0.1); }
  .m3-editorial .stats div { padding: 0 12px; border-right: 1px solid rgba(244,241,234,0.1); }
  .m3-editorial .stats div:first-child { padding-left: 0; }
  .m3-editorial .stats div:last-child { border-right: 0; }
  .m3-editorial .stats strong { display: block; font-family: 'Fraunces', serif; font-size: 30px; line-height: 1; letter-spacing: -0.02em; color: var(--green); font-weight: 500; }
  .m3-editorial .stats strong em { font-style: italic; }
  .m3-editorial .stats span { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: rgba(244,241,234,0.5); letter-spacing: 0.06em; margin-top: 4px; display: block; }

  /* Tech CTA */
  .m3-tech { padding: 36px 16px; background: var(--cream); }
  .m3-tech h2.serif { font-size: 36px; line-height: 0.95; margin-bottom: 12px; }
  .m3-tech h2.serif em { font-style: italic; color: var(--green-deep); }
  .m3-tech .lede { font-size: 13px; line-height: 1.55; color: var(--ink-2); margin-bottom: 20px; }
  .m3-tech .ctas { display: flex; flex-direction: column; gap: 8px; }
  .m3-tech .hex-stack { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
  .m3-tech .hex-row { display: flex; align-items: center; gap: 14px; padding: 18px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
  .m3-tech .hex-row .hex { width: 42px; height: 42px; background: var(--forest-deep); color: var(--green); display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-size: 14px; font-weight: 500; flex-shrink: 0; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
  .m3-tech .hex-row h4 { font-size: 14px; font-weight: 600; margin-bottom: 2px; color: var(--ink); }
  .m3-tech .hex-row p { font-size: 12px; line-height: 1.45; color: var(--ink-2); }

  /* Buttons */
  .m3-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s; border: 0; }
  .m3-btn-primary { background: var(--forest-deep); color: var(--paper); }
  .m3-btn-green { background: var(--green-deep); color: var(--paper); }
  .m3-btn-outline { background: transparent; color: var(--forest-deep); border: 1px solid var(--line); }
  .m3-btn-outline-light { background: transparent; color: var(--cream); border: 1px solid rgba(244,241,234,0.2); }
  .m3-btn-block { width: 100%; }
  .m3-btn svg { width: 14px; height: 14px; }

  /* Drawer */
  .m3-drawer { position: absolute; inset: 0; z-index: 100; pointer-events: none; }
  .m3-drawer .backdrop { position: absolute; inset: 0; background: rgba(8,30,22,0.6); opacity: 0; transition: opacity 0.25s; }
  .m3-drawer.open { pointer-events: all; }
  .m3-drawer.open .backdrop { opacity: 1; }
  .m3-drawer .panel { position: absolute; top: 0; left: 0; bottom: 0; width: 84%; background: var(--paper); padding: 56px 0 24px; transform: translateX(-100%); transition: transform 0.3s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; }
  .m3-drawer.open .panel { transform: translateX(0); }
  .m3-drawer .panel-head { padding: 12px 22px 18px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
  .m3-drawer .panel-head img { height: 22px; }
  .m3-drawer .panel-head .close { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; color: var(--ink-2); font-size: 22px; }
  .m3-drawer .panel-body { flex: 1; overflow: auto; padding: 16px 0; }
  .m3-drawer .group-label { padding: 14px 22px 6px; font-family: 'Fraunces', serif; font-style: italic; font-size: 14px; color: var(--ink-3); }
  .m3-drawer .row { padding: 12px 22px; display: grid; grid-template-columns: 36px 1fr 24px; gap: 12px; align-items: center; cursor: pointer; }
  .m3-drawer .row:hover { background: var(--cream); }
  .m3-drawer .row .num { font-family: 'Fraunces', serif; font-style: italic; font-size: 15px; color: var(--ink-3); }
  .m3-drawer .row .title { font-family: 'Fraunces', serif; font-size: 18px; color: var(--forest-deep); font-weight: 500; letter-spacing: -0.01em; }
  .m3-drawer .row .arr { color: var(--ink-3); }
  .m3-drawer .panel-foot { border-top: 1px solid var(--line); padding: 16px 22px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-3); letter-spacing: 0.06em; }
`;

const I3 = {
  search: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3-3"/></svg>,
  cart: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M5 7h14l-1.5 10.5a2 2 0 01-2 1.5h-7a2 2 0 01-2-1.5L5 7z"/><path d="M9 10V6a3 3 0 016 0v4"/></svg>,
  heart: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M12 21s-7-4.5-7-10a4 4 0 017-2.6A4 4 0 0119 11c0 5.5-7 10-7 10z"/></svg>,
  ham: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 7h16M4 12h16M4 17h16"/></svg>,
  arr: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M5 12h14M13 6l6 6-6 6"/></svg>,
  chev: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 6l6 6-6 6"/></svg>,
  truck: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="2" y="6" width="12" height="11" rx="1"/><path d="M14 9h5l3 4v4h-8"/><circle cx="7" cy="19" r="2"/><circle cx="17" cy="19" r="2"/></svg>,
  shield: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6l8-3z"/></svg>,
  box: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 8l9-5 9 5v8l-9 5-9-5V8z"/><path d="M3 8l9 5 9-5"/><path d="M12 13v8"/></svg>,
  headset: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 14v-3a9 9 0 0118 0v3"/><rect x="2" y="14" width="5" height="6" rx="1"/><rect x="17" y="14" width="5" height="6" rx="1"/></svg>,
};

const M3_PRODUCTS = [
  { sku: 'DJ-CAM-IP4K-01', name: 'Cámara IP Domo 4K visión nocturna 60m', price: 287.50, oldPrice: 359.00, tag: 'OFERTA', stock: 12 },
  { sku: 'DJ-MOT-CORR-1T', name: 'Motor corredizo 1000kg cremallera', price: 412.00, oldPrice: null, tag: 'NUEVO', stock: 8 },
  { sku: 'DJ-CAM-BUL-PRO', name: 'Cámara bullet exterior 5MP IR 40m', price: 156.00, oldPrice: 198.00, tag: 'OFERTA', stock: 24 },
  { sku: 'DJ-CER-BIO-FP', name: 'Cerradura biométrica con huella', price: 134.00, oldPrice: null, tag: '★ DESTACADO', stock: 9 },
];

const M3_CATS = [
  { name: 'Cámaras CCTV', sub: '4K · IP · PTZ', count: 121 },
  { name: 'Motores y Portones', sub: 'Corredizos · Levadizos', count: 87 },
  { name: 'Alarmas e Intrusión', sub: 'Sensores · Sirenas', count: 64 },
  { name: 'Detección Incendio', sub: 'Humo · Calor · CO', count: 42 },
  { name: 'Control de Accesos', sub: 'Cerraduras · Biométricos', count: 53 },
  { name: 'Domótica IoT', sub: 'Smart Home · Sensores', count: 38 },
];

function M3Pcard({ p }) {
  return (
    <div className="m3-pcard">
      <div className="img-wrap">
        <span className="badge">{p.tag}</span>
        <img src="assets/product-camera.svg" alt=""/>
      </div>
      <div className="info">
        <span className="sku">{p.sku}</span>
        <h4>{p.name}</h4>
        <span className="stock">Stock · {p.stock} und</span>
        <div>
          <span className="price">${p.price.toFixed(2)}</span>
          {p.oldPrice && <span className="old">${p.oldPrice.toFixed(2)}</span>}
        </div>
      </div>
    </div>
  );
}

function M3App() {
  const [menu, setMenu] = useState3(false);
  return (
    <div className="m3">
      <style>{m3Theme}</style>
      <div className="m3-top">
        <button className="ham" onClick={()=>setMenu(true)}>{I3.ham}</button>
        <img className="logo" src="assets/logos/horizontal-darkgreen.png" alt=""/>
        <div style={{display:'flex',gap:0}}>
          <button className="icon-btn">{I3.heart}</button>
          <button className="icon-btn">{I3.cart}<span className="badge">2</span></button>
        </div>
      </div>

      <div className="m3-search">
        <div className="input-wrap">
          {I3.search}
          <input placeholder="Buscar cámaras, motores, alarmas…"/>
        </div>
      </div>

      <section className="m3-hero">
        <h1 className="serif">Tu casa<br/><em>protegida,</em><br/><span className="line2">con criterio.</span></h1>
        <p className="lede"><em>Don Juan Security</em> es el catálogo curado de tecnología de seguridad para el hogar y el negocio. Cámaras 4K, motores, alarmas, accesos biométricos.</p>
        <div className="ctas">
          <button className="m3-btn m3-btn-primary m3-btn-block">Ver el catálogo {I3.arr}</button>
          <button className="m3-btn m3-btn-outline m3-btn-block">Hablar con asesor</button>
        </div>
      </section>

      <section className="m3-featured-band">
        <div className="main-card">
          <div className="kicker">CCTV · PROTAGONISTA DE LA SEMANA</div>
          <h3>Cámara IP Domo 4K<br/>con visión <em>nocturna</em> 60m.</h3>
          <div className="specs">
            <div><strong>4K</strong>UHD</div>
            <div><strong>60m</strong>IR NOCHE</div>
            <div><strong>IP67</strong>EXTERIOR</div>
            <div><strong>22x</strong>ZOOM</div>
          </div>
        </div>
        <div className="price-card">
          <div className="ph-wrap"><img src="assets/product-camera.svg" alt=""/></div>
          <div style={{flex:1}}>
            <span className="label">DJ-CAM-IP4K-01 · HIKVISION</span>
            <h4>Domo IP 4K · Visión nocturna 60m</h4>
            <span className="price"><small>DESDE</small>$287.50</span>
          </div>
        </div>
      </section>

      <section className="m3-trust">
        <div className="item"><div className="ic">{I3.box}</div><div><h4>Stock</h4><p>847 productos</p></div></div>
        <div className="item"><div className="ic">{I3.truck}</div><div><h4>Envío 24–72h</h4><p>Todo el país</p></div></div>
        <div className="item"><div className="ic">{I3.shield}</div><div><h4>Pago manual</h4><p>Transferencia · Móvil</p></div></div>
        <div className="item"><div className="ic">{I3.headset}</div><div><h4>Asesoría</h4><p>WhatsApp</p></div></div>
      </section>

      <section className="m3-index">
        <div className="m3-kicker">ÍNDICE · 06 CATEGORÍAS</div>
        <h2 className="serif">El catálogo,<br/>como un <em>sumario.</em></h2>
        <p className="lede">No te pierdes navegando: cada categoría es una sección. Entra directo al detalle técnico.</p>
        {M3_CATS.map((c, i) => (
          <div key={c.name} className="ix-row">
            <span className="num">— 0{i+1}</span>
            <div>
              <div className="title">{c.name}</div>
              <div className="meta">{c.sub.toUpperCase()} · // {c.count} ARTÍCULOS</div>
            </div>
            <button className="arr">{I3.chev}</button>
          </div>
        ))}
      </section>

      <section className="m3-feat">
        <div className="m3-kicker">SECCIÓN 02 · DESTACADOS</div>
        <h2 className="serif">Lo que más se<br/><em>mueve</em> esta semana.</h2>
        <div className="pgrid">
          {M3_PRODUCTS.map(p => <M3Pcard key={p.sku} p={p}/>)}
        </div>
      </section>

      <section className="m3-editorial">
        <div className="m3-kicker" style={{color: 'var(--green)'}}>SECCIÓN 03 · ENSAYO</div>
        <h2>La seguridad no se compra<br/><em>en cualquier parte.</em></h2>
        <p className="lede">Llevamos quince años distribuyendo equipos de seguridad. Conocemos cada motor, cada cámara, cada placa controladora. Cuando un cliente nos pregunta qué necesita, no le vendemos: le recomendamos.</p>
        <div className="quote-card">
          <span className="mark">"</span>
          <blockquote>Nos asesoraron motor, cámara y alarma para el depósito. Llegó en 48 horas y el técnico que nos recomendaron lo instaló perfecto.</blockquote>
          <div className="author">
            <div className="av">JF</div>
            <div>
              <h5>Javier Fernández</h5>
              <p>// FERRETERÍA ANDINA · PUERTO ORDAZ</p>
            </div>
          </div>
        </div>
        <div className="stats">
          <div><strong>15<em>a</em></strong><span>AÑOS EN EL MERCADO</span></div>
          <div><strong>3.2k</strong><span>CLIENTES</span></div>
          <div><strong>847</strong><span>PRODUCTOS</span></div>
        </div>
      </section>

      <section className="m3-tech">
        <div className="m3-kicker">SECCIÓN 04 · PORTAL DE TÉCNICOS</div>
        <h2 className="serif">¿Eres<br/>instalador?<br/><em>Súmate.</em></h2>
        <p className="lede">El directorio público de técnicos certificados Don Juan Security. Los clientes te contactan directo por WhatsApp. Sin comisiones.</p>
        <div className="ctas">
          <button className="m3-btn m3-btn-primary m3-btn-block">Registrarme como técnico {I3.arr}</button>
          <button className="m3-btn m3-btn-outline m3-btn-block">Ver técnicos</button>
        </div>
        <div className="hex-stack">
          <div className="hex-row"><div className="hex">01</div><div><h4>Registro y aprobación 24h</h4><p>Sube tu cédula y certificaciones.</p></div></div>
          <div className="hex-row"><div className="hex">02</div><div><h4>Tarifas mayoristas</h4><p>Mejores precios en todas las marcas.</p></div></div>
          <div className="hex-row"><div className="hex">03</div><div><h4>Trabajos directos</h4><p>Apareces en el listado público.</p></div></div>
          <div className="hex-row"><div className="hex">04</div><div><h4>Sin comisión</h4><p>Cobras el trabajo entero.</p></div></div>
        </div>
      </section>

      <div className={`m3-drawer ${menu?'open':''}`}>
        <div className="backdrop" onClick={()=>setMenu(false)}></div>
        <div className="panel">
          <div className="panel-head">
            <img src="assets/logos/horizontal-darkgreen.png" alt=""/>
            <button className="close" onClick={()=>setMenu(false)}>×</button>
          </div>
          <div className="panel-body">
            <div className="group-label">— Navegación</div>
            <div className="row"><span className="num">— 01</span><span className="title">Inicio</span><span className="arr">{I3.chev}</span></div>
            <div className="row"><span className="num">— 02</span><span className="title">Tienda</span><span className="arr">{I3.chev}</span></div>
            <div className="row"><span className="num">— 03</span><span className="title">Carrito (2)</span><span className="arr">{I3.chev}</span></div>
            <div className="row"><span className="num">— 04</span><span className="title">Acceso</span><span className="arr">{I3.chev}</span></div>
            <div className="row"><span className="num">— 05</span><span className="title">Portal técnicos</span><span className="arr">{I3.chev}</span></div>
            <div className="group-label">— Catálogo</div>
            {M3_CATS.map((c, i) => (
              <div key={c.name} className="row"><span className="num">— 0{i+1}</span><span className="title">{c.name}</span><span className="arr">{I3.chev}</span></div>
            ))}
          </div>
          <div className="panel-foot">VOL. 01 · CATÁLOGO 2026 — EDICIÓN BOLÍVAR</div>
        </div>
      </div>
    </div>
  );
}

window.M3App = M3App;