<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grupo EIC — Sobre DL (220×110mm)</title>
<!--
  Grupo EIC — DL envelope · 220×110mm landscape.
  ----------------------------------------------------------------------------
  Return address block top-left with the horizontal lockup; faint radar
  watermark for atmosphere. Premium, minimal. "Print -> Save as PDF" yields a
  220×110mm sheet with no browser margins (see @page below).
  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>
  html,body{background:#15161c}
  body{font-family:var(--sans);color:var(--fg);
       min-height:100vh;display:flex;align-items:center;justify-content:center;
       padding:34px;-webkit-font-smoothing:antialiased}

  /* ---- DL envelope artboard 220×110mm ---- */
  .envelope{position:relative;width:220mm;height:110mm;overflow:hidden;
       background:
         radial-gradient(115% 150% at 88% 8%, rgba(92,124,230,.13), transparent 52%),
         radial-gradient(90% 130% at 6% 96%, rgba(47,42,140,.22), transparent 55%),
         var(--ink0);
       box-shadow:0 26px 70px rgba(0,0,0,.55)}

  /* thin signature rule along the top edge */
  .topline{position:absolute;left:0;right:0;top:0;height:2px;background:var(--grad)}

  /* faint large radar watermark, far right (clear of address windows) */
  .radar-watermark{position:absolute;right:-26mm;bottom:-30mm;width:120mm;height:120mm;
       opacity:.10;pointer-events:none}

  /* ---- return address, top-left ---- */
  .return{position:absolute;left:16mm;top:13mm;max-width:96mm}
  .return .lockup{height:13mm;width:auto;display:block;margin-bottom:6mm}
  .return .addr{font-family:var(--mono);font-size:9.5px;font-weight:400;letter-spacing:.05em;
       color:var(--muted);line-height:1.95}
  .return .addr b{color:var(--fg);font-weight:500;letter-spacing:.04em}
  .return .web{color:var(--azure)}

  /* small classified eyebrow under the address */
  .return .eyebrow-min{font-family:var(--mono);font-size:8px;font-weight:600;letter-spacing:.24em;
       text-transform:uppercase;color:var(--indigo);margin-bottom:3mm;display:flex;align-items:center;gap:6px}
  .return .eyebrow-min .dot{width:6px;height:6px;border-radius:2px;background:var(--grad);display:inline-block}

  /* recipient cue, lower-centre/right — addressing guide, faint */
  .recipient{position:absolute;left:96mm;top:62mm;width:96mm}
  .recipient .lbl{font-family:var(--mono);font-size:8px;font-weight:500;letter-spacing:.22em;
       text-transform:uppercase;color:var(--faint-d);margin-bottom:5mm}
  .recipient .line{height:1px;background:rgba(238,241,250,.14);margin-bottom:8.5mm}
  .recipient .line:last-child{margin-bottom:0}

  /* stamp guide, top-right */
  .stamp{position:absolute;right:14mm;top:12mm;width:24mm;height:30mm;
       border:1px dashed rgba(238,241,250,.20);border-radius:2px;
       display:flex;align-items:center;justify-content:center}
  .stamp span{font-family:var(--mono);font-size:7px;font-weight:500;letter-spacing:.2em;
       text-transform:uppercase;color:var(--faint-d);transform:rotate(-90deg);white-space:nowrap}

  /* tagline footer, bottom-left */
  .foot{position:absolute;left:16mm;bottom:11mm;font-family:var(--mono);font-size:8px;
       font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

  @media print{
    html,body{background:#fff}
    body{min-height:auto;padding:0}
    .envelope{box-shadow:none}
    @page{size:220mm 110mm;margin:0}
  }
</style>
</head>
<body>

  <div class="envelope">
    <span class="topline"></span>
    <svg class="radar-watermark" viewBox="0 0 100 100" aria-hidden="true"><use href="#eic-radar"/></svg>

    <!-- return address (top-left) -->
    <div class="return">
      <img class="lockup" src="../logo/eic-lockup-horizontal-on-dark.svg" alt="Grupo EIC">
      <div class="eyebrow-min"><span class="dot"></span>Remitente</div>
      <div class="addr">
        <b>Grupo EIC</b><br>
        Av. Mariscal López 3794, Piso 8<br>
        Asunción, Paraguay<br>
        <span class="web">grupoeic.com</span>
      </div>
    </div>

    <!-- stamp guide -->
    <div class="stamp"><span>Estampilla</span></div>

    <!-- recipient addressing guide -->
    <div class="recipient">
      <div class="lbl">Destinatario</div>
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </div>

    <!-- footer tagline -->
    <div class="foot">Inteligencia que anticipa · Estrategia que define</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>
