// Variant 2 — Tech Mono
// Grid marcado, sans + mono, estilo documentación técnica / SaaS B2B serio.
// Paleta: blanco casi puro + tinta + acento naranja.

const techStyles = `
  .tk-root {
    --bg: #fbfbf9;
    --panel: #ffffff;
    --ink: #101010;
    --muted: #6b6b66;
    --line: #10101012;
    --line-strong: #10101022;
    --accent: #d9521c;
    font-family: 'Inter Tight', 'Helvetica Neue', sans-serif;
    color: var(--ink);
    background: var(--bg);
    width: 100%;
    min-height: 100%;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: -0.005em;
    box-sizing: border-box;
  }
  .tk-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0; }

  /* Top strip */
  .tk-topstrip { display: flex; justify-content: space-between; align-items: center; padding: 14px var(--padX, 40px); border-bottom: 1px solid var(--line-strong); font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .tk-topstrip .tk-status { display: flex; align-items: center; gap: 8px; }
  .tk-dot { width: 7px; height: 7px; border-radius: 50%; background: #17a866; box-shadow: 0 0 0 3px rgba(23,168,102,0.18); }

  /* Header */
  .tk-head { display: flex; justify-content: space-between; align-items: center; padding: 22px var(--padX, 40px); border-bottom: 1px solid var(--line-strong); position: sticky; top: 0; z-index: 50; background: rgba(251,251,249,0.85); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); }
  .tk-brand { font-family: 'JetBrains Mono', monospace; font-size: 14px; letter-spacing: -0.01em; }
  .tk-brand b { font-weight: 700; }
  .tk-brand span { color: var(--accent); }
  .tk-nav { display: flex; gap: 2px; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
  .tk-nav a { color: var(--muted); text-decoration: none; padding: 8px 14px; border-radius: 4px; transition: all 0.15s; }
  .tk-nav a:hover { color: var(--ink); background: #0000000a; }

  /* Hamburger — desktop hidden */
  .tk-burger { display: none; }

  /* Grid numbers overlay */
  .tk-col-idx { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }

  /* Hero */
  .tk-hero { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line-strong); }
  .tk-hero-left { padding: var(--pad, 56px) var(--padX, 40px); border-right: 1px solid var(--line); position: relative; min-width: 0; }
  .tk-hero-right { padding: var(--pad, 56px) var(--padX, 40px); background: linear-gradient(180deg, var(--panel), var(--bg)); min-width: 0; }
  .tk-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 28px; display: flex; align-items: center; gap: 10px; }
  .tk-label::before { content: ''; width: 18px; height: 1px; background: var(--accent); }
  .tk-h1 { font-size: clamp(44px, 5.2vw, 76px); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 24px; font-weight: 500; }
  .tk-h1 .tk-hl { color: var(--accent); font-weight: 500; }
  .tk-lede { font-size: 18px; line-height: 1.5; color: var(--muted); max-width: 540px; margin-bottom: 36px; }

  .tk-ctas { display: flex; gap: 10px; }
  .tk-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; letter-spacing: 0.02em; text-decoration: none; border: 1px solid var(--ink); transition: all 0.15s; cursor: pointer; }
  .tk-btn.prim { background: var(--ink); color: var(--bg); }
  .tk-btn.prim:hover { background: var(--accent); border-color: var(--accent); }
  .tk-btn.sec { background: transparent; color: var(--ink); border-color: var(--line-strong); }
  .tk-btn.sec:hover { border-color: var(--ink); }
  .tk-btn svg { width: 13px; height: 13px; }

  /* Terminal card */
  .tk-card {
    border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel);
    font-family: 'JetBrains Mono', monospace; font-size: 12.5px; line-height: 1.7;
    overflow: hidden;
  }
  .tk-card-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line); background: #fafaf7; }
  .tk-card-head .tk-dots { display: flex; gap: 6px; }
  .tk-card-head .tk-dots span { width: 10px; height: 10px; border-radius: 50%; background: #dcdcd6; }
  .tk-card-head .tk-dots span:first-child { background: #e28a6e; }
  .tk-card-head .tk-file { color: var(--muted); font-size: 11px; margin-left: auto; letter-spacing: 0.04em; }
  .tk-card-body { padding: 18px 18px; }
  .tk-card-body .tk-k { color: #8b5cf6; }
  .tk-card-body .tk-s { color: #17a866; }
  .tk-card-body .tk-c { color: var(--muted); }
  .tk-card-body .tk-v { color: var(--ink); }
  .tk-card-body .tk-a { color: var(--accent); }

  /* Pipeline — flowing nodes */
  .tk-pl-wrap { width: 100%; }
  .tk-pl {
    border: 1px solid var(--line-strong); border-radius: 12px; background: var(--panel);
    padding: 28px 22px 24px; position: relative;
  }
  .tk-pl-head {
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted);
    letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 22px;
  }
  .tk-pl-head .tk-pl-live { display: flex; align-items: center; gap: 8px; color: #17a866; }
  .tk-pl-head .tk-pl-live::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%; background: #17a866;
    box-shadow: 0 0 0 3px rgba(23,168,102,0.18);
    animation: tk-pl-blink 1.4s ease-in-out infinite;
  }
  @keyframes tk-pl-blink { 0%, 60% { opacity: 1; } 80% { opacity: 0.3; } 100% { opacity: 1; } }
  .tk-pl-flow {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    align-items: center; position: relative;
  }
  .tk-pl-step {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 14px 8px; position: relative; z-index: 2;
  }
  .tk-pl-icon {
    width: 56px; height: 56px; border-radius: 12px;
    background: var(--bg); border: 1px solid var(--line-strong);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
  }
  .tk-pl-step.hot .tk-pl-icon {
    background: var(--ink); border-color: var(--ink);
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 8px 22px -8px rgba(217, 82, 28, 0.45);
  }
  .tk-pl-step.hot .tk-pl-icon svg { stroke: var(--bg); }
  .tk-pl-icon svg { width: 24px; height: 24px; stroke: var(--ink); fill: none; stroke-width: 1.6; transition: stroke 0.3s; }
  .tk-pl-step.hot .tk-pl-icon::after {
    content: ''; position: absolute; inset: -4px; border-radius: 14px;
    border: 1px solid var(--accent); opacity: 0;
    animation: tk-pl-ring 1.4s ease-out;
  }
  @keyframes tk-pl-ring {
    0% { opacity: 0.6; transform: scale(0.92); }
    100% { opacity: 0; transform: scale(1.18); }
  }
  .tk-pl-label {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: var(--ink); letter-spacing: 0.04em; font-weight: 500;
    text-transform: uppercase;
  }
  .tk-pl-step.hot .tk-pl-label { color: var(--accent); }
  .tk-pl-sub {
    font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
    color: var(--muted); letter-spacing: 0.04em;
    height: 13px; text-align: center;
  }
  /* Connector track between steps */
  .tk-pl-track {
    position: absolute; top: 42px; left: 12.5%; right: 12.5%; height: 2px;
    background: var(--line-strong); border-radius: 2px; z-index: 1;
  }
  .tk-pl-pulse {
    position: absolute; top: 41px; height: 4px; width: 22px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    border-radius: 2px; z-index: 1;
    box-shadow: 0 0 12px rgba(217, 82, 28, 0.6);
  }
  /* Footer status row */
  .tk-pl-foot {
    margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line);
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px;
    font-family: 'JetBrains Mono', monospace;
  }
  .tk-pl-stat-l {
    font-size: 9.5px; color: var(--muted); letter-spacing: 0.06em;
    text-transform: uppercase; margin-bottom: 4px;
  }
  .tk-pl-stat-v { font-size: 18px; color: var(--ink); font-weight: 600; letter-spacing: -0.01em; font-family: 'Inter Tight', sans-serif; }
  .tk-pl-stat-v .acc { color: var(--accent); }

  /* Logo ticker */
  .tk-tic {
    margin-top: 18px;
    border: 1px solid var(--line-strong); border-radius: 10px;
    background: var(--panel); overflow: hidden; padding: 14px 0;
    position: relative;
    width: 100%; max-width: 100%; min-width: 0;
  }
  .tk-tic::before, .tk-tic::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 50px; z-index: 2;
    pointer-events: none;
  }
  .tk-tic::before { left: 0; background: linear-gradient(90deg, var(--panel), transparent); }
  .tk-tic::after { right: 0; background: linear-gradient(-90deg, var(--panel), transparent); }
  .tk-tic-track {
    display: flex; gap: 38px; width: max-content;
    animation: tk-tic-slide 32s linear infinite;
  }
  @keyframes tk-tic-slide {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
  .tk-tic-item {
    font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500;
    color: var(--ink); letter-spacing: 0.02em;
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  }
  .tk-tic-item::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%;
    background: var(--accent); flex-shrink: 0;
  }

  /* Pipeline — tablet (compact horizontal) */
  @media (max-width: 1024px) {
    .tk-pl { padding: 24px 18px 22px; }
    .tk-pl-icon { width: 48px; height: 48px; border-radius: 10px; }
    .tk-pl-icon svg { width: 22px; height: 22px; }
    .tk-pl-track { top: 38px; left: 12.5%; right: 12.5%; }
    .tk-pl-pulse { top: 37px; }
    .tk-pl-label { font-size: 10px; }
    .tk-pl-sub { font-size: 9px; }
    .tk-pl-stat-v { font-size: 16px; }
  }

  /* Pipeline — mobile (vertical flow) */
  @media (max-width: 640px) {
    .tk-pl-wrap { max-width: 100%; }
    .tk-pl { padding: 22px 18px 20px; }
    .tk-pl-head { margin-bottom: 18px; font-size: 10px; }

    .tk-pl-flow {
      grid-template-columns: 1fr;
      grid-auto-rows: auto;
      gap: 0;
    }
    .tk-pl-step {
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      gap: 14px;
      padding: 10px 0;
      text-align: left;
    }
    .tk-pl-icon { width: 44px; height: 44px; flex-shrink: 0; }
    .tk-pl-icon svg { width: 20px; height: 20px; }
    .tk-pl-step .tk-pl-label { font-size: 11px; }
    .tk-pl-sub {
      font-size: 10px; height: auto;
      text-align: left;
      letter-spacing: 0.02em;
    }
    .tk-pl-step > div:not(.tk-pl-icon) { /* text column wrapper not used */ }
    /* Wrap label + sub vertically next to icon */
    .tk-pl-step .tk-pl-label,
    .tk-pl-step .tk-pl-sub { display: block; }
    .tk-pl-step .tk-pl-label { margin-bottom: 2px; }

    /* Vertical connector track on the left, behind icons */
    .tk-pl-track {
      top: 22px; bottom: 22px; height: auto;
      left: 21px; right: auto; width: 2px;
    }
    .tk-pl-pulse {
      top: auto; left: 19px; width: 6px; height: 22px;
      background: linear-gradient(180deg, transparent, var(--accent), transparent);
      box-shadow: 0 0 12px rgba(217, 82, 28, 0.6);
    }

    .tk-pl-foot { grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 18px; padding-top: 14px; }
    .tk-pl-stat-l { font-size: 8.5px; }
    .tk-pl-stat-v { font-size: 15px; }

    .tk-tic { margin-top: 14px; padding: 12px 0; }
    .tk-tic-item { font-size: 11.5px; }
    .tk-tic-track { gap: 28px; }
  }

  /* Portrait chip */
  .tk-id-row { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel); margin-top: 18px; }
  .tk-id-photo { width: 60px; height: 60px; border-radius: 50%; background: #ddd url('assets/pepe.jpg') center/cover; flex-shrink: 0; }
  .tk-id-name { font-weight: 600; letter-spacing: -0.01em; font-size: 15px; }
  .tk-id-role { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); margin-top: 3px; letter-spacing: 0.02em; }

  /* Section */
  .tk-section { border-bottom: 1px solid var(--line-strong); padding: var(--pad, 72px) 0; }
  .tk-section-head { display: grid; grid-template-columns: 120px 1fr; gap: 32px; padding: 0 var(--padX, 40px); margin-bottom: 44px; align-items: end; }
  .tk-num { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--accent); letter-spacing: 0.06em; }
  .tk-num::before { content: '→ '; }
  .tk-section-title { font-size: clamp(30px, 3.4vw, 46px); letter-spacing: -0.025em; line-height: 1.05; margin: 10px 0 0; font-weight: 500; overflow-wrap: break-word; word-break: break-word; hyphens: auto; }
  .tk-section-sub { color: var(--muted); margin: 12px 0 0; max-width: 560px; font-size: 15px; overflow-wrap: break-word; }

  /* Services grid */
  .tk-svc-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-strong);
  }
  .tk-svc { padding: 28px 24px 32px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; transition: background 0.15s; min-height: 220px; display: flex; flex-direction: column; }
  .tk-svc:nth-child(4n) { border-right: none; }
  .tk-svc:nth-last-child(-n+4) { border-bottom: none; }
  .tk-svc:hover { background: #fff; }
  .tk-svc:hover .tk-svc-n { color: var(--accent); }
  .tk-svc-n { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: 0.06em; }
  .tk-svc-t { font-size: 18px; letter-spacing: -0.015em; margin: 14px 0 10px; font-weight: 600; }
  .tk-svc-d { font-size: 13.5px; line-height: 1.55; color: var(--muted); }

  /* Timeline */
  .tk-timeline { padding: 0 var(--padX, 40px); }
  .tk-tl-grid { display: grid; grid-template-columns: 1.1fr 2fr; gap: 0; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; background: var(--panel); }
  .tk-tl-list { border-right: 1px solid var(--line); }
  .tk-tl-item { padding: 18px 22px; border-bottom: 1px solid var(--line); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background 0.12s; }
  .tk-tl-item:last-child { border-bottom: none; }
  .tk-tl-item:hover { background: #fafaf7; }
  .tk-tl-item.active { background: #fafaf7; border-left: 2px solid var(--accent); padding-left: 20px; }
  .tk-tl-co { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
  .tk-tl-pd { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); }
  .tk-tl-detail { padding: 32px 32px; }
  .tk-tl-collapse { display: none; }
  .tk-tl-tag { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--accent); letter-spacing: 0.06em; }
  .tk-tl-role { font-size: 22px; letter-spacing: -0.015em; margin: 0 0 8px; font-weight: 600; }
  .tk-tl-at { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); margin-bottom: 18px; }
  .tk-tl-body { font-size: 15px; line-height: 1.6; color: var(--ink); max-width: 540px; white-space: pre-line; }

  /* Clients — carrusel infinito de logos */
  .tk-logos {
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    overflow: hidden;
    position: relative;
    background: var(--bg);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
  .tk-logos-track {
    display: flex; align-items: center; gap: 0;
    width: max-content;
    animation: tk-scroll 38s linear infinite;
  }
  .tk-logos:hover .tk-logos-track { animation-play-state: paused; }
  @keyframes tk-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .tk-logo {
    flex: 0 0 auto;
    width: 220px; height: 130px;
    display: flex; align-items: center; justify-content: center;
    border-right: 1px solid var(--line);
    padding: 0 28px; box-sizing: border-box;
    color: var(--muted);
    transition: color 0.2s, filter 0.2s;
    filter: grayscale(1) opacity(0.65);
  }
  .tk-logo:hover { filter: grayscale(0) opacity(1); color: var(--ink); }
  .tk-logo-svg { width: 100%; height: auto; max-height: 56px; }
  .tk-logo-img { max-width: 100%; max-height: 56px; width: auto; height: auto; object-fit: contain; display: block; }
  .tk-logo-wm { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-family: var(--typ-sans, 'Inter Tight', sans-serif); white-space: nowrap; }
  .tk-logo-wm small { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 6px; letter-spacing: 0.04em; vertical-align: middle; }

  /* About */
  .tk-about-grid { display: grid; grid-template-columns: 120px 1fr 320px; gap: 32px; padding: 0 var(--padX, 40px); }
  .tk-about-body p { font-size: 18px; line-height: 1.55; margin: 0 0 18px; max-width: 620px; }
  .tk-about-photo { aspect-ratio: 4/5; background: #ddd url('assets/pepe.jpg') center/cover; border-radius: 8px; filter: grayscale(0.1); }

  /* About — bento layout v2 */
  .tk-about2 { padding: 0 var(--padX, 40px); display: grid; grid-template-columns: 120px 1fr; gap: 32px; }
  .tk-about2-bento {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    grid-template-rows: auto auto;
    gap: 18px;
    align-items: stretch;
  }
  .tk-ab-photo {
    grid-row: 1 / span 2;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    overflow: hidden;
    background: #ddd url('assets/pepe.jpg') center/cover;
    position: relative;
    min-height: 460px;
    isolation: isolate;
  }

  .tk-ab-photo-badge {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--bg); background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.18); border-radius: 999px;
    padding: 6px 12px;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .tk-ab-photo-badge::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25);
    animation: tk-pl-blink 1.6s ease-in-out infinite;
  }
  .tk-ab-photo-sig {
    position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2;
    color: #fff;
  }
  .tk-ab-photo-sig .nm { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.1; }
  .tk-ab-photo-sig .rl { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.78); margin-top: 4px; letter-spacing: 0.04em; }

  .tk-ab-lead {
    border: 1px solid var(--line-strong); border-radius: 12px;
    background: var(--panel); padding: 28px 28px 26px;
    display: flex; flex-direction: column; gap: 14px;
    position: relative;
  }
  .tk-ab-lead-eyebrow {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase;
    display: flex; align-items: center; gap: 10px;
  }
  .tk-ab-lead-eyebrow::before {
    content: ''; width: 18px; height: 1px; background: var(--accent);
  }
  .tk-ab-lead-q {
    font-size: clamp(20px, 1.7vw, 24px); line-height: 1.4;
    color: var(--ink); margin: 0; font-weight: 500;
    letter-spacing: -0.005em;
  }
  .tk-ab-lead-q strong { color: var(--accent); font-weight: 500; font-style: normal; background: linear-gradient(180deg, transparent 60%, rgba(217,82,28,0.14) 60%); padding: 0 2px; }

  .tk-ab-facts {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  }
  .tk-ab-fact {
    border: 1px solid var(--line-strong); border-radius: 12px;
    background: var(--bg); padding: 22px 22px 20px;
    display: flex; flex-direction: column; gap: 12px;
  }
  .tk-ab-fact-h {
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase;
    display: flex; align-items: center; justify-content: space-between;
  }
  .tk-ab-fact-h .ix { color: var(--accent); }
  .tk-ab-fact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
  .tk-ab-fact-list li {
    font-size: 14.5px; line-height: 1.4; color: var(--ink);
    padding-left: 20px; position: relative;
  }
  .tk-ab-fact-list li::before {
    content: ''; position: absolute; left: 0; top: 8px;
    width: 10px; height: 1px; background: var(--accent);
  }

  @media (max-width: 1024px) {
    .tk-about2 { grid-template-columns: 80px 1fr; gap: 20px; }
    .tk-about2-bento { grid-template-columns: minmax(220px, 280px) 1fr; }
    .tk-ab-photo { min-height: 380px; }
    .tk-ab-lead { padding: 22px 22px 20px; }
    .tk-ab-lead-q { font-size: 18px; }
    .tk-ab-fact { padding: 18px; }
  }
  @media (max-width: 720px) {
    .tk-about2 { grid-template-columns: 1fr; padding: 0 20px; gap: 14px; }
    .tk-about2-bento { grid-template-columns: 1fr; gap: 14px; }
    .tk-ab-photo { grid-row: auto; width: 100%; min-height: 0; aspect-ratio: 4/5; max-height: none; }
    .tk-ab-facts { grid-template-columns: 1fr; }
  }

  /* Contact */
  .tk-contact { padding: var(--pad, 80px) var(--padX, 40px); }
  .tk-contact-box { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; background: var(--panel); }
  .tk-contact-left { padding: 48px 40px; background: var(--ink); color: var(--bg); }
  .tk-contact-left h3 { font-size: clamp(32px, 3.4vw, 48px); letter-spacing: -0.025em; line-height: 1.05; margin: 14px 0 20px; font-weight: 500; }
  .tk-contact-left h3 span { color: var(--accent); }
  .tk-contact-left p { color: #ffffff88; max-width: 380px; font-size: 15px; line-height: 1.55; }
  .tk-contact-left .tk-label::before { background: var(--accent); }
  .tk-contact-left .tk-label { color: #ffffff88; }
  .tk-contact-right { padding: 48px 40px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }

  /* Form */
  .tk-form { display: flex; flex-direction: column; gap: 18px; }
  .tk-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .tk-form-field { display: flex; flex-direction: column; gap: 7px; }
  .tk-form-l {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--muted);
  }
  .tk-form-field input,
  .tk-form-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: var(--bg);
    color: var(--ink);
    font-family: inherit;
    font-size: 14.5px;
    line-height: 1.4;
    letter-spacing: -0.005em;
    transition: border-color 0.15s, background 0.15s;
    resize: vertical;
  }
  .tk-form-field textarea { min-height: 96px; font-family: inherit; }
  .tk-form-field input::placeholder,
  .tk-form-field textarea::placeholder { color: #9b9b96; }
  .tk-form-field input:focus,
  .tk-form-field textarea:focus {
    outline: none;
    border-color: var(--ink);
    background: #fff;
  }
  .tk-form-actions {
    display: flex; align-items: center; gap: 16px;
    margin-top: 4px;
    flex-wrap: wrap;
  }
  .tk-form-actions .tk-btn { width: auto; }
  .tk-form-li {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; color: var(--muted);
    text-decoration: none; letter-spacing: 0.02em;
    display: inline-flex; align-items: center; gap: 8px;
    transition: color 0.15s;
  }
  .tk-form-li:hover { color: var(--accent); }
  .tk-form-li svg { width: 12px; height: 12px; }

  /* Philosophy — mismo tratamiento luminoso del resto de la web */
  .tk-philo { background: var(--bg); color: var(--ink); padding: var(--pad, 100px) var(--padX, 40px); border-bottom: 1px solid var(--line-strong); }
  .tk-philo-label { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.06em; color: var(--accent); margin-bottom: 36px; }
  .tk-philo-quote { font-size: clamp(40px, 5.4vw, 76px); line-height: 1.05; letter-spacing: -0.025em; font-weight: 500; margin: 0 0 64px; max-width: 1100px; color: var(--ink); }
  .tk-philo-quote em { font-style: italic; color: var(--accent); font-weight: 500; }
  .tk-philo-rule { height: 1px; background: var(--line-strong); margin-bottom: 36px; }
  .tk-philo-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; max-width: 1100px; }
  .tk-philo-col h4 { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; font-weight: 500; }
  .tk-philo-col p { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0; max-width: 280px; }
  .tk-c-row { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border: 1px solid var(--line-strong); border-radius: 8px; text-decoration: none; color: inherit; transition: all 0.15s; }
  .tk-c-row:hover { border-color: var(--accent); }
  .tk-c-row-l { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }
  .tk-c-row-v { font-size: 16px; letter-spacing: -0.01em; }
  .tk-c-row svg { width: 14px; height: 14px; color: var(--muted); }

  .tk-foot { display: flex; justify-content: space-between; padding: 20px var(--padX, 40px); font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; border-top: 1px solid var(--line-strong); }

  /* Responsive — tablet */
  @media (max-width: 1024px) {
    .tk-root { font-size: 14.5px; }
    .tk-hero { grid-template-columns: 1fr; }
    .tk-hero-left { border-right: none; border-bottom: 1px solid var(--line-strong); }
    .tk-h1 { font-size: clamp(38px, 6vw, 56px); }
    .tk-section-head { grid-template-columns: 80px 1fr; gap: 20px; }
    .tk-section-title { font-size: clamp(28px, 4.2vw, 38px); }
    .tk-svc-grid { grid-template-columns: repeat(2, 1fr); }
    .tk-svc:nth-child(4n) { border-right: 1px solid var(--line); }
    .tk-svc:nth-child(2n) { border-right: none; }
    .tk-svc:nth-last-child(-n+4) { border-bottom: 1px solid var(--line); }
    .tk-svc:nth-last-child(-n+2) { border-bottom: none; }
    .tk-tl-grid { grid-template-columns: 1fr; }
    .tk-tl-list { border-right: none; border-bottom: 1px solid var(--line); }
    .tk-tl-detail-side { display: none; }
    .tk-tl-collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.42s cubic-bezier(0.22, 1, 0.36, 1); }
    .tk-tl-collapse > .tk-tl-detail-inline { overflow: hidden; opacity: 0; transform: translateY(-4px); transition: opacity 0.32s ease 0.05s, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1); padding: 0 22px; background: #fafaf7; border-bottom: 1px solid transparent; border-left: 2px solid transparent; }
    .tk-tl-collapse.open { grid-template-rows: 1fr; }
    .tk-tl-collapse.open > .tk-tl-detail-inline { opacity: 1; transform: translateY(0); padding: 22px 22px 24px; border-bottom-color: var(--line); border-left-color: var(--accent); transition: opacity 0.36s ease 0.08s, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), padding 0.42s cubic-bezier(0.22, 1, 0.36, 1); }
    .tk-about-grid { grid-template-columns: 80px 1fr; gap: 20px; }
    .tk-about-photo { display: none; }
    .tk-philo-cols { grid-template-columns: repeat(2, 1fr); gap: 32px; }
    .tk-philo-quote { font-size: clamp(32px, 5.5vw, 56px); }
    .tk-contact-box { grid-template-columns: 1fr; }
  }

  /* Responsive — móvil */
  @media (max-width: 640px) {
    .tk-topstrip { padding: 12px 20px; flex-direction: column; gap: 6px; align-items: flex-start; font-size: 10.5px; }
    .tk-head { padding: 16px 20px; align-items: center; flex-wrap: nowrap; gap: 10px; }

    /* Hamburger */
    .tk-burger {
      display: inline-flex; flex-direction: column; justify-content: center;
      gap: 5px; width: 38px; height: 38px;
      background: transparent; border: 1px solid var(--line-strong);
      border-radius: 6px; padding: 0; cursor: pointer;
      align-items: center; margin-left: auto;
      position: relative; z-index: 60;
      transition: border-color 0.15s;
    }
    .tk-burger span {
      display: block; width: 16px; height: 1.5px; background: var(--ink);
      transition: transform 0.25s ease, opacity 0.2s ease;
      transform-origin: center;
    }
    .tk-burger.open { border-color: var(--ink); }
    .tk-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .tk-burger.open span:nth-child(2) { opacity: 0; }
    .tk-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

    /* Mobile drawer */
    .tk-nav {
      position: fixed;
      top: 0; right: 0; bottom: 0; left: 0;
      width: 100vw; height: 100vh; height: 100dvh;
      flex-direction: column; align-items: stretch;
      gap: 0; padding: 80px 0 32px;
      background: var(--bg);
      transform: translateY(-8px); opacity: 0;
      pointer-events: none;
      transition: transform 0.22s ease, opacity 0.18s ease;
      z-index: 55;
      overflow-y: auto;
      box-sizing: border-box;
    }
    .tk-nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .tk-nav a {
      padding: 22px 24px; font-size: 18px;
      border-radius: 0; border-bottom: 1px solid var(--line);
      color: var(--ink); letter-spacing: -0.005em;
      display: flex; justify-content: space-between; align-items: center;
    }
    .tk-nav a:first-child { border-top: 1px solid var(--line); }
    .tk-nav a::after {
      content: '→'; color: var(--muted); font-size: 16px;
    }
    .tk-nav a:hover, .tk-nav a:active { background: transparent; color: var(--accent); }

    .tk-hero-left, .tk-hero-right { padding: 36px 20px; }
    .tk-h1 { font-size: clamp(32px, 8vw, 44px); }
    .tk-lede { font-size: 16px; }
    .tk-ctas { flex-direction: column; align-items: stretch; }
    .tk-btn { justify-content: center; }
    .tk-card-body { font-size: 11px; padding: 14px; overflow-x: auto; }
    .tk-section { padding: 56px 0; }
    .tk-section-head { grid-template-columns: 1fr; gap: 8px; padding: 0 20px; margin-bottom: 28px; }
    .tk-section-title { font-size: clamp(26px, 7vw, 36px); }
    .tk-section-sub { font-size: 14px; }
    .tk-svc-grid { grid-template-columns: 1fr; }
    .tk-svc { border-right: none !important; border-bottom: 1px solid var(--line) !important; min-height: auto; padding: 22px 20px; }
    .tk-svc:last-child { border-bottom: none !important; }
    .tk-timeline { padding: 0 20px; }
    .tk-tl-item { padding: 14px 18px; flex-direction: column; align-items: flex-start; gap: 4px; }
    .tk-tl-detail { padding: 24px 20px; }
    .tk-tl-role { font-size: 18px; }
    .tk-about-grid { grid-template-columns: 1fr; padding: 0 20px; gap: 8px; }
    .tk-about-body p { font-size: 16px; }
    .tk-philo { padding: 56px 20px; }
    .tk-philo-quote { font-size: clamp(26px, 7.5vw, 38px); margin-bottom: 36px; }
    .tk-philo-cols { grid-template-columns: 1fr; gap: 28px; }
    .tk-logo { width: 160px; height: 100px; padding: 0 18px; }
    .tk-logo-svg { max-height: 44px; }
    .tk-contact { padding: 56px 20px; }
    .tk-contact-left, .tk-contact-right { padding: 32px 24px; }
    .tk-contact-left h3 { font-size: clamp(26px, 7vw, 36px); }
    .tk-c-row { padding: 14px 18px; }
    .tk-c-row-v { font-size: 14.5px; }
    .tk-form-row { grid-template-columns: 1fr; gap: 14px; }
    .tk-form-actions { flex-direction: column; align-items: stretch; gap: 12px; }
    .tk-form-actions .tk-btn { justify-content: center; }
    .tk-form-li { justify-content: center; }
    .tk-foot { flex-direction: column; gap: 6px; padding: 20px; font-size: 10.5px; }
  }
`;

