^^&&^^

Edit File: reporte_dinamo_3_cuestionarios.html

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reporte Estratégico · dínamo · Diagnóstico Operativo & IA</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,800;0,9..144,900;1,9..144,400&family=JetBrains+Mono:wght@400;500;700&family=Inter+Tight:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
  :root {
    --ink: #0E0E0C;
    --paper: #F4F1EA;
    --cream: #EFEAE0;
    --bone: #E8E1D2;
    --accent: #FF4D1F;       /* naranja dínamo */
    --accent-2: #1B4D3E;     /* verde profundo */
    --accent-3: #D4A017;     /* mostaza */
    --muted: #6B6657;
    --line: #1a1a17;
    --hl: #FFE9B0;
    --shadow: 0 1px 0 rgba(0,0,0,0.06), 0 12px 32px -16px rgba(14,14,12,0.18);
  }

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-weight: 400;
    line-height: 1.55;
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

/* paper texture overlay */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
      radial-gradient(circle at 25% 12%, rgba(0,0,0,0.025) 0, transparent 50%),
      radial-gradient(circle at 75% 80%, rgba(255,77,31,0.04) 0, transparent 50%);
    z-index: 1;
  }

.wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
    position: relative;
    z-index: 2;
  }

/* ---------- top bar ---------- */
  .topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    border-bottom: 1px solid var(--line);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--paper);
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(6px);
  }
  .topbar-left { display:flex; gap: 28px; align-items: center; }
  .topbar .logo {
    display:flex; align-items:center; gap:10px;
    font-weight: 700;
  }
  .logo-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(255,77,31,0.18);
  }
  .topbar nav { display:flex; gap: 22px; }
  .topbar nav a { color: var(--muted); text-decoration: none; transition: color .2s; }
  .topbar nav a:hover { color: var(--accent); }
  .topbar .date { color: var(--muted); }

/* ---------- HERO ---------- */
  .hero {
    padding: 96px 0 80px;
    border-bottom: 1px solid var(--line);
    position: relative;
  }
  .hero .eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 32px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .eyebrow::before {
    content: "";
    width: 32px; height: 1px;
    background: var(--accent);
  }
  .hero h1 {
    font-family: 'Fraunces', serif;
    font-weight: 400;
    font-size: clamp(48px, 7.5vw, 104px);
    line-height: 0.92;
    letter-spacing: -0.035em;
    margin: 0 0 32px;
    font-variation-settings: "opsz" 144;
  }
  .hero h1 em {
    font-style: italic;
    font-weight: 300;
    color: var(--accent);
  }
  .hero h1 .marker {
    background: linear-gradient(180deg, transparent 60%, var(--hl) 60%, var(--hl) 92%, transparent 92%);
    padding: 0 4px;
  }
  .hero .lede {
    font-family: 'Fraunces', serif;
    font-weight: 300;
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.5;
    max-width: 720px;
    color: var(--ink);
    margin-bottom: 48px;
  }

.hero-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-top: 40px;
  }
  .hero-meta > div {
    padding: 24px 28px;
    border-right: 1px solid var(--line);
  }
  .hero-meta > div:last-child { border-right: none; }
  .hero-meta .k {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px;
  }
  .hero-meta .v {
    font-family: 'Fraunces', serif;
    font-size: 36px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .hero-meta .v small {
    font-family: 'Inter Tight', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--muted);
    margin-left: 6px;
    letter-spacing: 0;
  }

/* big decorative number in hero */
  .hero .stamp {
    position: absolute;
    top: 110px;
    right: -20px;
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-style: italic;
    font-size: 280px;
    line-height: 0.8;
    color: var(--accent);
    opacity: 0.06;
    pointer-events: none;
    user-select: none;
  }

/* ---------- TOC ---------- */
  .toc {
    padding: 64px 0;
    border-bottom: 1px solid var(--line);
  }
  .section-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .section-tag .num {
    color: var(--accent);
    font-weight: 700;
  }
  .toc-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    margin-top: 32px;
    border-top: 1px solid var(--line);
  }
  .toc-grid a {
    display: block;
    padding: 28px 22px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink);
    transition: background .3s, color .3s;
    position: relative;
  }
  .toc-grid a:last-child { border-right: none; }
  .toc-grid a:hover { background: var(--ink); color: var(--paper); }
  .toc-grid a:hover .toc-num { color: var(--accent); }
  .toc-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.16em;
    transition: color .3s;
  }
  .toc-title {
    font-family: 'Fraunces', serif;
    font-size: 20px;
    line-height: 1.15;
    margin-top: 24px;
    letter-spacing: -0.015em;
  }

/* ---------- SECTIONS ---------- */
  section.block {
    padding: 96px 0;
    border-bottom: 1px solid var(--line);
  }
  section.block h2 {
    font-family: 'Fraunces', serif;
    font-weight: 400;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 0.98;
    letter-spacing: -0.025em;
    margin: 8px 0 48px;
    max-width: 900px;
  }
  section.block h2 em {
    font-style: italic;
    color: var(--accent);
    font-weight: 300;
  }
  section.block h3 {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.2;
    margin: 32px 0 14px;
    letter-spacing: -0.01em;
  }
  section.block p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    max-width: 760px;
  }
  section.block p.lead {
    font-family: 'Fraunces', serif;
    font-weight: 300;
    font-size: 22px;
    line-height: 1.45;
    max-width: 820px;
    margin-bottom: 36px;
  }

.pull-quote {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 28px;
    line-height: 1.3;
    color: var(--ink);
    border-left: 3px solid var(--accent);
    padding: 8px 0 8px 28px;
    margin: 36px 0;
    max-width: 760px;
    letter-spacing: -0.01em;
  }
  .pull-quote cite {
    display: block;
    margin-top: 14px;
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
  }

/* ---------- 2-col layout ---------- */
  .two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
  }

/* ---------- AREA CARDS ---------- */
  .area-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--line);
    margin-top: 24px;
  }
  .area-card {
    padding: 28px 24px;
    border-right: 1px solid var(--line);
    background: var(--paper);
    position: relative;
    transition: background .3s;
  }
  .area-card:last-child { border-right: none; }
  .area-card:hover { background: var(--cream); }
  .area-card .badge {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 2px;
    margin-bottom: 16px;
  }
  .area-card.web .badge { background: var(--accent-2); color: var(--paper); }
  .area-card.design .badge { background: var(--accent); color: var(--paper); }
  .area-card.com .badge { background: var(--accent-3); color: var(--ink); }
  .area-card.pm .badge { background: var(--ink); color: var(--paper); }
  .area-card.sales .badge { background: #8B5CF6; color: var(--paper); }
  .area-card h4 {
    font-family: 'Fraunces', serif;
    font-size: 28px;
    font-weight: 500;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
  }
  .area-card .count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 16px;
  }
  .area-card ul {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13.5px;
    line-height: 1.55;
  }
  .area-card ul li {
    padding: 6px 0;
    border-bottom: 1px dashed rgba(0,0,0,0.1);
  }
  .area-card ul li:last-child { border-bottom: none; }
  .area-card ul li strong { font-weight: 600; }

