<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grupo EIC — Portada de dosier A4</title>
<!--
  Grupo EIC — dossier / proposal cover (A4 portrait).
  Open in a browser and "Print -> Save as PDF" (A4). Edit title, code and date.
  Tokens come from the shared eic-tokens.css (which also @imports the fonts).
  Visible copy is intentionally in Spanish (client-facing deliverable).
-->
<link rel="stylesheet" href="eic-tokens.css">
<style>
  body{background:#1a1a22;display:flex;justify-content:center;padding:24px;font-family:var(--sans);color:var(--fg)}
  .page{width:210mm;height:297mm;background:var(--ink0);position:relative;overflow:hidden;padding:30mm 26mm;
        display:flex;flex-direction:column;box-shadow:0 18px 60px rgba(0,0,0,.5)}
  .radar-bg{position:absolute;right:-90px;top:-70px;width:420px;height:420px;opacity:.12}
  .eyebrow{font-size:12px;letter-spacing:.24em}
  h1{font-family:var(--display);font-weight:600;font-size:62px;line-height:1.0;letter-spacing:-.02em;margin-top:auto;max-width:14ch}
  .sub{font-size:18px;color:var(--muted);margin-top:22px;max-width:40ch;line-height:1.5}
  .rule{height:2px;background:var(--grad);width:120px;margin:30px 0 0}
  .meta{margin-top:26px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);line-height:1.9;text-transform:uppercase}
  .brand{display:flex;align-items:baseline;gap:9px;font-family:var(--logo);font-weight:700;font-stretch:125%;font-size:24px;letter-spacing:.04em}
  .brand b{font-family:var(--mono);font-weight:500;letter-spacing:.24em;font-size:13px;color:var(--muted)}
  .foot{margin-top:30px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
  @media print{ body{background:#fff;padding:0} .page{box-shadow:none} @page{size:A4;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>

    <div class="brand"><span class="grad-text">EIC</span> <b>GRUPO</b></div>
    <div class="eyebrow" style="margin-top:auto">Dosier institucional · Confidencial</div>
    <h1>Inteligencia que anticipa.</h1>
    <p class="sub">Análisis estratégico, monitoreo y escenarios para decidir antes que el resto.</p>
    <div class="rule"></div>
    <div class="meta">
      Cliente · [Nombre]<br>
      Documento · EIC-DOS-2026-001<br>
      Fecha · Enero 2026
    </div>
    <div class="foot"><span>grupoeic.com</span><span>Estrategia que define</span></div>
  </div>

  <!-- canonical radar (defs reused 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>