// Pipeline visual — 4 stage flow with animated pulse + logo ticker
function HeroPipeline() {
  const steps = [
  {
    label: 'Tienda',
    sub: 'shopify · woo · magento',
    icon: <><rect x="4" y="7" width="16" height="13" rx="1.5" /><path d="M8 7V5a4 4 0 0 1 8 0v2" /></>
  },
  {
    label: 'DATOS',
    sub: 'shopify · woo · magento',
    icon: <><path d="M3 12h4l2-6 4 12 2-6h6" /></>
  },
  {
    label: 'AUTOMATIZACIÓN',
    sub: 'shopify · woo · magento',
    icon: <><circle cx="12" cy="12" r="3" /><path d="M12 4v3M12 17v3M4 12h3M17 12h3M6.3 6.3l2.1 2.1M15.6 15.6l2.1 2.1M6.3 17.7l2.1-2.1M15.6 8.4l2.1-2.1" /></>
  },
  {
    label: 'Cliente',
    sub: 'venta · recurrencia',
    icon: <><circle cx="12" cy="8" r="3.5" /><path d="M5 21c0-3.9 3.1-7 7-7s7 3.1 7 7" /></>
  }];


  const [hot, setHot] = React.useState(0);
  const [pulse, setPulse] = React.useState({ from: 0, t: 0 });

  React.useEffect(() => {
    const i = setInterval(() => {
      setHot((h) => (h + 1) % steps.length);
    }, 1700);
    return () => clearInterval(i);
  }, []);

  React.useEffect(() => {
    let raf;
    let start = performance.now();
    const dur = 1100;
    const from = hot === 0 ? steps.length - 1 : hot - 1;
    const tick = (now) => {
      const u = Math.min(1, (now - start) / dur);
      setPulse({ from, t: u });
      if (u < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [hot]);

  // pulse position: from step `from` to step `from+1`
  // each step occupies 25% of width; column centers at 12.5, 37.5, 62.5, 87.5
  const fromCenter = 12.5 + pulse.from * 25;
  const toCenter = fromCenter + 25;
  const pulseAt = fromCenter + (toCenter - fromCenter) * pulse.t;
  const showPulse = pulse.t > 0 && pulse.t < 1;

  // Detect mobile (vertical layout) so pulse moves top→bottom instead of L→R
  const [isVertical, setIsVertical] = React.useState(false);
  React.useEffect(() => {
    const mq = window.matchMedia('(max-width: 640px)');
    const update = () => setIsVertical(mq.matches);
    update();
    mq.addEventListener ? mq.addEventListener('change', update) : mq.addListener(update);
    return () => {
      mq.removeEventListener ? mq.removeEventListener('change', update) : mq.removeListener(update);
    };
  }, []);

  const pulseStyle = isVertical ?
  { top: `calc(${pulseAt}% - 11px)` } :
  { left: `calc(${pulseAt}% - 11px)` };

  // Ticker items
  const tickerItems = [
  'prestashop', 'magento', 'shopify', 'ga4', 'connectif', 'claude',
  'gemini', 'openai', 'gtm', 'powerbi', 'sistrix', 'screaming frog',
  'semrush', 'search console', 'excel', 'doofinder', 'n8n'];

  const doubled = [...tickerItems, ...tickerItems];

  return (
    <div className="tk-pl-wrap">
      <div className="tk-pl">
        <div className="tk-pl-head">
          <span>flujo · ecommerce</span>
          <span className="tk-pl-live">live</span>
        </div>
        <div className="tk-pl-flow">
          <div className="tk-pl-track"></div>
          {showPulse &&
          <div className="tk-pl-pulse" style={pulseStyle}></div>
          }
          {steps.map((s, i) =>
          <div key={i} className={'tk-pl-step' + (i === hot ? ' hot' : '')}>
              <div className="tk-pl-icon">
                <svg viewBox="0 0 24 24" strokeLinecap="round" strokeLinejoin="round">{s.icon}</svg>
              </div>
              <div className="tk-pl-label">{s.label}</div>
            </div>
          )}
        </div>
        <div className="tk-pl-foot">
          <div>
            <div className="tk-pl-stat-l">Procesos</div>
            <div className="tk-pl-stat-v">+40</div>
          </div>
          <div>
            <div className="tk-pl-stat-l">Stack</div>
            <div className="tk-pl-stat-v">12 herr.</div>
          </div>
          <div>
            <div className="tk-pl-stat-l">Foco</div>
            <div className="tk-pl-stat-v"><span className="acc">VENTAS
</span></div>
          </div>
        </div>
      </div>

      <div className="tk-tic" aria-hidden="true">
        <div className="tk-tic-track">
          {doubled.map((it, i) => <span key={i} className="tk-tic-item">{it}</span>
          )}
        </div>
      </div>
    </div>);

}

function Tech({ density = 'amplia', accent = '#d9521c' }) {
  const P = window.PEPE;
  const [activeExp, setActiveExp] = React.useState(0);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const pad = density === 'compacta' ? 48 : 72;
  const padX = density === 'compacta' ? 28 : 40;
  const current = P.experience[activeExp];

  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => {document.body.style.overflow = '';};
  }, [menuOpen]);

  return (
    <>
      <style>{techStyles}</style>
      <div className="tk-root" style={{ '--pad': pad + 'px', '--padX': padX + 'px', '--accent': accent }}>
        <header className="tk-head">
          <div className="tk-brand"><b>Pepe Ortuno</b><span> - ecommerce
            </span></div>
          <button
            className={'tk-burger' + (menuOpen ? ' open' : '')}
            aria-label="Menú"
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen(!menuOpen)}>

            <span></span><span></span><span></span>
          </button>
          <nav className={'tk-nav' + (menuOpen ? ' open' : '')} onClick={() => setMenuOpen(false)}>
            <a href="#servicios">servicios</a>
            <a href="#experiencia">experiencia</a>
            <a href="#filosofia">filosofía</a>
            <a href="#sobre">sobre mi
</a>
            <a href="#ponencias">ponencias</a>
            <a href="#contacto">contacto</a>
          </nav>
        </header>

        <section className="tk-hero">
          <div className="tk-hero-left">
            <div className="tk-label">// PROFESIONAL ECOMMERCE</div>
            <h1 className="tk-h1">
              Ecommerce, <span className="tk-hl">automatización</span> e <span className="tk-hl">IA</span> aplicada.
            </h1>
            <p className="tk-lede">{P.taglines.tech}</p>
            <div className="tk-ctas">
              <a className="tk-btn prim" href="#contacto">
                Hablar de tu tienda
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
              </a>
              <a className="tk-btn sec" href="#servicios">Ver servicios</a>
            </div>

            <div className="tk-id-row">
              <div className="tk-id-photo"></div>
              <div>
                <div className="tk-id-name">Pepe Ortuño</div>
                <div className="tk-id-role">15+ años en agencias y ecommerces internacionales liderando estrategias de marketing digital y ventas. 

</div>
              </div>
            </div>
          </div>

          <div className="tk-hero-right">
            <HeroPipeline />

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12, marginTop: 18 }}>
              {P.stats.map((s, i) => <div key={i} style={{ border: '1px solid var(--line-strong)', borderRadius: 10, padding: '18px 20px', background: 'var(--panel)' }}>
                  <div style={{ fontSize: 32, letterSpacing: '-0.02em', fontWeight: 500 }}>{s.n}</div>
                  <div className="tk-col-idx" style={{ marginTop: 4 }}>{s.label}</div>
                </div>)}
            </div>
          </div>
        </section>

        <section className="tk-section" id="servicios">
          <div className="tk-section-head">
            <div className="tk-num">02 / servicios</div>
            <div>
              <h2 className="tk-section-title">Ocho frentes en los que puedo ayudarte</h2>
              <p className="tk-section-sub">Cada proyecto tiene unas necesidades concretas. Veamos dónde puedo ayudarte.</p>
            </div>
          </div>
          <div className="tk-svc-grid">
            {P.services.map((s) => <div className="tk-svc" key={s.n}>
                <div className="tk-svc-n">{s.n}</div>
                <div className="tk-svc-t">{s.title}</div>
                <div className="tk-svc-d">{s.desc}</div>
              </div>)}
          </div>
        </section>

        <section className="tk-section" id="experiencia">
          <div className="tk-section-head">
            <div className="tk-num">03 / experiencia</div>
            <div>
              <h2 className="tk-section-title">+15 años entre agencias y en marcas</h2>
              <p className="tk-section-sub">De SEO en los 2000 a liderar ecommerce de grandes retailers. 
