<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grupo EIC — Hoja de capacidades</title>
<!--
  Grupo EIC — capabilities one-pager / sell sheet (A4 portrait, dark).
  ------------------------------------------------------------------
  A single-page "hoja de capacidades". Open in a browser and
  "Print -> Save as PDF" (A4) — @page is A4 with margin 0, fits on ONE page.
  - Tokens come from eic-tokens.css (single source of truth — do NOT redefine).
  - The logo is referenced from ../logo/ (keep this file inside brand/templates/).
  - Radar defs are inlined once before </body>, used via <use href="#eic-radar"/>.
  Visible copy is intentionally in Spanish (client-facing deliverable).
-->
<link rel="stylesheet" href="eic-tokens.css">
<style>
  html,body{background:#1a1a22}
  body{font-family:var(--sans);color:var(--fg);display:flex;justify-content:center;align-items:flex-start;padding:24px;
       -webkit-font-smoothing:antialiased;}

  .page{width:210mm;height:297mm;background:var(--ink0);position:relative;overflow:hidden;
        display:flex;flex-direction:column;padding:15mm 15mm 12mm;
        box-shadow:0 18px 60px rgba(0,0,0,.5);}

  /* faint top wash so the canvas isn't dead-flat navy */
  .page::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(120% 70% at 84% -8%, rgba(92,124,230,.14), transparent 58%);}

  /* large radar watermark — atmosphere, bottom-right (absolute, out of flow) */
  .page .radar-bg{position:absolute;right:-150px;bottom:-130px;width:480px;height:480px;
            opacity:.10;pointer-events:none;z-index:0}

  /* keep flow content above the watermark; do NOT touch the absolute decorations */
  .page > header, .page > .hero, .page > .sec-label,
  .page > .services, .page > .process, .page > .stats, .page > footer{position:relative;z-index:1}

  /* ---------- header ---------- */
  header{display:flex;align-items:flex-start;justify-content:space-between;}
  header img{height:30px;display:block}
  .head-meta{text-align:right;line-height:1.65}
  .head-meta .eyebrow{font-size:10.5px;color:var(--indigo)}
  .head-meta .site{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
                   text-transform:uppercase;color:var(--muted);margin-top:3px}

  /* ---------- hero ---------- */
  .hero{margin-top:11mm}
  .hero .eyebrow{font-size:11px}
  .hero h1{font-family:var(--display);font-weight:600;font-size:44px;line-height:1.0;
           letter-spacing:-.022em;margin-top:11px;max-width:15ch}
  .hero h1 em{font-style:normal}
  .hero .lead{font-size:14px;color:var(--muted);line-height:1.5;margin-top:13px;max-width:62ch}

  .hero .rule{height:2px;width:96px;background:var(--grad);margin-top:15px;border:0}

  /* ---------- section label ---------- */
  .sec-label{display:flex;align-items:center;gap:12px;margin-top:8mm;margin-bottom:4.5mm}
  .sec-label .eyebrow{font-size:10.5px;color:var(--indigo)}
  .sec-label .line{flex:1;height:1px;background:linear-gradient(90deg,var(--ink4),transparent)}

  /* ---------- qué hacemos: 3 service columns ---------- */
  .services{display:grid;grid-template-columns:repeat(3,1fr);gap:6mm}
  .svc{background:linear-gradient(180deg,var(--ink2),rgba(17,22,42,.45));
       border:1px solid var(--ink3);border-radius:11px;padding:14px 15px 16px;
       display:flex;flex-direction:column;min-height:0;position:relative;overflow:hidden}
  .svc::after{content:"";position:absolute;left:0;top:0;height:100%;width:2px;background:var(--grad);opacity:.9}
  .svc .ico{width:30px;height:30px;margin-bottom:11px}
  .svc h3{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.12;
          letter-spacing:-.01em}
  .svc p{font-size:11.5px;line-height:1.45;color:var(--muted);margin-top:7px}
  .svc .tags{margin-top:auto;padding-top:11px;font-family:var(--mono);font-size:8.7px;
             letter-spacing:.13em;text-transform:uppercase;color:var(--faint-d)}

  /* ---------- cómo trabajamos: process ---------- */
  .process{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
           border:1px solid var(--ink3);border-radius:11px;overflow:hidden;
           background:rgba(17,22,42,.35)}
  .step{padding:13px 15px 15px;position:relative}
  .step + .step{border-left:1px solid var(--ink3)}
  .step .n{display:block;font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.12em;
           background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
  .step h4{font-family:var(--sans);font-weight:600;font-size:13px;margin-top:9px;letter-spacing:-.005em;color:var(--fg)}
  .step p{font-size:10.5px;line-height:1.42;color:var(--muted);margin-top:6px}

  /* ---------- key numbers band ---------- */
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6mm;margin-top:7mm}
  .stat{text-align:left;padding-left:15px;border-left:2px solid transparent;
        border-image:var(--grad) 1}
  .stat .v{font-family:var(--display);font-weight:600;font-size:42px;line-height:.95;
           letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .stat .v small{font-size:24px;font-weight:600}
  .stat .c{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
           color:var(--muted);margin-top:9px;line-height:1.5}

  /* ---------- footer ---------- */
  footer{margin-top:auto;padding-top:13px;position:relative}
  footer .rule-grad{height:2px;border:0;background:var(--grad);margin-bottom:13px}
  .foot-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
  .foot-row .contact{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
                     text-transform:uppercase;color:var(--muted);line-height:1.85}
  .foot-row .contact b{color:var(--fg);font-weight:600}
  .foot-row .tagline{text-align:right}
  .foot-row .tagline .t{font-family:var(--display);font-style:italic;font-weight:500;
                        font-size:15px;color:var(--fg);line-height:1.25}
  .foot-row .tagline .conf{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;
                           text-transform:uppercase;color:var(--faint-d);margin-top:7px;
                           display:flex;align-items:center;gap:7px;justify-content:flex-end}
  .foot-row .tagline .conf .chip{width:7px;height:7px}

  @media print{
    html,body{background:#fff;padding:0}
    .page{box-shadow:none;width:210mm;height:297mm}
    @page{size:A4 portrait;margin:0}
  }
</style>
</head>
<body>
  <div class="page">
    <svg class="radar-bg" viewBox="0 0 100 100" aria-hidden="true"><use href="#eic-radar"/></svg>

    <!-- ===== HEADER ===== -->
    <header>
      <img src="../logo/eic-lockup-horizontal-on-dark.svg" alt="Grupo EIC">
      <div class="head-meta">
        <div class="eyebrow">Capacidades · 2026</div>
        <div class="site">grupoeic.com</div>
      </div>
    </header>

    <!-- ===== HERO ===== -->
    <div class="hero">
      <div class="eyebrow">Hoja de capacidades · Confidencial</div>
      <h1><span class="grad-text">Inteligencia que anticipa.</span><br><em>Estrategia que define.</em></h1>
      <p class="lead">Convertimos señales dispersas — medios, redes, actores y entorno regulatorio — en
        criterio accionable. Anticipamos el escenario y definimos la decisión antes que el resto.</p>
      <hr class="rule">
    </div>

    <!-- ===== QUÉ HACEMOS ===== -->
    <div class="sec-label">
      <span class="eyebrow">Qué hacemos</span><span class="line"></span>
    </div>
    <div class="services">
      <div class="svc">
        <svg class="ico" viewBox="0 0 100 100" aria-hidden="true"><use href="#eic-radar"/></svg>
        <h3>Inteligencia &amp; monitoreo</h3>
        <p>Escucha continua de medios, redes y actores clave. Detectamos señales tempranas
          y narrativas emergentes antes de que escalen.</p>
        <div class="tags">Señales · Medios · Reputación</div>
      </div>
      <div class="svc">
        <svg class="ico" viewBox="0 0 100 100" aria-hidden="true"><use href="#eic-radar"/></svg>
        <h3>Análisis estratégico</h3>
        <p>Lectura del entorno competitivo, regulatorio y político. Priorizamos por impacto
          real, no por ruido, y traducimos a decisiones.</p>
        <div class="tags">Contexto · Actores · Impacto</div>
      </div>
      <div class="svc">
        <svg class="ico" viewBox="0 0 100 100" aria-hidden="true"><use href="#eic-radar"/></svg>
        <h3>Escenarios &amp; riesgo</h3>
        <p>Modelamos escenarios y mapeamos riesgos por probabilidad e impacto, con planes
          de respuesta y protocolos de crisis listos.</p>
        <div class="tags">Escenarios · Riesgo · Crisis</div>
      </div>
    </div>

    <!-- ===== CÓMO TRABAJAMOS ===== -->
    <div class="sec-label">
      <span class="eyebrow">Cómo trabajamos</span><span class="line"></span>
    </div>
    <div class="process">
      <div class="step">
        <div class="n">01</div>
        <h4>Encuadre</h4>
        <p>Definimos preguntas críticas, fuentes y umbrales de alerta.</p>
      </div>
      <div class="step">
        <div class="n">02</div>
        <h4>Captación</h4>
        <p>Monitoreo continuo de fuentes abiertas y especializadas.</p>
      </div>
      <div class="step">
        <div class="n">03</div>
        <h4>Análisis</h4>
        <p>Verificamos, contrastamos y priorizamos por impacto.</p>
      </div>
      <div class="step">
        <div class="n">04</div>
        <h4>Decisión</h4>
        <p>Entregables breves: qué pasa, qué significa, qué hacer.</p>
      </div>
    </div>

    <!-- ===== NÚMEROS CLAVE ===== -->
    <div class="stats">
      <div class="stat">
        <div class="v num">24<small>/7</small></div>
        <div class="c">Monitoreo continuo<br>del entorno</div>
      </div>
      <div class="stat">
        <div class="v num">+120</div>
        <div class="c">Fuentes y actores<br>bajo seguimiento</div>
      </div>
      <div class="stat">
        <div class="v num">&lt;48<small>h</small></div>
        <div class="c">De señal crítica<br>a recomendación</div>
      </div>
    </div>

    <!-- ===== FOOTER ===== -->
    <footer>
      <hr class="rule-grad">
      <div class="foot-row">
        <div class="contact">
          <b>Grupo EIC</b><br>
          contacto@grupoeic.com<br>
          grupoeic.com
        </div>
        <div class="tagline">
          <div class="t">Inteligencia que anticipa.<br>Estrategia que define.</div>
          <div class="conf"><span class="chip"></span>Documento confidencial · 2026</div>
        </div>
      </div>
    </footer>
  </div>

  <!-- radar symbol (canonical defs — inline once, reuse via <use href="#eic-radar"/>) -->
  <svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>
    <linearGradient id="rg" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#A9D4FF"/><stop offset="55%" stop-color="#5C7CE6"/><stop offset="100%" stop-color="#2F2A8C"/></linearGradient>
    <linearGradient id="rgL" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#5C7CE6"/><stop offset="55%" stop-color="#3D3FA9"/><stop offset="100%" stop-color="#2F2A8C"/></linearGradient>
    <symbol id="eic-radar" viewBox="0 0 100 100">
      <path d="M50 50 L64.71 9.59 A43.00 43.00 0 0 1 84.79 24.73 Z" fill="#7FE5FF" opacity="0.26"/>
      <g fill="none" stroke="url(#rg)" stroke-linecap="round">
        <path d="M12.76 28.50 A43.00 43.00 0 1 1 80.93 79.87" stroke-width="2.4"/>
        <path d="M28.08 28.08 A31.00 31.00 0 0 1 77.11 65.03" stroke-width="2" opacity="0.85"/>
        <path d="M40.50 33.55 A19.00 19.00 0 0 1 68.44 54.60" stroke-width="1.6" opacity="0.65"/>
        <path d="M50 50 L77.08 14.06" stroke-width="2.3"/>
      </g>
      <circle cx="75.88" cy="15.66" r="5.5" fill="#7FE5FF" opacity="0.22"/>
      <circle cx="75.88" cy="15.66" r="2.9" fill="#7FE5FF"/>
      <circle cx="50" cy="50" r="2.6" fill="url(#rg)"/>
    </symbol>
    <symbol id="eic-radar-light" viewBox="0 0 100 100">
      <path d="M50 50 L64.71 9.59 A43.00 43.00 0 0 1 84.79 24.73 Z" fill="#3D3FA9" opacity="0.20"/>
      <g fill="none" stroke="url(#rgL)" stroke-linecap="round">
        <path d="M12.76 28.50 A43.00 43.00 0 1 1 80.93 79.87" stroke-width="2.4"/>
        <path d="M28.08 28.08 A31.00 31.00 0 0 1 77.11 65.03" stroke-width="2" opacity="0.85"/>
        <path d="M40.50 33.55 A19.00 19.00 0 0 1 68.44 54.60" stroke-width="1.6" opacity="0.65"/>
        <path d="M50 50 L77.08 14.06" stroke-width="2.3"/>
      </g>
      <circle cx="75.88" cy="15.66" r="2.9" fill="#3D3FA9"/>
      <circle cx="50" cy="50" r="2.6" fill="url(#rgL)"/>
    </symbol>
  </defs></svg>

</body>
</html>