/* ---------- HEATMAP / tool usage ---------- */
  .heatmap {
    border: 1px solid var(--line);
    margin-top: 24px;
    overflow: hidden;
  }
  .heat-row {
    display: grid;
    grid-template-columns: 180px 1fr 90px;
    border-bottom: 1px solid var(--line);
    align-items: stretch;
  }
  .heat-row:last-child { border-bottom: none; }
  .heat-row.header {
    background: var(--ink);
    color: var(--paper);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .heat-row.header > div { padding: 14px 18px; }
  .heat-row .name {
    padding: 18px;
    font-family: 'Fraunces', serif;
    font-size: 17px;
    font-weight: 500;
    border-right: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .heat-row .role-dot {
    width: 6px; height: 6px; border-radius: 50%;
  }
  .role-dot.web { background: var(--accent-2); }
  .role-dot.design { background: var(--accent); }
  .role-dot.com { background: var(--accent-3); }
  .role-dot.pm { background: var(--ink); }
  .role-dot.sales { background: #8B5CF6; }
  .role-dot.ceo { background: #c33; }

.heat-bars {
    display: flex;
    height: 100%;
    align-items: stretch;
  }
  .heat-bars .bar {
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: var(--paper);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    transition: filter .2s;
  }
  .heat-bars .bar:hover { filter: brightness(0.85); cursor: default; }
  .b-claude { background: #C2410C; }
  .b-adobe { background: #1B4D3E; }
  .b-google { background: #D4A017; color: var(--ink); }
  .b-gemini { background: #4F46E5; }
  .b-chatgpt { background: #059669; }
  .b-excel { background: #166534; }
  .b-capcut { background: #7C2D12; }
  .b-other { background: #4B5563; }
  .b-wp { background: #0F766E; }
  .b-teams { background: #1E40AF; }
  .b-office { background: #6B7280; }
  .b-code { background: #18181B; }

.heat-row .total {
    padding: 18px;
    border-left: 1px solid var(--line);
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
  }

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 20px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .legend span::before {
    content: "";
    width: 10px; height: 10px;
    display: inline-block;
  }
  .legend .l-claude::before { background: #C2410C; }
  .legend .l-adobe::before { background: #1B4D3E; }
  .legend .l-google::before { background: #D4A017; }
  .legend .l-gemini::before { background: #4F46E5; }
  .legend .l-chatgpt::before { background: #059669; }
  .legend .l-capcut::before { background: #7C2D12; }
  .legend .l-wp::before { background: #0F766E; }
  .legend .l-teams::before { background: #1E40AF; }
  .legend .l-office::before { background: #6B7280; }
  .legend .l-code::before { background: #18181B; }
  .legend .l-other::before { background: #4B5563; }
  .legend .l-excel::before { background: #166534; }

/* ---------- TASK / FRICTION TABLE ---------- */
  .table-strip {
    margin-top: 28px;
    border: 1px solid var(--line);
  }
  .strip-row {
    display: grid;
    grid-template-columns: 60px 1.4fr 1fr 1.3fr 100px;
    border-bottom: 1px solid var(--line);
    align-items: stretch;
  }
  .strip-row:last-child { border-bottom: none; }
  .strip-row > div {
    padding: 18px 16px;
    border-right: 1px solid var(--line);
    font-size: 13.5px;
    line-height: 1.45;
  }
  .strip-row > div:last-child { border-right: none; }
  .strip-row.header {
    background: var(--ink);
    color: var(--paper);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .strip-row.header > div { padding: 14px 16px; }
  .strip-row .rank {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 32px;
    font-weight: 400;
    color: var(--accent);
    text-align: center;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .strip-row .task {
    font-family: 'Fraunces', serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  .strip-row .priority {
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .priority.high { background: var(--accent); color: var(--paper); }
  .priority.med { background: var(--accent-3); color: var(--ink); }
  .priority.low { background: var(--bone); color: var(--ink); }

/* ---------- MATURITY GAUGE ---------- */
  .maturity {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    margin-top: 32px;
    align-items: start;
  }
  .gauge {
    border: 1px solid var(--line);
    padding: 36px 32px;
    background: var(--cream);
  }
  .gauge .gauge-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 24px;
  }
  .gauge .gauge-value {
    font-family: 'Fraunces', serif;
    font-size: 96px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--ink);
    margin-bottom: 8px;
  }
  .gauge .gauge-value sup {
    font-size: 28px;
    color: var(--accent);
    font-style: italic;
    font-weight: 300;
    vertical-align: super;
  }
  .gauge .gauge-desc {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 17px;
    line-height: 1.4;
    color: var(--muted);
    margin-bottom: 28px;
  }
  .gauge-bar {
    height: 8px;
    background: var(--bone);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
  }
  .gauge-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-3));
    border-radius: 4px;
  }
  .gauge-scale {
    display: flex;
    justify-content: space-between;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
  }

.maturity-levels {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--line);
  }
  .ml-row {
    display: grid;
    grid-template-columns: 80px 1fr 100px;
    border-bottom: 1px solid var(--line);
    padding: 18px 20px;
    align-items: center;
    gap: 18px;
  }
  .ml-row:last-child { border-bottom: none; }
  .ml-row .ml-level {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .ml-row .ml-name {
    font-family: 'Fraunces', serif;
    font-size: 16px;
    font-weight: 500;
  }
  .ml-row .ml-name small {
    display: block;
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px;
    color: var(--muted);
    font-weight: 400;
    margin-top: 4px;
  }
  .ml-row .ml-pct {
    text-align: right;
    font-family: 'Fraunces', serif;
    font-size: 22px;
    font-weight: 500;
    color: var(--accent);
  }

/* ---------- INSIGHT CARDS ---------- */
  .insights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 32px;
  }
  .insight-card {
    border: 1px solid var(--line);
    padding: 36px 32px;
    background: var(--paper);
    position: relative;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s;
  }
  .insight-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
  }
  .insight-card.featured {
    background: var(--ink);
    color: var(--paper);
    grid-column: span 2;
  }
  .insight-card.featured .insight-num { color: var(--accent); }
  .insight-card.featured .insight-meta { color: rgba(244,241,234,0.6); border-color: rgba(244,241,234,0.2); }
  .insight-card.featured h3 { color: var(--paper); }
  .insight-card.featured .insight-action { color: var(--paper); border-color: rgba(244,241,234,0.3); }
  .insight-card.featured .insight-action::before { background: var(--accent); }
  .insight-num {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 64px;
    line-height: 1;
    color: var(--accent);
    margin-bottom: 16px;
  }
  .insight-meta {
    display: flex;
    gap: 20px;
    padding-bottom: 12px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--line);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .insight-card h3 {
    font-family: 'Fraunces', serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0 0 16px;
    color: var(--ink);
  }
  .insight-card.featured h3 {
    font-size: 38px;
    line-height: 1.05;
  }
  .insight-card p {
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 20px;
  }
  .insight-action {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px dashed rgba(0,0,0,0.15);
    font-size: 14px;
    line-height: 1.5;
    position: relative;
    padding-left: 22px;
  }
  .insight-action::before {
    content: "▸";
    position: absolute;
    left: 0;
    top: 17px;
    color: var(--accent);
    font-size: 14px;
  }
  .insight-action strong {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
    font-weight: 700;
  }

/* ---------- friction list ---------- */
  .friction-list {
    margin-top: 28px;
  }
  .friction-item {
    display: grid;
    grid-template-columns: 90px 1.2fr 1.4fr;
    gap: 28px;
    padding: 28px 0;
    border-top: 1px solid var(--line);
    align-items: start;
  }
  .friction-item:last-child { border-bottom: 1px solid var(--line); }
  .friction-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--muted);
  }
  .friction-problem {
    font-family: 'Fraunces', serif;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -0.015em;
  }
  .friction-problem small {
    display: block;
    font-family: 'Inter Tight', sans-serif;
    font-size: 13px;
    color: var(--muted);
    font-weight: 400;
    margin-top: 8px;
    line-height: 1.5;
  }
  .friction-solve {
    font-size: 14.5px;
    line-height: 1.6;
    padding: 16px 18px;
    background: var(--cream);
    border-left: 3px solid var(--accent);
  }
  .friction-solve strong {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
  }

/* ---------- footer ---------- */
  footer {
    padding: 80px 0 60px;
    background: var(--ink);
    color: var(--paper);
  }
  footer .wrap { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
  footer h5 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(244,241,234,0.5);
    margin: 0 0 16px;
    font-weight: 400;
  }
  footer .big {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 42px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--paper);
  }
  footer .small {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(244,241,234,0.7);
  }
  footer ul { list-style: none; padding: 0; margin: 0; font-size: 13px; line-height: 2; }
  footer ul li { color: rgba(244,241,234,0.7); }
  footer .seal {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid rgba(244,241,234,0.15);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(244,241,234,0.4);
    display: flex;
    justify-content: space-between;
  }

/* ---------- micro animations ---------- */
  @keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .hero h1, .hero .lede, .hero-meta, .hero .eyebrow {
    animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .hero .eyebrow { animation-delay: 0.05s; }
  .hero h1 { animation-delay: 0.15s; }
  .hero .lede { animation-delay: 0.35s; }
  .hero-meta { animation-delay: 0.5s; }

/* responsive */
  @media (max-width: 980px) {
    .wrap { padding: 0 24px; }
    .topbar { padding: 18px 24px; }
    .topbar nav { display: none; }
    .hero { padding: 64px 0 56px; }
    .hero-meta { grid-template-columns: repeat(2, 1fr); }
    .hero-meta > div:nth-child(2) { border-right: none; }
    .hero-meta > div:nth-child(1), .hero-meta > div:nth-child(2) { border-bottom: 1px solid var(--line); }
    .hero .stamp { font-size: 140px; top: 60px; right: 0; }
    .toc-grid { grid-template-columns: repeat(2, 1fr); }
    .toc-grid a:nth-child(odd) { border-right: 1px solid var(--line); }
    .two-col, .maturity, .insights { grid-template-columns: 1fr; gap: 32px; }
    .insight-card.featured { grid-column: span 1; }
    .area-grid { grid-template-columns: 1fr 1fr; }
    .area-card:nth-child(2) { border-right: none; }
    .area-card:nth-child(1), .area-card:nth-child(2) { border-bottom: 1px solid var(--line); }
    .heat-row { grid-template-columns: 110px 1fr 60px; }
    .heat-row .name { font-size: 14px; padding: 12px; }
    .strip-row { grid-template-columns: 40px 1fr 1fr; }
    .strip-row .priority, .strip-row > div:nth-child(4) { display: none; }
    .friction-item { grid-template-columns: 1fr; gap: 12px; }
    footer .wrap { grid-template-columns: 1fr; }
  }
</style>
</head>
<body>

<div class="topbar">
  <div class="topbar-left">
    <div class="logo"><span class="logo-dot"></span> dínamo <span style="color:var(--muted);font-weight:400;">// reporte interno</span></div>
  </div>
  <nav>
    <a href="#mapa">01 Mapa</a>
    <a href="#patrones">02 Patrones</a>
    <a href="#fricciones">03 Fricciones</a>
    <a href="#madurez">04 IA</a>
    <a href="#insights">05 Insights</a>
  </nav>
  <div class="date">v.01 · Q4 2025</div>
</div>

<header class="hero">
  <div class="wrap">
    <div class="stamp">14</div>
    <div class="eyebrow">Diagnóstico Operativo · IA · Procesos</div>
    <h1>
      Donde se acumula el <em>tiempo</em>,<br>
      donde se gana la <span class="marker">velocidad</span>.
    </h1>
    <p class="lede">
      Síntesis cruzada de los tres cuestionarios aplicados al equipo. Auditoría de herramientas, dominio individual de la IA y mapeo de tareas repetitivas — leídos en conjunto para encontrar los cuellos de botella reales, las brechas de conocimiento y las palancas inmediatas de optimización.
    </p>

<div class="hero-meta">
      <div>
        <div class="k">Integrantes analizados</div>
        <div class="v">14 <small>/ 5 áreas</small></div>
      </div>
      <div>
        <div class="k">Tarea repetitiva #1</div>
        <div class="v">Parrillas <small>citada 8×</small></div>
      </div>
      <div>
        <div class="k">Freno principal</div>
        <div class="v">Tiempo <small>+ costo</small></div>
      </div>
      <div>
        <div class="k">Madurez IA del equipo</div>
        <div class="v">38<sup style="font-size:22px;color:var(--accent);">%</sup> <small>nivel medio</small></div>
      </div>
    </div>
  </div>
</header>

<section class="toc">
  <div class="wrap">
    <div class="section-tag"><span class="num">[ Índice ]</span> · Navegación del reporte</div>
    <div class="toc-grid">
      <a href="#mapa">
        <div class="toc-num">01</div>
        <div class="toc-title">Mapa operativo<br>actual</div>
      </a>
      <a href="#patrones">
        <div class="toc-num">02</div>
        <div class="toc-title">Patrones<br>por área</div>
      </a>
      <a href="#fricciones">
        <div class="toc-num">03</div>
        <div class="toc-title">Fricciones &<br>automatización</div>
      </a>
      <a href="#madurez">
        <div class="toc-num">04</div>
        <div class="toc-title">Diagnóstico<br>de IA</div>
      </a>
      <a href="#insights">
        <div class="toc-num">05</div>
        <div class="toc-title">Recomendaciones<br>accionables</div>
      </a>
    </div>
  </div>
</section>

<section class="block" id="mapa">
  <div class="wrap">
    <div class="section-tag"><span class="num">01</span> · Síntesis general</div>
    <h2>Un equipo que <em>ya</em> usa IA, pero todavía no la <em>domina</em>.</h2>

<p class="lead">
      dínamo opera con un stack heterogéneo: tres polos de IA conversacional (Claude, Gemini, ChatGPT), un núcleo creativo Adobe + CapCut, un núcleo web WordPress + editores con IA, y una capa administrativa Excel/SAT/ClickUp. La adopción de IA es transversal — 12 de 14 integrantes la usan a diario — pero el dominio técnico está concentrado en 2-3 personas. El resto convive con la herramienta sin entender por qué funciona o por qué falla, lo que genera reintentos, desconfianza intermitente y subutilización.
    </p>

<div class="pull-quote">
      "Le tenías que repetir mucho las cosas para que te las entregara bien… empezaba a tardarse muchísimo, haciendo que me tarde más en entregar."
      <cite>— Andrea, PM · sobre Gemini y ChatGPT</cite>
    </div>

<h3>Composición del equipo</h3>
    <div class="area-grid">
      <div class="area-card design">
        <span class="badge">Diseño</span>
        <h4>4</h4>
        <div class="count">Jio · Sergio · Pablo · Aksel</div>
        <ul>
          <li><strong>Stack:</strong> Adobe (40-50%), CapCut (30-50%), IA (20%)</li>
          <li><strong>Tarea fija:</strong> Edición de parrillas</li>
          <li><strong>IA:</strong> Curiosidad alta, adopción tímida</li>
        </ul>
      </div>
      <div class="area-card com">
        <span class="badge">Comunicación</span>
        <h4>3</h4>
        <div class="count">Ame · Edu · Seth (CEO)</div>
        <ul>
          <li><strong>Stack:</strong> Claude + Google Ads + Office</li>
          <li><strong>Tarea fija:</strong> Parrillas + revisión de campañas</li>
          <li><strong>IA:</strong> Adopción alta, dominio medio</li>
        </ul>
      </div>
      <div class="area-card pm">
        <span class="badge">PM</span>
        <h4>3</h4>
        <div class="count">Aiko · Andrea · Victor</div>
        <ul>
          <li><strong>Stack:</strong> Teams + ClickUp + Claude</li>
          <li><strong>Tarea fija:</strong> Mensajes mensuales, parrillas, copys</li>
          <li><strong>IA:</strong> Uso utilitario, baja personalización</li>
        </ul>
      </div>
      <div class="area-card web">
        <span class="badge">Web</span>
        <h4>3</h4>
        <div class="count">Ramses · Francisco · Dani</div>
        <ul>
          <li><strong>Stack:</strong> WordPress, Claude Code, terminal</li>
          <li><strong>Tarea fija:</strong> Mantenimiento + conversiones</li>
          <li><strong>IA:</strong> Dominio técnico avanzado</li>
        </ul>
      </div>
    </div>

<h3 style="margin-top:48px;">Mapa de calor: distribución del tiempo por herramienta</h3>
    <p style="font-size:14px; color: var(--muted); max-width: 760px;">
      Porcentajes auto-reportados en el Cuestionario 3. Cada fila es un integrante; el ancho de cada bloque representa qué tanto de su día consume cada herramienta. Se observa concentración en 2-3 herramientas por persona, con IA presente en casi todos los stacks.
    </p>

<div class="heatmap">
      <div class="heat-row header">
        <div>Integrante</div>
        <div>Distribución diaria (% del tiempo)</div>
        <div>Área</div>
      </div>

<div class="heat-row">
        <div class="name"><span class="role-dot design"></span> Jio</div>
        <div class="heat-bars">
          <div class="bar b-adobe" style="width:50%">Illustrator 50%</div>
          <div class="bar b-adobe" style="width:35%; filter: brightness(1.2);">Photoshop 35%</div>
          <div class="bar b-capcut" style="width:15%">Edit 15%</div>
        </div>
        <div class="total">Diseño</div>
      </div>

<div class="heat-row">
        <div class="name"><span class="role-dot design"></span> Sergio</div>
        <div class="heat-bars">
          <div class="bar b-adobe" style="width:40%">Adobe 40%</div>
          <div class="bar b-capcut" style="width:40%">CapCut 40%</div>
          <div class="bar b-claude" style="width:20%">IA 20%</div>
        </div>
        <div class="total">Diseño</div>
      </div>

<div class="heat-row">
        <div class="name"><span class="role-dot design"></span> Pablo</div>
        <div class="heat-bars">
          <div class="bar b-adobe" style="width:50%">Adobe 50%</div>
          <div class="bar b-capcut" style="width:30%">CapCut 30%</div>
          <div class="bar b-claude" style="width:20%">IA 20%</div>
        </div>
        <div class="total">Diseño</div>
      </div>

<div class="heat-row">
        <div class="name"><span class="role-dot design"></span> Aksel</div>
        <div class="heat-bars">
          <div class="bar b-other" style="width:40%">Internet 40%</div>
          <div class="bar b-capcut" style="width:35%">CapCut 35%</div>
          <div class="bar b-other" style="width:25%; filter:brightness(1.3);">Canva 25%</div>
        </div>
        <div class="total">Diseño</div>
      </div>

<div class="heat-row">
        <div class="name"><span class="role-dot com"></span> Ame</div>
        <div class="heat-bars">
          <div class="bar b-google" style="width:50%">Google Ads 50%</div>
          <div class="bar b-claude" style="width:30%">Claude 30%</div>
          <div class="bar b-office" style="width:20%">Office 20%</div>
        </div>
        <div class="total">Comunicación</div>
      </div>

<div class="heat-row">
        <div class="name"><span class="role-dot com"></span> Edu</div>
        <div class="heat-bars">
          <div class="bar b-claude" style="width:40%">Claude 40%</div>
          <div class="bar b-chatgpt" style="width:30%">ChatGPT 30%</div>
          <div class="bar b-gemini" style="width:30%">Gemini 30%</div>
        </div>
        <div class="total">Comunicación</div>
      </div>

<div class="heat-row">
        <div class="name"><span class="role-dot ceo"></span> Seth</div>
        <div class="heat-bars">
          <div class="bar b-claude" style="width:40%">Claude ~40%</div>
          <div class="bar b-google" style="width:30%">Google Ads 30%</div>
          <div class="bar b-teams" style="width:30%">Teams + IAs 30%</div>
        </div>
        <div class="total">CEO</div>
      </div>

<div class="heat-row">
        <div class="name"><span class="role-dot pm"></span> Aiko</div>
        <div class="heat-bars">
          <div class="bar b-teams" style="width:50%">Teams 50%</div>
          <div class="bar b-other" style="width:30%">WhatsApp 30%</div>
          <div class="bar b-other" style="width:20%; filter:brightness(1.3)">ClickUp 20%</div>
        </div>
        <div class="total">PM</div>
      </div>

<div class="heat-row">
        <div class="name"><span class="role-dot pm"></span> Andrea</div>
        <div class="heat-bars">
          <div class="bar b-google" style="width:50%">Google Ads 50%</div>
          <div class="bar b-claude" style="width:35%">Claude 35%</div>
          <div class="bar b-office" style="width:15%">Office 15%</div>
        </div>
        <div class="total">PM</div>
      </div>

<div class="heat-row">
        <div class="name"><span class="role-dot pm"></span> Victor</div>
        <div class="heat-bars">
          <div class="bar b-office" style="width:50%">Word 50%</div>
          <div class="bar b-google" style="width:30%">Google Ads 30%</div>
          <div class="bar b-claude" style="width:20%">Claude 20%</div>
        </div>
        <div class="total">PM</div>
      </div>

<div class="heat-row">
        <div class="name"><span class="role-dot web"></span> Ramses</div>
        <div class="heat-bars">
          <div class="bar b-code" style="width:50%">Zed + Terminal 50%</div>
          <div class="bar b-claude" style="width:25%">Claude Code 25%</div>
          <div class="bar b-teams" style="width:25%">Teams 25%</div>
        </div>
        <div class="total">Web</div>
      </div>

<div class="heat-row">
        <div class="name"><span class="role-dot web"></span> Francisco</div>
        <div class="heat-bars">
          <div class="bar b-wp" style="width:60%">WordPress 60%</div>
          <div class="bar b-teams" style="width:30%">Teams 30%</div>
          <div class="bar b-claude" style="width:10%">Claude 10%</div>
        </div>
        <div class="total">Web</div>
      </div>

<div class="heat-row">
        <div class="name"><span class="role-dot web"></span> Dani</div>
        <div class="heat-bars">
          <div class="bar b-gemini" style="width:40%">Gemini 40%</div>
          <div class="bar b-claude" style="width:40%">Claude 40%</div>
          <div class="bar b-code" style="width:20%">Antigravity 20%</div>
        </div>
        <div class="total">Web</div>
      </div>

<div class="heat-row">
        <div class="name"><span class="role-dot sales"></span> Gaby</div>
        <div class="heat-bars">
          <div class="bar b-excel" style="width:60%">Excel 60%</div>
          <div class="bar b-other" style="width:20%; filter:brightness(0.9)">SAT 20%</div>
          <div class="bar b-office" style="width:15%">Office 15%</div>
          <div class="bar b-other" style="width:5%; filter:brightness(1.3)">CU 5%</div>
        </div>
        <div class="total">Ventas/Adm</div>
      </div>
    </div>

<div class="legend">
      <span class="l-claude">Claude</span>
      <span class="l-gemini">Gemini</span>
      <span class="l-chatgpt">ChatGPT</span>
      <span class="l-google">Google Ads</span>
      <span class="l-adobe">Adobe</span>
      <span class="l-capcut">CapCut</span>
      <span class="l-wp">WordPress</span>
      <span class="l-teams">Teams</span>
      <span class="l-office">Office/Word</span>
      <span class="l-code">Editor de código</span>
      <span class="l-excel">Excel</span>
      <span class="l-other">Otros</span>
    </div>
  </div>
</section>

<section class="block" id="patrones">
  <div class="wrap">
    <div class="section-tag"><span class="num">02</span> · Patrones cruzados</div>
    <h2>Lo que se <em>repite</em> en toda la agencia, y lo que es <em>solo</em> de cada área.</h2>

<div class="two-col">
      <div>
        <h3>Patrones globales (toda la agencia)</h3>
        <p style="font-size:15px;">Tres dinámicas comunes atraviesan las cuatro áreas:</p>
        <ul style="font-size:15px; line-height:1.7; padding-left:20px;">
          <li><strong>La "parrilla" es el ritual mensual.</strong> Comunicación, PM y Diseño la mencionan como la tarea más repetitiva. Es un proceso lineal: copy → arte → revisión → publicación. Ningún área lo describe como automatizado.</li>
          <li><strong>Claude se está volviendo el LLM por default.</strong> 11 de 14 lo usan; varios (Jio, Pablo, Aksel) lo tienen "en el radar" para empezar. Solo dos lo han abandonado.</li>
          <li><strong>El freno principal NO es técnico, es de gestión:</strong> "falta de tiempo para explorar" aparece en 6 respuestas; "no tener versiones de paga" en 4.</li>
        </ul>

<h3 style="margin-top:36px;">Patrones por área (exclusivos)</h3>
        <ul style="font-size:15px; line-height:1.7; padding-left:20px;">
          <li><strong>Web</strong> es la única área con dominio técnico real: hablan de ventana de contexto, archivos `.md` para alimentar la IA, alucinaciones como concepto, vectores semánticos. Ramses y Dani están en otra liga.</li>
          <li><strong>Diseño</strong> usa IA periférica (20% del tiempo máximo) y muy concentrada en generar elementos puntuales — no como flujo principal. Hay interés explícito en Magnific, Adobe Firefly, integración Canva–IA.</li>
          <li><strong>Comunicación</strong> es la mayor consumidora de IA conversacional (Claude ≥30% en 3 de 3 personas) y la más expuesta a frustración cuando la IA "se atora".</li>
          <li><strong>Ventas/Adm</strong> es el área <em>más analógica</em>: 0% de IA en el stack diario de Gaby. Excel + SAT + correo concentran 95% del trabajo.</li>
        </ul>
      </div>

<div>
        <h3>Tareas repetitivas — ranking cruzado</h3>
        <p style="font-size:15px;">Frecuencia con la que cada tarea fue mencionada como "lo más repetitivo" por el equipo.</p>

<div class="table-strip">
          <div class="strip-row header">
            <div>#</div>
            <div>Tarea</div>
            <div>Quién la reporta</div>
            <div>Frecuencia</div>
            <div>Auto.</div>
          </div>

<div class="strip-row">
            <div class="rank">1</div>
            <div class="task">Parrillas de contenido<br><small style="font-weight:400; font-family:'Inter Tight',sans-serif; font-size:12px; color:var(--muted);">Edición, copy, calendarización</small></div>
            <div>Ame, Edu, Jio, Sergio, Pablo, Andrea, Victor, Seth</div>
            <div class="priority high">Alta</div>
          </div>
          <div class="strip-row">
            <div class="rank">2</div>
            <div class="task">Revisión de campañas<br><small style="font-weight:400; font-family:'Inter Tight',sans-serif; font-size:12px; color:var(--muted);">Google Ads + conversiones</small></div>
            <div>Seth, Andrea, Francisco, Dani</div>
            <div class="priority high">Alta</div>
          </div>
          <div class="strip-row">
            <div class="rank">3</div>
            <div class="task">Mantenimiento de sitios<br><small style="font-weight:400; font-family:'Inter Tight',sans-serif; font-size:12px; color:var(--muted);">WordPress, servidores</small></div>
            <div>Ramses, Francisco</div>
            <div class="priority med">Media</div>
          </div>
          <div class="strip-row">
            <div class="rank">4</div>
            <div class="task">Búsqueda de stock<br><small style="font-weight:400; font-family:'Inter Tight',sans-serif; font-size:12px; color:var(--muted);">Imágenes, música, tipografía</small></div>
            <div>Pablo</div>
            <div class="priority med">Media</div>
          </div>
          <div class="strip-row">
            <div class="rank">5</div>
            <div class="task">Mensajes mensuales a clientes</div>
            <div>Aiko</div>
            <div class="priority med">Media</div>
          </div>
          <div class="strip-row">
            <div class="rank">6</div>
            <div class="task">Procesos administrativos<br><small style="font-weight:400; font-family:'Inter Tight',sans-serif; font-size:12px; color:var(--muted);">SAT, complementos de pago, facturas</small></div>
            <div>Gaby</div>
            <div class="priority high">Alta</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="block" id="fricciones">
  <div class="wrap">
    <div class="section-tag"><span class="num">03</span> · Fricciones & oportunidades</div>
    <h2>Donde lo <em>manual</em> se cruza con lo <em>automatizable</em>.</h2>

<p class="lead">
      Al cruzar las tareas repetitivas del Cuestionario 3 con los frenos y herramientas abandonadas del Cuestionario 1, emergen seis procesos con alto potencial de optimización. No todos requieren IA — algunos requieren simplemente decidir y estandarizar.
    </p>

<div class="friction-item">
        <div class="friction-num">FRICCIÓN<br>01</div>
        <div class="friction-problem">
          La parrilla se rehace mes con mes desde cero.
          <small>8 personas la mencionan como su tarea más repetitiva, pero solo Andrea, Victor y Sergio reportan algún uso sistematizado de IA o templates. El resto la trata como creación fresca cada ciclo, lo que multiplica horas y dependencia entre Comunicación → Diseño → PM.</small>
        </div>
        <div class="friction-solve">
          <strong>Palanca propuesta</strong>
          Construir un "Generador de Parrilla" interno: prompt + Project en Claude por cliente, con brief, tono, parrillas anteriores y referencias visuales precargadas. Tiempo estimado de creación: 2 días. Ahorro estimado: 30-40% del tiempo de Ame, Edu, Andrea y Victor.
        </div>
      </div>

<div class="friction-item">
        <div class="friction-num">FRICCIÓN<br>02</div>
        <div class="friction-problem">
          Gaby procesa SAT, facturas y cuentas bancarias 100% manualmente.
          <small>Excel 60% + SAT 20% + correo 15% = casi todo su día es trabajo administrativo repetitivo. Ella misma identifica el problema ("considero que teniendo una herramienta que me apoye…") pero no tiene la bandwidth para investigarla.</small>
        </div>
        <div class="friction-solve">
          <strong>Palanca propuesta</strong>
          Evaluar Odoo (que ya está "en su mira") + script de descarga automatizada de XML del SAT. Es la oportunidad con mayor ROI lineal: una sola persona, tareas 100% deterministas, herramientas maduras existentes.
        </div>
      </div>

<div class="friction-item">
        <div class="friction-num">FRICCIÓN<br>03</div>
        <div class="friction-problem">
          Diseño busca stock y referencias manualmente varias veces al día.
          <small>Pablo lo nombra explícitamente; Jio y Sergio dependen de Pinterest/Behance/YouTube como motor de inspiración. Mientras tanto, hay interés latente en Magnific, Adobe Firefly y la suite IA de Canva — pero "no he tenido tiempo de explorarlas" (Jio).</small>
        </div>
        <div class="friction-solve">
          <strong>Palanca propuesta</strong>
          Sesión-taller de 2 horas para activar Adobe Firefly (ya viene en el ecosistema) + Magnific + Canva IA. Crear una biblioteca compartida de prompts por estilo de cliente.
        </div>
      </div>

<div class="friction-item">
        <div class="friction-num">FRICCIÓN<br>04</div>
        <div class="friction-problem">
          Cada quien usa una IA distinta y reentrena desde cero en cada chat.
          <small>El equipo gasta tiempo "repitiendo el contexto" — frase literal en Vic, Andrea y Ame. Hay tres LLMs en paralelo (Claude, Gemini, ChatGPT) sin una doctrina compartida de cuándo usar cuál.</small>
        </div>
        <div class="friction-solve">
          <strong>Palanca propuesta</strong>
          Definir "Claude como default para texto largo y proyectos persistentes" + Gemini para verificación cruzada (como ya hace Ramses) + librería de Projects con system prompts por área. Eliminar la fricción de empezar siempre desde cero.
        </div>
      </div>

<div class="friction-item">
        <div class="friction-num">FRICCIÓN<br>05</div>
        <div class="friction-problem">
          La revisión de conversiones de Ads la hacen 4 personas por separado.
          <small>Seth, Andrea, Francisco y Dani reportan esta tarea. Cada uno revisa por su lado, sin un tablero unificado ni reporte automático. Dani tarda 30-45 min en cada revisión.</small>
        </div>
        <div class="friction-solve">
          <strong>Palanca propuesta</strong>
          Un dashboard de Looker Studio (o un script con la API de Google Ads + Claude) que genere un resumen diario por cliente, con anomalías destacadas. Ahorra ~1 h/persona/día.
        </div>
      </div>

<div class="friction-item">
        <div class="friction-num">FRICCIÓN<br>06</div>
        <div class="friction-problem">
          El conocimiento técnico de IA está atrapado en 2-3 personas.
          <small>Ramses, Dani y Francisco entienden ventana de contexto, alucinaciones y arquitectura de prompts. El resto especula. Jio agradece explícitamente los "resúmenes del equipo de código" — esa transferencia es informal y dependiente de buena voluntad.</small>
        </div>
        <div class="friction-solve">
          <strong>Palanca propuesta</strong>
          Ritualizar la transferencia: 30 min quincenales donde Web comparte un truco aplicado al mundo creativo/PM. Crear un Notion/Doc compartido con "Prompts que funcionaron esta semana".
        </div>
      </div>

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

<section class="block" id="madurez">
  <div class="wrap">
    <div class="section-tag"><span class="num">04</span> · Diagnóstico de IA</div>
    <h2>Saben <em>usarla</em>. No siempre saben <em>por qué</em> funciona.</h2>

<p class="lead">
      El Cuestionario 2 reveló un patrón claro: el equipo intuye el comportamiento de la IA por experiencia ("se satura", "alucina", "hay que repetir"), pero pocos manejan los conceptos técnicos que explican el porqué. Esta brecha es la causa raíz de varias de las fricciones operativas anteriores.
    </p>

<div class="maturity">
      <div class="gauge">
        <div class="gauge-label">Índice compuesto de madurez IA</div>
        <div class="gauge-value">38<sup>%</sup></div>
        <div class="gauge-desc">El equipo está en transición entre uso intuitivo y dominio técnico. La media se sostiene por 3 expertos; sin ellos, caería a ~25%.</div>
        <div class="gauge-bar">
          <div class="gauge-bar-fill" style="width: 38%"></div>
        </div>
        <div class="gauge-scale">
          <span>Principiante</span>
          <span>Funcional</span>
          <span>Avanzado</span>
          <span>Experto</span>
        </div>
      </div>

<div>
        <h3 style="margin-top:0;">Estratificación del equipo</h3>
        <p style="font-size:14.5px; color: var(--muted);">Basado en respuestas a las 4 preguntas del Cuestionario 2 (ventana de contexto, alucinaciones, fecha de corte, calidad por prompt).</p>

<div class="maturity-levels">
          <div class="ml-row">
            <div class="ml-level">N4</div>
            <div class="ml-name">Experto técnico
              <small>Ramses, Dani — manejan ventana de contexto, embeddings, hallucinations.</small>
            </div>
            <div class="ml-pct">21%</div>
          </div>
          <div class="ml-row">
            <div class="ml-level">N3</div>
            <div class="ml-name">Avanzado intuitivo
              <small>Sergio, Francisco, Seth, Vic — entienden el "qué" pero no siempre el "por qué".</small>
            </div>
            <div class="ml-pct">29%</div>
          </div>
          <div class="ml-row">
            <div class="ml-level">N2</div>
            <div class="ml-name">Funcional pragmático
              <small>Andrea, Edu, Gaby, Pablo, Jio — usan IA productivamente, conceptos vagos.</small>
            </div>
            <div class="ml-pct">36%</div>
          </div>
          <div class="ml-row">
            <div class="ml-level">N1</div>
            <div class="ml-name">Principiante
              <small>Ame, Aksel, Aiko — uso esporádico, modelo mental impreciso.</small>
            </div>
            <div class="ml-pct">14%</div>
          </div>
        </div>
      </div>
    </div>

<div class="pull-quote" style="margin-top:64px;">
      "Las IA tienen una ventana limitada; para aprovechar mejor su capacidad hay que alimentar con archivos .md que traigan especificaciones ordenadas y con prioridad."
      <cite>— Ramses (N4) frente al promedio del equipo (N2)</cite>
    </div>

<h3>Tres conceptos clave donde se concentra la confusión</h3>
    <div class="insights" style="margin-top: 20px;">
      <div class="insight-card">
        <div class="insight-num">A</div>
        <div class="insight-meta"><span>Concepto</span><span>Ventana de contexto</span></div>
        <h3>¿Por qué olvida lo que le dije?</h3>
        <p>5 respuestas lo atribuyen a "saturación", "memoria llena" o "plan no premium". Solo Ramses y Dani lo explican como límite técnico del contexto. Es el malentendido más generalizado.</p>
        <div class="insight-action"><strong>Implicación</strong>El equipo no sabe cuándo cortar y abrir un chat nuevo, ni cuándo conviene un Project. Pierden horas en chats largos que ya degradaron.</div>
      </div>

<div class="insight-card">
        <div class="insight-num">B</div>
        <div class="insight-meta"><span>Concepto</span><span>Alucinaciones</span></div>
        <h3>¿Por qué inventa cosas?</h3>
        <p>Solo Ramses, Dani y Seth nombran "alucinación" o explican que la IA predice probabilísticamente. La mayoría asume que la IA "tiene mala información" o "está incompleta".</p>
        <div class="insight-action"><strong>Implicación</strong>El equipo no aplica verificación cruzada por default. Hay riesgo de pasar datos inventados a clientes en copys o reportes.</div>
      </div>

<div class="insight-card">
        <div class="insight-num">C</div>
        <div class="insight-meta"><span>Concepto</span><span>Prompting</span></div>
        <h3>¿Por qué cambia tanto la calidad?</h3>
        <p>Aquí hay más comprensión — la mayoría intuye que "depende de cómo se le pida". Pero las respuestas se quedan en frases generales; pocos describen estructura, rol, contexto o ejemplos.</p>
        <div class="insight-action"><strong>Implicación</strong>Hay buena disposición y poca técnica. Es la brecha más fácil de cerrar con un taller práctico.</div>
      </div>

<div class="insight-card">
        <div class="insight-num">D</div>
        <div class="insight-meta"><span>Concepto</span><span>Fecha de corte</span></div>
        <h3>¿Y la información reciente?</h3>
        <p>Solo Dani menciona explícitamente la "fecha de corte de conocimiento". Edu, Andrea y Jio creen que sin internet la IA "haría una búsqueda" o "no haría nada"; varios asumen que alucinaría.</p>
        <div class="insight-action"><strong>Implicación</strong>No están activando la búsqueda web de forma sistemática cuando deberían (campañas, tendencias, noticias). Y a veces sí confían cuando no deberían.</div>
      </div>
    </div>

<h3 style="margin-top:48px;">La conexión con los cuellos de botella</h3>
    <p>
      La brecha de conocimiento <strong>sí</strong> es factor de los cuellos de botella operativos. Cuando Andrea dice que Gemini "le tenías que repetir mucho", está describiendo una sesión donde se rebasó la ventana útil de contexto — algo prevenible. Cuando Ame dice "soy la que más se tarda ejecutando parrillas", está haciendo prompts genéricos donde un Project con brief precargado le ahorraría horas. La eficiencia operativa de dínamo está limitada hoy por el techo de prompting promedio, no por la herramienta.
    </p>
  </div>
</section>

<section class="block" id="insights">
  <div class="wrap">
    <div class="section-tag"><span class="num">05</span> · Recomendaciones accionables</div>
    <h2>Cinco movimientos <em>en orden</em> de retorno e impacto.</h2>

<p class="lead">
      Cada recomendación cruza al menos dos de los tres cuestionarios y prioriza palancas donde el costo de implementación es bajo y el ahorro de tiempo recurrente es alto. Están ordenadas por velocidad de retorno.
    </p>

<div class="insight-card featured">
        <div class="insight-num">01</div>
        <div class="insight-meta"><span>Prioridad: máxima</span><span>Impacto: transversal</span><span>Plazo: 2 semanas</span></div>
        <h3>Industrializar "la parrilla" como producto interno, no como tarea.</h3>
        <p>Crear un Project de Claude por cliente con: brief, tono de voz, parrillas anteriores, referencias visuales, copys aprobados y rechazados. Cada mes, Comunicación abre el Project, pide la propuesta y la calibra, en vez de empezar desde cero. Diseño recibe un brief estructurado el día 25 de cada mes en lugar del día 1 del siguiente.</p>
        <div class="insight-action"><strong>Ahorro estimado</strong>~30-40% del tiempo de Ame, Edu, Andrea y Victor en parrillas. Reduce dependencia secuencial con Diseño. Resuelve la fricción #1 — la más citada del equipo.</div>
      </div>

<div class="insight-card">
        <div class="insight-num">02</div>
        <div class="insight-meta"><span>Plazo: 4 semanas</span></div>
        <h3>Bootcamp interno de prompting · 4 sesiones</h3>
        <p>Un programa breve liderado por Ramses + Dani + Seth, dirigido al resto del equipo. Cuatro temas: ventana de contexto y cuándo cortar; alucinaciones y verificación cruzada; estructura de prompt (rol/contexto/tarea/formato); uso de Projects y archivos `.md` de referencia.</p>
        <div class="insight-action"><strong>Por qué ahora</strong>Cierra la brecha de madurez N2→N3 sin contratar nada externo. Convierte el conocimiento aislado del área Web en activo de toda la agencia.</div>
      </div>

<div class="insight-card">
        <div class="insight-num">03</div>
        <div class="insight-meta"><span>Plazo: 6 semanas</span></div>
        <h3>Automatización del flujo administrativo de Gaby</h3>
        <p>La oportunidad con mayor ROI lineal del diagnóstico: una sola persona, tareas 100% deterministas, herramientas maduras existentes. Evaluar Odoo (ya está en su mira) y/o scripts de descarga automática de XML del SAT + conciliación bancaria asistida.</p>
        <div class="insight-action"><strong>Riesgo de no hacerlo</strong>Gaby es un punto único de falla en finanzas. Cualquier optimización aquí también es continuidad de negocio, no solo eficiencia.</div>
      </div>

<div class="insight-card">
        <div class="insight-num">04</div>
        <div class="insight-meta"><span>Plazo: 8 semanas</span></div>
        <h3>Dashboard unificado de campañas y conversiones</h3>
        <p>Hoy Seth, Andrea, Francisco y Dani revisan Google Ads en paralelo. Construir un Looker Studio + reporte diario automático con Claude que destaque anomalías por cliente. Cada quien entra solo cuando algo lo requiere.</p>
        <div class="insight-action"><strong>Ahorro estimado</strong>~1 hora/persona/día de revisión rutinaria. Libera bandwidth para análisis estratégico real, que es justamente lo que Victor identifica como su área de mejora.</div>
      </div>

<div class="insight-card">
        <div class="insight-num">05</div>
        <div class="insight-meta"><span>Plazo: continuo</span></div>
        <h3>Ritual quincenal "Prompts que funcionaron"</h3>
        <p>30 minutos cada dos semanas, formato corto. Cada área comparte una técnica, prompt o flujo nuevo. Se documenta en un Doc compartido. Esto convierte la curiosidad ya existente (Magnific, Firefly, NotebookLM, Sora, integración Canva-Claude) en adopción medible.</p>
        <div class="insight-action"><strong>Por qué funciona</strong>El equipo ya identifica las herramientas. Lo que falta es <em>tiempo asignado</em> para probarlas — el freno #1 de todo el Cuestionario 1.</div>
      </div>

</div>

<div class="pull-quote" style="margin-top: 72px; border-color: var(--accent-2);">
      "Mi forma de medirme es el resultado, las reacciones de la gente y mi calidad de vida."
      <cite>— Seth · y es exactamente la métrica correcta para este plan.</cite>
    </div>

</div>
</section>

<footer>
  <div class="wrap">
    <div>
      <h5>Resumen ejecutivo en una frase</h5>
      <div class="big">"El cuello de botella de dínamo no es la herramienta — es el tiempo asignado a aprenderla."</div>
    </div>
    <div>
      <h5>Documentos analizados</h5>
      <ul>
        <li>Cuestionario 1 · Auditoría</li>
        <li>Cuestionario 2 · Dominio IA</li>
        <li>Cuestionario 3 · Tareas repetitivas</li>
        <li>14 integrantes · 5 áreas</li>
      </ul>
    </div>
    <div>
      <h5>Próximos pasos</h5>
      <ul>
        <li>Validar prioridades con liderazgo</li>
        <li>Asignar responsables por palanca</li>
        <li>Definir métricas de baseline</li>
        <li>Revisión en 30 días</li>
      </ul>
    </div>
  </div>
  <div class="wrap">
    <div class="seal">
      <span>Reporte estratégico · dínamo · uso interno</span>
      <span>v.01 · plan operativo</span>
    </div>
  </div>
</footer>

</body>
</html>