<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grupo EIC — Manual de marca</title>
<!--
  Grupo EIC — Brand guidelines book (client / partner-facing).
  ------------------------------------------------------------------
  A4 LANDSCAPE multi-page manual. Each .page is 297x210mm.
  Open in a browser and "Print -> Save as PDF" (A4 landscape) for a ready PDF.
  - Tokens come from the shared eic-tokens.css (do NOT redefine them here).
  - Real logos are referenced from ../logo/ (keep this file in brand/templates/).
  - The canonical radar defs block is inlined ONCE before </body> and reused
    with <use href="#eic-radar"/> (dark) / <use href="#eic-radar-light"/> (paper).
  Visible copy is intentionally in Spanish (client-facing deliverable).
-->
<link rel="stylesheet" href="eic-tokens.css">
<style>
  /* ---- page-specific layout only; tokens live in eic-tokens.css ---- */
  html{ -webkit-text-size-adjust:100%; }
  body{ background:#15161c; font-family:var(--sans); color:var(--fg);
        padding:24px; display:flex; flex-direction:column; align-items:center; gap:24px; }

  .page{ width:297mm; height:210mm; position:relative; overflow:hidden;
         background:var(--ink0); color:var(--fg);
         padding:20mm 22mm; display:flex; flex-direction:column;
         box-shadow:0 22px 70px rgba(0,0,0,.55); }
  .page--paper{ background:var(--paper); color:var(--ink); }

  /* faint corner glow for atmosphere on dark pages */
  .page::after{ content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(120% 90% at 92% 4%, rgba(92,124,230,.13), transparent 46%); }
  .page--paper::after{ background:radial-gradient(120% 90% at 96% 2%, rgba(61,63,169,.07), transparent 50%); }

  /* radar watermark atmosphere */
  .radar-bg{ position:absolute; pointer-events:none; z-index:0; }
  .page > *{ position:relative; z-index:1; }

  /* ---- running head / foot ---- */
  .rh{ display:flex; align-items:center; justify-content:space-between;
       font-family:var(--mono); font-size:9.5px; font-weight:500;
       letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
  .rh .lockmini{ display:flex; align-items:baseline; gap:7px; }
  .rh .lockmini .eic{ font-family:var(--logo); font-weight:700; font-stretch:125%;
       letter-spacing:.04em; font-size:14px; background:var(--grad);
       -webkit-background-clip:text; background-clip:text; color:transparent; }
  .rh .lockmini .gr{ font-family:var(--mono); font-weight:500; font-size:8.5px;
       letter-spacing:.22em; color:var(--muted); }
  .page--paper .rh{ color:var(--ink-muted); }
  .page--paper .rh .lockmini .eic{ background:var(--grad-light);
       -webkit-background-clip:text; background-clip:text; color:transparent; }
  .page--paper .rh .lockmini .gr{ color:var(--ink-muted); }

  .pf{ margin-top:auto; padding-top:12px; display:flex; align-items:center;
       justify-content:space-between; border-top:1px solid var(--ink3);
       font-family:var(--mono); font-size:9.5px; font-weight:500;
       letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
  .page--paper .pf{ border-top:1px solid var(--hairline); color:var(--ink-muted); }
  .pf .pg{ font-variant-numeric:tabular-nums; }

  /* ---- shared headings ---- */
  .kicker{ font-family:var(--mono); font-size:11px; font-weight:600;
           letter-spacing:.24em; text-transform:uppercase; color:var(--indigo);
           display:flex; align-items:center; gap:12px; }
  .kicker .n{ font-variant-numeric:tabular-nums; color:var(--muted); }
  .page--paper .kicker{ color:var(--accent-ink); }
  h2.title{ font-family:var(--display); font-weight:600; font-size:46px;
            line-height:1.02; letter-spacing:-.02em; margin-top:14px; }
  .lede{ font-size:16px; line-height:1.55; color:var(--muted); max-width:62ch; margin-top:16px; }
  .page--paper .lede{ color:var(--ink-muted); }
  .grad-rule{ height:2px; width:96px; background:var(--grad); border:0; margin-top:18px; }
  .page--paper .grad-rule{ background:var(--grad-light); }

  /* =========================================================
     PAGE 1 — COVER
     ========================================================= */
  .cover{ justify-content:center; padding:24mm 26mm; }
  .cover .topline{ position:absolute; top:20mm; left:26mm; right:26mm;
       display:flex; align-items:center; justify-content:space-between; }
  .cover .lockup{ display:flex; align-items:center; gap:20px; }
  .cover .radar-lockup{ width:70px; height:70px; }
  .cover .wordwrap .gr{ font-family:var(--mono); font-size:11px; font-weight:500;
       letter-spacing:.34em; color:var(--muted); display:block; margin-bottom:3px; }
  .cover .wordwrap .eic{ font-family:var(--logo); font-weight:700; font-stretch:125%;
       font-size:40px; letter-spacing:.04em; line-height:.9; background:var(--grad);
       -webkit-background-clip:text; background-clip:text; color:transparent; }
  .cover .conf{ font-family:var(--mono); font-size:10px; font-weight:600;
       letter-spacing:.24em; text-transform:uppercase; color:var(--cyan);
       display:flex; align-items:center; gap:9px; }
  .cover .conf::before{ content:""; width:7px; height:7px; border-radius:50%;
       background:var(--cyan); box-shadow:0 0 12px rgba(127,229,255,.7); }
  .cover .center{ }
  .cover .eyebrow2{ font-family:var(--mono); font-size:13px; font-weight:600;
       letter-spacing:.26em; text-transform:uppercase; color:var(--indigo); }
  .cover h1{ font-family:var(--display); font-weight:600; font-size:104px;
       line-height:.95; letter-spacing:-.03em; margin-top:18px;
       background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .cover .manual{ font-family:var(--display); font-style:italic; font-weight:500;
       font-size:30px; color:var(--fg); margin-top:24px; letter-spacing:-.01em; }
  .cover .tag{ font-size:17px; color:var(--muted); margin-top:14px; max-width:48ch; line-height:1.5; }
  .cover .baseline{ position:absolute; bottom:20mm; left:26mm; right:26mm;
       display:flex; align-items:flex-end; justify-content:space-between;
       font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
       text-transform:uppercase; color:var(--muted); }
  .cover .baseline .ed{ text-align:right; line-height:1.9; }
  .cover .baseline b{ color:var(--fg); font-weight:600; }
  .cover .radar-hero{ position:absolute; right:-180px; top:50%;
       transform:translateY(-50%); width:560px; height:560px; opacity:.10; }

  /* =========================================================
     PAGE 2 — ESENCIA
     ========================================================= */
  .essence{ }
  .essence .big{ font-family:var(--display); font-weight:600; font-size:52px;
       line-height:1.08; letter-spacing:-.02em; margin-top:30px; max-width:21ch; }
  .essence .big .em{ background:var(--grad); -webkit-background-clip:text;
       background-clip:text; color:transparent; font-style:italic; }
  .essence .cols{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:32px;
       margin-top:auto; padding-top:30px; }
  .essence .col h4{ font-family:var(--mono); font-size:10px; font-weight:600;
       letter-spacing:.18em; text-transform:uppercase; color:var(--cyan);
       margin-bottom:10px; }
  .essence .col p{ font-size:13.5px; line-height:1.6; color:var(--muted); }
  .essence .col p b{ color:var(--fg); font-weight:600; }
  .essence .radar-bg{ right:-150px; top:-120px; width:440px; height:440px; opacity:.09; }

  /* =========================================================
     PAGE 3 — EL SÍMBOLO
     ========================================================= */
  .symbol{ flex-direction:row; gap:0; padding:0; }
  .symbol .stage{ flex:0 0 47%; background:var(--ink1);
       display:flex; align-items:center; justify-content:center; position:relative;
       border-right:1px solid var(--ink3); }
  .symbol .stage .radar-main{ width:300px; height:300px; }
  .symbol .stage .clear{ position:absolute; inset:18mm;
       border:1px dashed var(--ink4); border-radius:6px; }
  .symbol .stage .clear-tag{ position:absolute; left:18mm; top:calc(18mm - 18px);
       font-family:var(--mono); font-size:9px; letter-spacing:.16em;
       text-transform:uppercase; color:var(--muted); }
  .symbol .body{ flex:1; padding:20mm 22mm; display:flex; flex-direction:column; }
  .symbol .anat{ margin-top:24px; display:flex; flex-direction:column; gap:14px; }
  .symbol .anat .row{ display:flex; gap:14px; align-items:flex-start; }
  .symbol .anat .tag{ font-family:var(--mono); font-size:9.5px; font-weight:600;
       letter-spacing:.14em; text-transform:uppercase; color:var(--cyan);
       flex:0 0 118px; padding-top:2px; }
  .symbol .anat .desc{ font-size:13px; line-height:1.5; color:var(--muted); }
  .symbol .anat .desc b{ color:var(--fg); font-weight:600; }
  .symbol .specs{ margin-top:24px; display:flex; gap:14px; }
  .symbol .spec{ flex:1; border:1px solid var(--ink3); border-radius:8px;
       padding:14px 16px; background:var(--ink1); }
  .symbol .spec .lab{ font-family:var(--mono); font-size:9px; letter-spacing:.16em;
       text-transform:uppercase; color:var(--muted); }
  .symbol .spec .val{ font-family:var(--display); font-size:22px; font-weight:600;
       margin-top:6px; letter-spacing:-.01em; }
  .symbol .spec .val .min{ display:inline-flex; align-items:center; gap:8px; }
  .symbol .spec .val svg{ width:24px; height:24px; }

  /* =========================================================
     PAGE 4 — LOGO SYSTEM
     ========================================================= */
  .logosys .grid{ display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:1fr 1fr;
       gap:16px; margin-top:24px; flex:1; }
  .logosys .tile img{ max-width:80%; }
  .tile{ border:1px solid var(--ink3); border-radius:10px; position:relative;
       display:flex; align-items:center; justify-content:center; overflow:hidden;
       background:var(--ink1); }
  .tile--light{ background:var(--paper); border-color:var(--paper2); }
  .tile--dark{ background:var(--ink0); }
  .tile img{ max-width:74%; max-height:62%; display:block; }
  .tile .cap{ position:absolute; left:14px; bottom:11px; font-family:var(--mono);
       font-size:8.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
       color:var(--muted); }
  .tile--light .cap{ color:var(--ink-muted); }

  /* =========================================================
     PAGE 5 — DON'TS
     ========================================================= */
  .donts .grid{ display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:1fr 1fr;
       gap:16px; margin-top:24px; flex:1; }
  .dont{ border:1px solid var(--ink3); border-radius:10px; padding:18px 18px 16px;
       display:flex; flex-direction:column; background:var(--ink1); position:relative; overflow:hidden; }
  .dont .vis{ flex:1; display:flex; align-items:center; justify-content:center;
       margin-bottom:12px; min-height:0; }
  .dont .vis svg{ height:62px; width:62px; }
  .dont .vis img{ height:60px; }
  .dont .x{ position:absolute; top:12px; right:14px; font-size:15px; }
  .dont h5{ font-family:var(--mono); font-size:9.5px; font-weight:600;
       letter-spacing:.12em; text-transform:uppercase; color:var(--hostile); margin-bottom:5px; }
  .dont p{ font-size:11.5px; line-height:1.45; color:var(--muted); }
  /* don't-illustration helpers */
  .badwhite{ background:var(--paper); border-radius:8px; padding:10px 16px;
       display:flex; align-items:center; justify-content:center; }
  .badwhite .azuretext{ font-family:var(--logo); font-weight:700; font-stretch:125%;
       font-size:30px; letter-spacing:.04em; color:#A9D4FF; }
  .stretchwrap{ transform:scaleX(1.7); transform-origin:center; }
  .recolorwrap svg path[stroke]{ stroke:#FF7A4D !important; }
  .shadowwrap{ filter:drop-shadow(0 6px 10px rgba(0,0,0,.6)); }

  /* =========================================================
     PAGE 6 — COLOR (paper)
     ========================================================= */
  .color .ramp{ display:flex; height:78px; border-radius:10px; overflow:hidden;
       margin-top:22px; border:1px solid var(--hairline); }
  .color .ramp .seg{ flex:1; display:flex; align-items:flex-end; padding:9px;
       font-family:var(--mono); font-size:9px; letter-spacing:.04em; }
  .color .gradbar{ height:18px; border-radius:6px; margin-top:10px;
       background:linear-gradient(90deg,#A9D4FF 0%,#5C7CE6 55%,#2F2A8C 100%); }
  .color .gradnote{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em;
       text-transform:uppercase; color:var(--ink-muted); margin-top:8px;
       display:flex; justify-content:space-between; }
  .color .sets{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:22px;
       margin-top:24px; flex:1; }
  .color .set h4{ font-family:var(--mono); font-size:9.5px; font-weight:600;
       letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink);
       margin-bottom:10px; }
  .swrow{ display:flex; align-items:center; gap:11px; padding:6px 0;
       border-bottom:1px solid var(--hairline); }
  .swrow:last-child{ border-bottom:0; }
  .swrow .sw{ width:26px; height:26px; border-radius:6px; flex:0 0 26px;
       border:1px solid rgba(10,14,26,.12); }
  .swrow .meta{ display:flex; flex-direction:column; line-height:1.25; }
  .swrow .meta .nm{ font-size:11.5px; font-weight:600; color:var(--ink); }
  .swrow .meta .hx{ font-family:var(--mono); font-size:9.5px; color:var(--ink-muted);
       letter-spacing:.04em; }
  .swrow .sig{ margin-left:auto; font-family:var(--mono); font-size:8px;
       letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
  .color .crule{ margin-top:16px; border:1px solid var(--accent-ink);
       border-radius:8px; padding:11px 14px; background:rgba(61,63,169,.05);
       font-size:11.5px; line-height:1.5; color:var(--ink); }
  .color .crule b{ color:var(--accent-ink); }
  .color .crule .mono{ font-family:var(--mono); font-size:10.5px; }

  /* =========================================================
     PAGE 7 — TIPOGRAFÍA
     ========================================================= */
  .typo .specs{ display:flex; flex-direction:column; gap:16px; margin-top:22px; flex:1; }
  .spec-row{ display:grid; grid-template-columns:150px 1fr; gap:24px;
       align-items:center; padding-bottom:16px; border-bottom:1px solid var(--ink3); }
  .spec-row:last-child{ border-bottom:0; padding-bottom:0; }
  .spec-row .info .role{ font-family:var(--mono); font-size:9.5px; font-weight:600;
       letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); }
  .spec-row .info .fam{ font-family:var(--display); font-size:18px; font-weight:600;
       margin-top:5px; letter-spacing:-.01em; }
  .spec-row .info .use{ font-size:10.5px; color:var(--muted); margin-top:5px; line-height:1.4; }
  .sp-archivo{ font-family:var(--logo); font-weight:700; font-stretch:125%;
       font-size:46px; letter-spacing:.04em; background:var(--grad);
       -webkit-background-clip:text; background-clip:text; color:transparent; }
  .sp-fraunces{ font-family:var(--display); font-weight:600; font-size:42px;
       letter-spacing:-.02em; line-height:1; }
  .sp-geist{ font-size:16px; line-height:1.5; color:var(--fg); max-width:58ch; }
  .sp-geist .ms{ color:var(--muted); }
  .sp-mono{ font-family:var(--mono); font-size:14px; font-weight:600;
       letter-spacing:.2em; text-transform:uppercase; color:var(--indigo); }
  .typo .scale{ display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
       font-family:var(--display); color:var(--muted); margin-top:4px; }

  /* =========================================================
     PAGE 8 — MOVIMIENTO
     ========================================================= */
  .motion{ flex-direction:row; gap:0; padding:0; }
  .motion .stage{ flex:0 0 46%; background:var(--ink1); position:relative;
       display:flex; align-items:center; justify-content:center; border-right:1px solid var(--ink3); }
  .motion .stage .sweepwrap{ position:relative; width:300px; height:300px; }
  .motion .stage .radar-static{ position:absolute; inset:0; width:100%; height:100%; }
  .motion .stage .sweepbeam{ position:absolute; inset:0; transform-origin:50% 50%;
       animation:eic-sweep 5.5s linear infinite; }
  @keyframes eic-sweep{ to{ transform:rotate(360deg); } }
  .motion .stage .label{ position:absolute; bottom:16mm; left:0; right:0; text-align:center;
       font-family:var(--mono); font-size:9.5px; letter-spacing:.18em;
       text-transform:uppercase; color:var(--muted); }
  .motion .body{ flex:1; padding:20mm 22mm; display:flex; flex-direction:column; }
  .motion .specs{ margin-top:24px; display:flex; flex-direction:column; gap:13px; }
  .motion .mrow{ display:flex; gap:14px; align-items:baseline; padding-bottom:13px;
       border-bottom:1px solid var(--ink3); }
  .motion .mrow:last-child{ border-bottom:0; }
  .motion .mrow .k{ font-family:var(--mono); font-size:9.5px; font-weight:600;
       letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); flex:0 0 120px; }
  .motion .mrow .v{ font-size:12.5px; line-height:1.5; color:var(--muted); }
  .motion .mrow .v b{ color:var(--fg); font-weight:600; }
  .motion .mrow .v .num{ font-family:var(--mono); color:var(--fg); }

  /* =========================================================
     PAGE 9 — APLICACIONES
     ========================================================= */
  .apps .grid{ display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:1fr 1fr;
       gap:16px; margin-top:24px; flex:1; }
  .app{ border:1px solid var(--ink3); border-radius:10px; overflow:hidden;
       display:flex; flex-direction:column; background:var(--ink1); }
  .app .thumb{ flex:1; position:relative; overflow:hidden; min-height:0;
       background:var(--ink0); display:flex; flex-direction:column; justify-content:center;
       padding:16px 18px; }
  .app .thumb.paper{ background:var(--paper); color:var(--ink); }
  .app .meta{ padding:11px 16px 13px; border-top:1px solid var(--ink3); }
  .app .meta .nm{ font-family:var(--display); font-size:15px; font-weight:600; letter-spacing:-.01em; }
  .app .meta .ds{ font-size:10.5px; color:var(--muted); margin-top:3px; line-height:1.4; }
  /* mini thumbnails */
  .th-eye{ font-family:var(--mono); font-size:8px; letter-spacing:.2em;
       text-transform:uppercase; color:var(--indigo); }
  .th-h{ font-family:var(--display); font-weight:600; font-size:19px; line-height:1.05;
       margin-top:7px; letter-spacing:-.01em; }
  .th-h.grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .th-rule{ height:2px; width:40px; background:var(--grad); margin-top:9px; }
  .app .thumb.paper .th-eye{ color:var(--accent-ink); }
  .app .thumb.paper .th-rule{ background:var(--grad-light); }
  .th-sig{ display:flex; align-items:center; gap:10px; }
  .th-sig svg{ width:34px; height:34px; }
  .th-sig .lines{ font-size:9px; line-height:1.5; color:var(--muted); }
  .th-sig .lines b{ color:var(--fg); font-weight:600; font-size:11px; }
  .app .thumb.paper .th-sig .lines{ color:var(--ink-muted); }
  .app .thumb.paper .th-sig .lines b{ color:var(--ink); }
  .th-banner{ display:flex; align-items:center; gap:12px; }
  .th-banner svg{ width:40px; height:40px; }
  .th-card{ display:flex; flex-direction:column; height:100%; justify-content:space-between; }
  .th-card .eic{ font-family:var(--logo); font-weight:700; font-stretch:125%; font-size:22px;
       letter-spacing:.04em; background:var(--grad); -webkit-background-clip:text;
       background-clip:text; color:transparent; }
  .th-card .who{ font-size:9.5px; color:var(--muted); line-height:1.5; }
  .th-card .who b{ color:var(--fg); font-weight:600; display:block; font-size:11px; }

  /* =========================================================
     PAGE 10 — CONTACTO
     ========================================================= */
  .closing{ justify-content:center; align-items:center; text-align:center; }
  .closing .lockup{ display:flex; flex-direction:column; align-items:center; gap:22px; }
  .closing .radar-c{ width:88px; height:88px; }
  .closing .word .gr{ font-family:var(--mono); font-size:11px; font-weight:500;
       letter-spacing:.36em; color:var(--muted); display:block; margin-bottom:6px; }
  .closing .word .eic{ font-family:var(--logo); font-weight:700; font-stretch:125%;
       font-size:64px; letter-spacing:.04em; line-height:.9; background:var(--grad);
       -webkit-background-clip:text; background-clip:text; color:transparent; }
  .closing .tag{ font-family:var(--display); font-style:italic; font-weight:500;
       font-size:24px; color:var(--fg); margin-top:34px; }
  .closing .grad-rule{ margin:26px auto 0; }
  .closing .contact{ margin-top:30px; font-family:var(--mono); font-size:12px;
       letter-spacing:.14em; text-transform:uppercase; color:var(--muted); line-height:2.1; }
  .closing .contact b{ color:var(--cyan); }
  .closing .radar-bg{ right:-180px; bottom:-160px; width:520px; height:520px; opacity:.08; }
  .closing .conf{ position:absolute; bottom:18mm; left:0; right:0; text-align:center;
       font-family:var(--mono); font-size:9.5px; letter-spacing:.2em;
       text-transform:uppercase; color:var(--faint-d); }

  /* ---- print ---- */
  @media print{
    body{ background:#fff; padding:0; gap:0; }
    .page{ box-shadow:none; page-break-after:always; break-after:page; }
    .page:last-child{ page-break-after:auto; }
    @page{ size:A4 landscape; margin:0; }
  }
</style>
</head>
<body>

  <!-- ============================== PAGE 1 — COVER ============================== -->
  <section class="page cover">
    <svg class="radar-bg radar-hero" viewBox="0 0 100 100" aria-hidden="true"><use href="#eic-radar"/></svg>

    <div class="topline">
      <div class="lockup">
        <svg class="radar-lockup" viewBox="0 0 100 100" aria-hidden="true"><use href="#eic-radar"/></svg>
        <div class="wordwrap">
          <span class="gr">GRUPO</span>
          <span class="eic">EIC</span>
        </div>
      </div>
      <div class="conf">Confidencial</div>
    </div>

    <div class="center">
      <div class="eyebrow2">Sistema de identidad</div>
      <h1>Manual<br>de marca</h1>
      <div class="manual">Inteligencia que anticipa.</div>
      <p class="tag">El estándar visual de Grupo EIC: logotipo, color, tipografía y movimiento, en un solo lugar.</p>
    </div>

    <div class="baseline">
      <span>grupoeic.com</span>
      <span class="ed">
        <b>Edición 2026.1</b><br>
        Documento EIC-BRAND-001
      </span>
    </div>
  </section>

  <!-- ============================== PAGE 2 — ESENCIA ============================== -->
  <section class="page essence">
    <svg class="radar-bg" viewBox="0 0 100 100" aria-hidden="true"><use href="#eic-radar"/></svg>
    <div class="rh">
      <span>Manual de marca · Grupo EIC</span>
      <span class="lockmini"><span class="eic">EIC</span><span class="gr">GRUPO</span></span>
    </div>

    <div class="kicker"><span class="n">01</span> Esencia y posicionamiento</div>
    <div class="big">Una firma de inteligencia que <span class="em">ve antes</span>, y traduce lo que ve en decisiones.</div>

    <div class="cols">
      <div class="col">
        <h4>Qué es Grupo EIC</h4>
        <p><b>Inteligencia y estrategia.</b> Anticipamos el entorno —medios, redes, actores y narrativas— y lo convertimos en criterio accionable para quien decide.</p>
      </div>
      <div class="col">
        <h4>Promesa de marca</h4>
        <p><b>Inteligencia que anticipa. Estrategia que define.</b> No describimos el presente: leemos las señales tempranas y proponemos el movimiento siguiente.</p>
      </div>
      <div class="col">
        <h4>El tono visual</h4>
        <p><b>Briefing institucional de inteligencia.</b> Lienzo azul profundo, un único degradado firma celeste→índigo→violeta y el radar. Sobrio, clasificado, premium —nunca neón barato.</p>
      </div>
    </div>

    <div class="pf"><span>Inteligencia que anticipa · Estrategia que define</span><span class="pg">02 / 10</span></div>
  </section>

  <!-- ============================== PAGE 3 — EL SÍMBOLO ============================== -->
  <section class="page symbol">
    <div class="stage">
      <div class="clear"></div>
      <span class="clear-tag">Área de respeto</span>
      <svg class="radar-main" viewBox="0 0 100 100" aria-hidden="true"><use href="#eic-radar"/></svg>
    </div>
    <div class="body">
      <div class="rh">
        <span>El símbolo</span>
        <span class="lockmini"><span class="eic">EIC</span><span class="gr">GRUPO</span></span>
      </div>
      <div class="kicker"><span class="n">02</span> El símbolo</div>
      <h2 class="title">El radar</h2>
      <p class="lede">Un haz que empuja <i>hacia adelante</i> —anticipación—, no un anillo de vigilancia de 360°. Cuatro elementos, sin retícula central.</p>

      <div class="anat">
        <div class="row"><span class="tag">Sweep frontal</span><span class="desc"><b>La cuña que barre adelante.</b> Es estructural: hace que el símbolo se lea como radar y no como diana. Presente en todas las variantes.</span></div>
        <div class="row"><span class="tag">Arcos abiertos</span><span class="desc">Tres arcos <b>que abren</b> hacia el avance —nunca anillos concéntricos cerrados.</span></div>
        <div class="row"><span class="tag">Aguja de barrido</span><span class="desc">La línea de escaneo que sale del centro hacia el blip.</span></div>
        <div class="row"><span class="tag">Blip de detección</span><span class="desc">El único punto de color de estado: <b>cian</b> sobre oscuro, <b>royal</b> sobre papel.</span></div>
      </div>

      <div class="specs">
        <div class="spec">
          <div class="lab">Tamaño mínimo</div>
          <div class="val"><span class="min"><svg viewBox="0 0 100 100" aria-hidden="true"><use href="#eic-radar"/></svg> ≥ 24 px</span></div>
        </div>
        <div class="spec">
          <div class="lab">Área de respeto</div>
          <div class="val">= radio exterior</div>
        </div>
      </div>

      <div class="pf"><span>Sweep + arcos + aguja + blip · sin crosshair</span><span class="pg">03 / 10</span></div>
    </div>
  </section>

  <!-- ============================== PAGE 4 — LOGO SYSTEM ============================== -->
  <section class="page logosys">
    <div class="rh">
      <span>Sistema de logotipo</span>
      <span class="lockmini"><span class="eic">EIC</span><span class="gr">GRUPO</span></span>
    </div>
    <div class="kicker"><span class="n">03</span> Sistema de logotipo</div>
    <h2 class="title">Las marcas</h2>
    <p class="lede">El lockup principal lidera; mark, lettermark y variantes mono cubren cada superficie. Todos los archivos viven en <span class="mono" style="color:var(--cyan)">brand/logo/</span>.</p>

    <div class="grid">
      <div class="tile tile--dark">
        <img src="../logo/eic-lockup-horizontal-on-dark.svg" alt="Lockup horizontal sobre oscuro">
        <span class="cap">Lockup horizontal · on-dark</span>
      </div>
      <div class="tile tile--dark">
        <img src="../logo/eic-mark.svg" alt="Radar a color">
        <span class="cap">Radar · color</span>
      </div>
      <div class="tile tile--dark">
        <img src="../logo/eic-lettermark.svg" alt="Lettermark EIC">
        <span class="cap">Lettermark · on-dark</span>
      </div>
      <div class="tile tile--light">
        <img src="../logo/eic-lockup-horizontal-on-light.svg" alt="Lockup horizontal sobre papel">
        <span class="cap">Lockup horizontal · on-light</span>
      </div>
      <div class="tile tile--dark">
        <img src="../logo/eic-mark-mono-white.svg" alt="Radar mono blanco">
        <span class="cap">Mono · blanco</span>
      </div>
      <div class="tile tile--light">
        <img src="../logo/eic-mark-mono-black.svg" alt="Radar mono negro">
        <span class="cap">Mono · negro</span>
      </div>
    </div>

    <div class="pf"><span>SVG es el máster · escala infinita, sin fuente instalada</span><span class="pg">04 / 10</span></div>
  </section>

  <!-- ============================== PAGE 5 — DON'TS ============================== -->
  <section class="page donts">
    <div class="rh">
      <span>Usos incorrectos</span>
      <span class="lockmini"><span class="eic">EIC</span><span class="gr">GRUPO</span></span>
    </div>
    <div class="kicker"><span class="n">04</span> Usos incorrectos</div>
    <h2 class="title">Lo que nunca se hace</h2>

    <div class="grid">
      <div class="dont">
        <span class="x">❌</span>
        <div class="vis"><div class="stretchwrap"><svg viewBox="0 0 100 100" aria-hidden="true"><use href="#eic-radar"/></svg></div></div>
        <h5>No deformar</h5>
        <p>No estirar, comprimir ni rotar la marca. Escalá siempre de forma proporcional.</p>
      </div>
      <div class="dont">
        <span class="x">❌</span>
        <div class="vis recolorwrap"><svg viewBox="0 0 100 100" aria-hidden="true"><use href="#eic-radar"/></svg></div>
        <h5>No recolorear</h5>
        <p>No cambiar el degradado por colores fuera de paleta. Usá las variantes mono / on-light.</p>
      </div>
      <div class="dont">
        <span class="x">❌</span>
        <div class="vis"><div class="badwhite"><span class="azuretext">EIC</span></div></div>
        <h5>No usar el tono claro sobre blanco</h5>
        <p>El stop claro <span class="mono" style="font-size:10px">#A9D4FF</span> falla contraste sobre papel. Usá Royal o las piezas on-light.</p>
      </div>
      <div class="dont">
        <span class="x">❌</span>
        <div class="vis shadowwrap"><svg viewBox="0 0 100 100" aria-hidden="true"><use href="#eic-radar"/></svg></div>
        <h5>No agregar sombras ni glow</h5>
        <p>Nada de drop-shadow, brillos ni efectos. La marca es plana y limpia.</p>
      </div>
      <div class="dont">
        <span class="x">❌</span>
        <div class="vis"><svg viewBox="0 0 100 100" aria-hidden="true">
          <g fill="none" stroke="#FF7A4D" stroke-linecap="round" stroke-width="2.4" opacity=".9">
            <circle cx="50" cy="50" r="31"/><circle cx="50" cy="50" r="19"/>
            <line x1="50" y1="14" x2="50" y2="86"/><line x1="14" y1="50" x2="86" y2="50"/>
          </g>
        </svg></div>
        <h5>No volver al crosshair</h5>
        <p>Nada de retícula central ni anillos cerrados: eso regresa el símbolo a una mira.</p>
      </div>
      <div class="dont">
        <span class="x">❌</span>
        <div class="vis"><svg viewBox="0 0 100 100" aria-hidden="true">
          <path d="M12.76 28.50 A43 43 0 1 1 80.93 79.87" fill="none" stroke="#FF7A4D" stroke-width="2.4" stroke-linecap="round" opacity=".55"/>
          <path d="M28.08 28.08 A31 31 0 0 1 77.11 65.03" fill="none" stroke="#FF7A4D" stroke-width="2" stroke-linecap="round" opacity=".4"/>
          <line x1="50" y1="50" x2="77" y2="14" stroke="#FF7A4D" stroke-width="2.3" stroke-linecap="round" opacity=".4"/>
        </svg></div>
        <h5>No quitar el sweep</h5>
        <p>Sin la cuña frontal el símbolo pierde dirección y deja de leerse como radar.</p>
      </div>
    </div>

    <div class="pf"><span>Ante la duda, volvé a los archivos máster de brand/logo/</span><span class="pg">05 / 10</span></div>
  </section>

  <!-- ============================== PAGE 6 — COLOR (paper) ============================== -->
  <section class="page page--paper color">
    <div class="rh">
      <span>Color</span>
      <span class="lockmini"><span class="eic">EIC</span><span class="gr">GRUPO</span></span>
    </div>
    <div class="kicker"><span class="n">05</span> Color</div>
    <h2 class="title">El degradado firma</h2>
    <p class="lede">Un único degradado lleva la marca: el radar, los titulares y los filos. Es firma, no relleno —nunca un panel plano de azul brillante.</p>

    <div class="ramp">
      <div class="seg" style="background:#D0E4FF;color:#0A0E1A">Sky · #D0E4FF</div>
      <div class="seg" style="background:#A9D4FF;color:#0A0E1A">Azure · #A9D4FF</div>
      <div class="seg" style="background:#7B97EA;color:#0A0E1A">Periwinkle · #7B97EA</div>
      <div class="seg" style="background:#5C7CE6;color:#fff">Indigo · #5C7CE6</div>
      <div class="seg" style="background:#3D3FA9;color:#fff">Royal · #3D3FA9</div>
      <div class="seg" style="background:#2F2A8C;color:#fff">Deep · #2F2A8C</div>
    </div>
    <div class="gradbar"></div>
    <div class="gradnote"><span>On-dark · #A9D4FF → #5C7CE6 (55%) → #2F2A8C</span><span>135° · único eje</span></div>

    <div class="sets">
      <div class="set">
        <h4>Superficies (navy)</h4>
        <div class="swrow"><span class="sw" style="background:#04060C"></span><span class="meta"><span class="nm">Void</span><span class="hx">#04060C</span></span><span class="sig">backdrop</span></div>
        <div class="swrow"><span class="sw" style="background:#05070D"></span><span class="meta"><span class="nm">Ink 0</span><span class="hx">#05070D</span></span><span class="sig">página</span></div>
        <div class="swrow"><span class="sw" style="background:#0A0E1A"></span><span class="meta"><span class="nm">Ink 1</span><span class="hx">#0A0E1A</span></span><span class="sig">elevado</span></div>
        <div class="swrow"><span class="sw" style="background:#11162A"></span><span class="meta"><span class="nm">Ink 2</span><span class="hx">#11162A</span></span><span class="sig">cards</span></div>
        <div class="swrow"><span class="sw" style="background:#1A2140"></span><span class="meta"><span class="nm">Ink 3</span><span class="hx">#1A2140</span></span><span class="sig">hairline</span></div>
        <div class="swrow"><span class="sw" style="background:#273058"></span><span class="meta"><span class="nm">Ink 4</span><span class="hx">#273058</span></span><span class="sig">borde</span></div>
      </div>
      <div class="set">
        <h4>Tinta sobre papel</h4>
        <div class="swrow"><span class="sw" style="background:#0A0E1A"></span><span class="meta"><span class="nm">Ink</span><span class="hx">#0A0E1A</span></span><span class="sig">texto</span></div>
        <div class="swrow"><span class="sw" style="background:#5B5B6B"></span><span class="meta"><span class="nm">Ink muted</span><span class="hx">#5B5B6B</span></span><span class="sig">AA</span></div>
        <div class="swrow"><span class="sw" style="background:#9A9AAB"></span><span class="meta"><span class="nm">Ink faint</span><span class="hx">#9A9AAB</span></span><span class="sig">legal</span></div>
        <div class="swrow"><span class="sw" style="background:#E3E5EA"></span><span class="meta"><span class="nm">Hairline</span><span class="hx">#E3E5EA</span></span><span class="sig">reglas</span></div>
        <div class="swrow"><span class="sw" style="background:#3D3FA9"></span><span class="meta"><span class="nm">Royal</span><span class="hx">#3D3FA9</span></span><span class="sig">enlace AA</span></div>
        <div class="swrow"><span class="sw" style="background:#F6F4ED"></span><span class="meta"><span class="nm">Bone</span><span class="hx">#F6F4ED</span></span><span class="sig">papel cálido</span></div>
      </div>
      <div class="set">
        <h4>Señales (solo estado)</h4>
        <div class="swrow"><span class="sw" style="background:#7FE5FF"></span><span class="meta"><span class="nm">Cyan</span><span class="hx">#7FE5FF</span></span><span class="sig">live / blip</span></div>
        <div class="swrow"><span class="sw" style="background:#FF7A4D"></span><span class="meta"><span class="nm">Hostile</span><span class="hx">#FF7A4D</span></span><span class="sig">amenaza</span></div>
        <div class="swrow"><span class="sw" style="background:#9AFFC7"></span><span class="meta"><span class="nm">Friendly</span><span class="hx">#9AFFC7</span></span><span class="sig">alineado</span></div>
        <div class="swrow"><span class="sw" style="background:#FFC76B"></span><span class="meta"><span class="nm">Alert</span><span class="hx">#FFC76B</span></span><span class="sig">watch</span></div>
        <div class="crule">Contraste: en papel el texto y los enlaces van en <b>Royal #3D3FA9</b> (7.8:1, AA) — <b>no</b> en Indigo <span class="mono">#5C7CE6</span> (3.5:1, falla). Los stops claros y las señales son solo para fondo oscuro.</div>
      </div>
    </div>

    <div class="pf"><span>Dos rampas · on-dark y on-light · ningún stop inventado</span><span class="pg">06 / 10</span></div>
  </section>

  <!-- ============================== PAGE 7 — TIPOGRAFÍA ============================== -->
  <section class="page typo">
    <div class="rh">
      <span>Tipografía</span>
      <span class="lockmini"><span class="eic">EIC</span><span class="gr">GRUPO</span></span>
    </div>
    <div class="kicker"><span class="n">06</span> Tipografía</div>
    <h2 class="title">Cuatro voces</h2>

    <div class="specs">
      <div class="spec-row">
        <div class="info"><div class="role">Logotipo</div><div class="fam">Archivo</div><div class="use">Solo el lettermark "EIC". Caps, 700, width 125, +1.2% tracking.</div></div>
        <div class="sp-archivo">EIC</div>
      </div>
      <div class="spec-row">
        <div class="info"><div class="role">Display</div><div class="fam">Fraunces</div><div class="use">Titulares editoriales. Autoridad de "broadsheet de inteligencia".</div></div>
        <div>
          <div class="sp-fraunces">Inteligencia que anticipa</div>
          <div class="scale"><span style="font-size:30px">Aa</span><span style="font-size:22px">Aa</span><span style="font-size:16px">Aa</span><span style="font-size:12px">Aa</span></div>
        </div>
      </div>
      <div class="spec-row">
        <div class="info"><div class="role">Cuerpo / UI</div><div class="fam">Geist</div><div class="use">Párrafos, tablas, interfaz. Numerales tabulares para métricas.</div></div>
        <div class="sp-geist">Leemos las señales tempranas del entorno —medios, redes, actores y narrativas— y las traducimos en decisiones. <span class="ms">El cuerpo se compone en Geist, con numerales tabulares <span class="num">0123456789</span> para cualquier dato.</span></div>
      </div>
      <div class="spec-row">
        <div class="info"><div class="role">Mono / datos</div><div class="fam">JetBrains Mono</div><div class="use">Eyebrows, etiquetas, códigos y coordenadas. Caps, +0.16–0.22em.</div></div>
        <div class="sp-mono">CONFIDENCIAL · EIC-BRAND-001 · 25°16′S 57°38′W</div>
      </div>
    </div>

    <div class="pf"><span>"GRUPO" se demota a etiqueta mono, nunca degradado</span><span class="pg">07 / 10</span></div>
  </section>

  <!-- ============================== PAGE 8 — MOVIMIENTO ============================== -->
  <section class="page motion">
    <div class="stage">
      <div class="sweepwrap">
        <svg class="radar-static" viewBox="0 0 100 100" aria-hidden="true">
          <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"/>
          </g>
          <circle cx="50" cy="50" r="2.6" fill="url(#rg)"/>
        </svg>
        <svg class="sweepbeam" viewBox="0 0 100 100" aria-hidden="true">
          <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"/>
          <path d="M50 50 L77.08 14.06" fill="none" stroke="url(#rg)" stroke-width="2.3" stroke-linecap="round"/>
          <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"/>
        </svg>
      </div>
      <div class="label">Una rotación · 5.5 s · sentido horario</div>
    </div>
    <div class="body">
      <div class="rh">
        <span>Movimiento</span>
        <span class="lockmini"><span class="eic">EIC</span><span class="gr">GRUPO</span></span>
      </div>
      <div class="kicker"><span class="n">07</span> Movimiento</div>
      <h2 class="title">El barrido</h2>
      <p class="lede">La marca se mueve como su símbolo: un escaneo calmo y continuo, nunca rebote.</p>

      <div class="specs">
        <div class="mrow"><span class="k">Barrido</span><span class="v">Una rotación horaria cada <span class="num">5.5 s</span>. Es la firma de movimiento —para momentos hero / carga, no como cromo constante.</span></div>
        <div class="mrow"><span class="k">Blips</span><span class="v">Los puntos de detección <b>encienden al pasar el haz</b>, con la misma cadencia de <span class="num">5.5 s</span>.</span></div>
        <div class="mrow"><span class="k">Easings</span><span class="v"><span class="num">out</span> cubic-bezier(.16,1,.3,1) para entradas · <span class="num">in-out</span> para traslados · <span class="num">spring</span> solo énfasis raro.</span></div>
        <div class="mrow"><span class="k">Duraciones</span><span class="v"><span class="num">fast</span> 180ms · <span class="num">base</span> 360ms · <span class="num">slow</span> 680ms · <span class="num">slower</span> 1200ms.</span></div>
        <div class="mrow"><span class="k">Accesibilidad</span><span class="v">Se respeta <b>prefers-reduced-motion</b>: todo colapsa a ~1ms y el barrido queda estático —la silueta sigue leyéndose como radar.</span></div>
      </div>

      <div class="pf"><span>Calmo y continuo · nunca bouncy</span><span class="pg">08 / 10</span></div>
    </div>
  </section>

  <!-- ============================== PAGE 9 — APLICACIONES ============================== -->
  <section class="page apps">
    <div class="rh">
      <span>Aplicaciones</span>
      <span class="lockmini"><span class="eic">EIC</span><span class="gr">GRUPO</span></span>
    </div>
    <div class="kicker"><span class="n">08</span> Aplicaciones</div>
    <h2 class="title">El kit en uso</h2>

    <div class="grid">
      <div class="app">
        <div class="thumb">
          <div class="th-eye">Dosier · Propuesta</div>
          <div class="th-h grad">Inteligencia<br>que anticipa.</div>
          <div class="th-rule"></div>
        </div>
        <div class="meta"><div class="nm">Deck 16:9</div><div class="ds">Presentaciones y briefings. Portada con radar de fondo.</div></div>
      </div>
      <div class="app">
        <div class="thumb">
          <div class="th-eye">Dosier institucional</div>
          <div class="th-h">Escenarios y<br>riesgos 2026</div>
          <div class="th-rule"></div>
        </div>
        <div class="meta"><div class="nm">Portada de dosier</div><div class="ds">A4 vertical para propuestas y reportes confidenciales.</div></div>
      </div>
      <div class="app">
        <div class="thumb paper">
          <div class="th-card">
            <div class="th-eye">Grupo EIC</div>
            <div>
              <div style="font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink)">Nombre Apellido</div>
              <div class="who" style="color:var(--ink-muted)">Estrategia & Inteligencia<br>contacto@grupoeic.com</div>
            </div>
          </div>
        </div>
        <div class="meta"><div class="nm">Tarjeta</div><div class="ds">Personal, sobre papel, con lettermark y datos de contacto.</div></div>
      </div>
      <div class="app">
        <div class="thumb paper">
          <div class="th-eye">Membrete · Factura</div>
          <div class="th-h" style="color:var(--ink)">Documento<br>institucional</div>
          <div class="th-rule"></div>
        </div>
        <div class="meta"><div class="nm">One-pager / membrete</div><div class="ds">Cartas, facturas y one-pagers sobre papel, tinta + Royal.</div></div>
      </div>
      <div class="app">
        <div class="thumb">
          <div class="th-sig">
            <svg viewBox="0 0 100 100" aria-hidden="true"><use href="#eic-radar"/></svg>
            <div class="lines"><b>Nombre Apellido</b><br>Grupo EIC · grupoeic.com<br>contacto@grupoeic.com</div>
          </div>
        </div>
        <div class="meta"><div class="nm">Firma de email</div><div class="ds">Bloque HTML inline, listo para pegar en el cliente de correo.</div></div>
      </div>
      <div class="app">
        <div class="thumb">
          <div class="th-banner">
            <svg viewBox="0 0 100 100" aria-hidden="true"><use href="#eic-radar"/></svg>
            <div>
              <div class="th-eye">Avatar · OG · Banner</div>
              <div class="th-h grad" style="font-size:16px">Grupo EIC</div>
            </div>
          </div>
        </div>
        <div class="meta"><div class="nm">Banners sociales</div><div class="ds">Avatar, OG 1200×630 y covers para X, LinkedIn y Facebook.</div></div>
      </div>
    </div>

    <div class="pf"><span>Todas las piezas comparten los mismos tokens</span><span class="pg">09 / 10</span></div>
  </section>

  <!-- ============================== PAGE 10 — CONTACTO ============================== -->
  <section class="page closing">
    <svg class="radar-bg" viewBox="0 0 100 100" aria-hidden="true"><use href="#eic-radar"/></svg>

    <div class="lockup">
      <svg class="radar-c" viewBox="0 0 100 100" aria-hidden="true"><use href="#eic-radar"/></svg>
      <div class="word">
        <span class="gr">GRUPO</span>
        <span class="eic">EIC</span>
      </div>
    </div>

    <div class="tag">Inteligencia que anticipa. Estrategia que define.</div>
    <div class="grad-rule"></div>
    <div class="contact">
      <b>grupoeic.com</b><br>
      contacto@grupoeic.com
    </div>

    <div class="conf">Manual de marca · Edición 2026.1 · Confidencial</div>
  </section>

  <!-- ====== canonical radar defs — inlined ONCE, reused 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>