Conoce un poco más de mi.</p>
            </div>
          </div>

          <div className="tk-timeline">
            <div className="tk-tl-grid">
              <div className="tk-tl-list">
                {P.experience.map((e, i) => <React.Fragment key={i}>
                    <div className={'tk-tl-item' + (activeExp === i ? ' active' : '')} onClick={() => setActiveExp(i)}>
                      <div className="tk-tl-co">{e.company}</div>
                      <div className="tk-tl-pd">{e.period}</div>
                    </div>
                    <div className={'tk-tl-collapse' + (activeExp === i ? ' open' : '')} aria-hidden={activeExp !== i}>
                      <div className="tk-tl-detail tk-tl-detail-inline">
                        <div className="tk-tl-role">{e.role}</div>
                        <div className="tk-tl-at">@ {e.company}</div>
                        <p className="tk-tl-body">{e.detail}</p>
                      </div>
                    </div>
                  </React.Fragment>
                )}
              </div>
              <div className="tk-tl-detail tk-tl-detail-side">
                <div className="tk-tl-role">{current.role}</div>
                <div className="tk-tl-at">@ {current.company}</div>
                <p className="tk-tl-body">{current.detail}</p>
              </div>
            </div>
          </div>
        </section>

        <section className="tk-philo" id="filosofia">
          <div className="tk-philo-label">[ 04 ] FILOSOFÍA</div>
          <h2 className="tk-philo-quote">El ecommerce no es sólo tecnología. Es <em>entender qué quiere el cliente</em> y ponérselo muy fácil.</h2>
          <div className="tk-philo-rule"></div>
          <div className="tk-philo-cols">
            <div className="tk-philo-col">
              <h4>Datos primero</h4>
              <p>Cada decisión parte de métricas reales. Las intuiciones se validan, no se ejecutan a ciegas.</p>
            </div>
            <div className="tk-philo-col">
              <h4>TECNOLOGÍA AL SERVICIO</h4>
              <p>La tecnología está para ayudarnos, para simplificar nuestras tareas y para poder tomar mejores decisiones.</p>
            </div>
            <div className="tk-philo-col">
              <h4>Ejecución sobre teoría</h4>
              <p>Las estrategias valen lo que se implementa. Prefiero hacer y medir que planificar y esperar.</p>
            </div>
          </div>
        </section>

        <section className="tk-section" id="sobre">
          <div className="tk-section-head">
            <div className="tk-num">05 / sobre mi</div>
            <div>
              <h2 className="tk-section-title">Por qué trabajar conmigo.</h2>
            </div>
          </div>
          <div className="tk-about2">
            <div></div>
            <div className="tk-about2-bento">
              <div className="tk-ab-photo">
              </div>

              <div className="tk-ab-lead">
                <div className="tk-ab-lead-eyebrow">presentación</div>
                <p className="tk-ab-lead-q">
                  Llevo más de <strong>15 años</strong> en digital — desde linkbuilding y SEO en 2010 hasta dirigir equipos de ecommerce en marcas como <strong>Padel Nuestro</strong> y <strong>PcComponentes</strong>.
                </p>
                <p className="tk-ab-lead-q" style={{ fontSize: 'clamp(15px, 1.15vw, 17px)', color: 'var(--muted)', lineHeight: 1.55 }}>
                  Trabajo con marcas que quieren dejar de tropezarse con lo mismo: procesos manuales, datos que no cuadran, equipos saturados. Mi foco es diagnosticar, priorizar y ejecutar.
                </p>
              </div>

              <div className="tk-ab-facts">
                <div className="tk-ab-fact">
                  <div className="tk-ab-fact-h"><span>experiencia</span><span className="ix">01</span></div>
                  <ul className="tk-ab-fact-list">
                    <li>Dirección ecommerce en marcas líderes</li>
                    <li>Equipos multidisciplinares (dev · marketing · ops)</li>
                    <li>Agenica,  startup y empresas internacionales</li>
                  </ul>
                </div>
                <div className="tk-ab-fact">
                  <div className="tk-ab-fact-h"><span>cómo trabajo</span><span className="ix">02</span></div>
                  <ul className="tk-ab-fact-list">
                    <li>Diagnóstico antes que opinión</li>
                    <li>Ejecutar &gt; planificar y esperar</li>
                    <li>Datos, ROI y decisiones medibles</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="tk-section">
          <div className="tk-section-head">
            <div className="tk-num">06 / clientes</div>
            <div>
              <h2 className="tk-section-title">Empresas  en las que he trabajado.</h2>
              <p className="tk-section-sub">De retailers líderes a startups. Un puñado de nombres de los últimos 15 años.</p>
            </div>
          </div>
          <ClientsCarousel />
        </section>

        <Ponencias />

        <section className="tk-contact" id="contacto">
          <div className="tk-contact-box">
            <div className="tk-contact-left">
              <div className="tk-label">08 / contacto</div>
              <h3>¿Listo para que tu ecommerce <span>funcione mejor</span>?</h3>
              <p>Una llamada de 30 min, te digo si te puedo ayudar. Si no, te oriento igual. Sin compromiso.</p>
            </div>
            <div className="tk-contact-right">
              <ContactForm linkedin={P.linkedin} />
            </div>
          </div>
        </section>

        <footer className="tk-foot">
          <div>© 2026 · Pepe Ortuño</div>
          <div>HECHO CON CARIÑO DESDE MURCIA</div>
        </footer>
      </div>
    </>);

}

window.Tech = Tech;