<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grupo EIC — Tarjeta de presentación (90×55mm + 3mm sangrado)</title>
<!--
  Grupo EIC — business card · 90×55mm trim + 3mm bleed (96×61mm artboard).
  ----------------------------------------------------------------------------
  FRONT and BACK shown side by side, each on its own bleed artboard with crop
  marks at the trim line. Print "Print -> Save as PDF" (A4) for a proof sheet,
  or send the two .card artboards to a print shop (90×55mm trim, 3mm bleed).
  Tokens come from the shared eic-tokens.css; only page-specific CSS is added.
  Visible copy is in Spanish (client-facing); code/comments in English.
-->
<link rel="stylesheet" href="eic-tokens.css">
<style>
  /* ---- proof sheet (screen + A4 print) ---- */
  html,body{background:#15161c}
  body{font-family:var(--sans);color:var(--fg);
       min-height:100vh;display:flex;flex-direction:column;align-items:center;
       justify-content:center;gap:26px;padding:34px 24px 40px;-webkit-font-smoothing:antialiased}
  .sheet-label{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.24em;
       text-transform:uppercase;color:rgba(238,241,250,.42);text-align:center}
  .cards{display:flex;gap:46px;flex-wrap:wrap;justify-content:center;align-items:flex-start}
  .cardwrap{display:flex;flex-direction:column;align-items:center;gap:11px}
  .cardwrap > .tag{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.22em;
       text-transform:uppercase;color:rgba(238,241,250,.4)}

  /* ---- artboard: 96×61mm = 90×55 trim + 3mm bleed all around ---- */
  .card{position:relative;width:96mm;height:61mm;overflow:hidden;
        box-shadow:0 22px 60px rgba(0,0,0,.55);border-radius:1.2px}
  /* crop-mark frame: marks sit at the trim edge (3mm in from artboard edge) */
  .crop{position:absolute;inset:0;pointer-events:none;z-index:6}
  .crop span{position:absolute;background:rgba(238,241,250,.55);width:.18mm;height:3mm}
  .crop span.h{width:3mm;height:.18mm}
  /* corners — vertical + horizontal ticks meeting at the trim corner (3mm,3mm) */
  .crop .tl-v{left:3mm;top:0}        .crop .tl-h{left:0;top:3mm}
  .crop .tr-v{right:3mm;top:0}       .crop .tr-h{right:0;top:3mm}
  .crop .bl-v{left:3mm;bottom:0}     .crop .bl-h{left:0;bottom:3mm}
  .crop .br-v{right:3mm;bottom:0}    .crop .br-h{right:0;bottom:3mm}

  /* live area = inside the trim, with a safe margin */
  .safe{position:absolute;left:3mm;top:3mm;right:3mm;bottom:3mm;
        padding:6.6mm 7mm;display:flex;flex-direction:column}

  /* ---- shared atmosphere ---- */
  .radar-watermark{position:absolute;pointer-events:none}

  /* ================= FRONT ================= */
  .front{background:
      radial-gradient(120% 130% at 78% 14%, rgba(92,124,230,.16), transparent 56%),
      var(--ink0)}
  .front .safe{align-items:center;justify-content:center;text-align:center}
  .front .radar-watermark{right:-12mm;bottom:-16mm;width:60mm;height:60mm;opacity:.12}
  .front .topline{position:absolute;left:3mm;right:3mm;top:3mm;height:2.2px;background:var(--grad)}
  .lockup{height:30mm;width:auto;display:block;margin:0 auto}
  .front .tagline{font-family:var(--mono);font-size:7.2px;font-weight:500;letter-spacing:.245em;
       text-transform:uppercase;color:var(--muted);margin-top:5.4mm;line-height:1.85}
  .front .tagline b{color:var(--azure);font-weight:500}

  /* ================= BACK ================= */
  .back{background:
      radial-gradient(120% 120% at 12% 92%, rgba(47,42,140,.30), transparent 55%),
      var(--ink0)}
  .back .safe{justify-content:space-between}
  .back .radar-watermark{left:-15mm;top:-17mm;width:56mm;height:56mm;opacity:.10;transform:scaleX(-1)}
  .back .eicmark{width:11mm;height:11mm;display:block}

  .id-name{font-family:var(--display);font-weight:600;font-size:16.5px;letter-spacing:-.01em;
       line-height:1.04;color:var(--fg)}
  .id-role{font-family:var(--mono);font-size:7.6px;font-weight:600;letter-spacing:.2em;
       text-transform:uppercase;color:var(--indigo);margin-top:3.1mm}
  .id-rule{height:1.6px;width:18mm;background:var(--grad);border:0;margin:3.4mm 0}
  .contact{font-family:var(--mono);font-size:8px;font-weight:400;letter-spacing:.045em;
       color:var(--muted);line-height:2.0}
  .contact .row{display:flex;align-items:center;gap:5px}
  .contact .row span.k{color:rgba(238,241,250,.4);width:4.2mm;display:inline-block;
       font-size:7px;letter-spacing:.16em}
  .contact .row span.v{color:var(--fg);font-weight:400}
  .contact .row a{color:var(--fg);text-decoration:none}
  .back .topbar{display:flex;align-items:center;justify-content:space-between}
  .back .topbar .web{font-family:var(--mono);font-size:7.4px;font-weight:500;letter-spacing:.2em;
       text-transform:uppercase;color:var(--azure)}

  @media print{
    html,body{background:#fff}
    body{min-height:auto;gap:14mm;padding:14mm 10mm;justify-content:flex-start}
    .sheet-label,.cardwrap > .tag{color:#5b5b6b}
    .card{box-shadow:none;outline:.18mm solid #c9ccd2}
    @page{size:A4;margin:0}
  }
</style>
</head>
<body>

  <div class="sheet-label">Grupo EIC · Tarjeta de presentación · 90×55 mm + 3 mm sangrado · líneas de corte al trim</div>

  <div class="cards">

    <!-- ===================== FRONT ===================== -->
    <div class="cardwrap">
      <div class="card front">
        <span class="topline"></span>
        <svg class="radar-watermark" viewBox="0 0 100 100" aria-hidden="true"><use href="#eic-radar"/></svg>
        <div class="safe">
          <img class="lockup" src="../logo/eic-lockup-stacked-on-dark.svg" alt="Grupo EIC">
          <div class="tagline">Inteligencia que anticipa.<br><b>Estrategia que define.</b></div>
        </div>
        <div class="crop">
          <span class="tl-v"></span><span class="h tl-h"></span>
          <span class="tr-v"></span><span class="h tr-h"></span>
          <span class="bl-v"></span><span class="h bl-h"></span>
          <span class="br-v"></span><span class="h br-h"></span>
        </div>
      </div>
      <div class="tag">Frente · Anverso</div>
    </div>

    <!-- ===================== BACK ===================== -->
    <div class="cardwrap">
      <div class="card back">
        <svg class="radar-watermark" viewBox="0 0 100 100" aria-hidden="true"><use href="#eic-radar"/></svg>
        <div class="safe">
          <div class="topbar">
            <svg class="eicmark" viewBox="0 0 100 100" aria-hidden="true"><use href="#eic-radar"/></svg>
            <span class="web">grupoeic.com</span>
          </div>
          <div>
            <div class="id-name">Mariana Solís Verón</div>
            <div class="id-role">Directora de Inteligencia</div>
            <hr class="id-rule">
            <div class="contact">
              <div class="row"><span class="k">E</span><a class="v" href="mailto:msolis@grupoeic.com">msolis@grupoeic.com</a></div>
              <div class="row"><span class="k">T</span><span class="v">+595 21 449 318</span></div>
              <div class="row"><span class="k">M</span><span class="v">+595 981 207 644</span></div>
            </div>
          </div>
        </div>
        <div class="crop">
          <span class="tl-v"></span><span class="h tl-h"></span>
          <span class="tr-v"></span><span class="h tr-h"></span>
          <span class="bl-v"></span><span class="h bl-h"></span>
          <span class="br-v"></span><span class="h br-h"></span>
        </div>
      </div>
      <div class="tag">Dorso · Reverso</div>
    </div>

  </div>

<!-- canonical radar symbol (inline once, referenced via <use>) -->
<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>
