<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grupo EIC — Membrete / Factura</title>
<!--
  Grupo EIC — letterhead + invoice
  ------------------------------------------------------------------
  One template for documents, letters, proposals and invoices. Open it in a
  browser and "Print -> Save as PDF" for a ready-to-send A4.
  - The logo is referenced from ../logo/ (keep this file inside brand/templates/).
  - Web fonts (Fraunces / Geist / JetBrains Mono) load from Google Fonts; without
    internet it falls back gracefully to system fonts.
  - Duplicate / edit the .invoice section, or delete it to use as a plain letter.
  Visible copy is intentionally in Spanish (client-facing deliverable).
-->
<link rel="stylesheet" href="eic-tokens.css">
<style>
  /* All design tokens come from eic-tokens.css (do not redefine them here).
     Paper-context text uses --ink-muted / --ink-faint; rules use --hairline. */
  *{box-sizing:border-box}
  body{margin:0;background:var(--paper2);color:var(--ink);font-family:var(--sans);
       font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;}
  .page{width:210mm;min-height:297mm;margin:24px auto;background:#fff;
        padding:22mm 20mm;box-shadow:0 10px 40px rgba(10,14,26,.14);}
  /* ---- header ---- */
  header{display:flex;align-items:flex-start;justify-content:space-between;
         padding-bottom:18px;border-bottom:3px solid var(--indigo);}
  header img{height:44px;display:block}
  .company{text-align:right;font-size:12px;color:var(--ink-muted);line-height:1.5}
  .company b{color:var(--ink)}
  /* ---- title ---- */
  h1{font-family:var(--display);font-weight:600;font-size:32px;letter-spacing:-.02em;
     margin:34px 0 2px}
  .sub{color:var(--ink-faint);font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.1em}
  /* ---- grilla meta ---- */
  .meta{display:flex;gap:48px;margin:26px 0 8px}
  .meta h4{font-family:var(--mono);font-size:10px;text-transform:uppercase;
           letter-spacing:.14em;color:var(--ink-faint);margin:0 0 4px}
  .meta div b{font-weight:600}
  /* ---- tabla factura ---- */
  table{width:100%;border-collapse:collapse;margin-top:28px}
  th{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;
     color:var(--ink-faint);text-align:left;padding:0 0 10px;border-bottom:1px solid var(--hairline)}
  th.r,td.r{text-align:right}
  td{padding:12px 0;border-bottom:1px solid var(--hairline);vertical-align:top}
  td.num{font-family:var(--mono)}
  .totals{margin-top:18px;margin-left:auto;width:46%}
  .totals tr td{border:0;padding:6px 0}
  .totals .grand td{border-top:2px solid var(--ink);padding-top:12px;
                    font-family:var(--display);font-weight:700;font-size:18px}
  .grand .r{color:var(--royal)}
  /* ---- cuerpo de carta (alternativa a la factura) ---- */
  .letter{margin-top:30px;max-width:64ch}
  .letter p{margin:0 0 14px}
  /* ---- footer ---- */
  footer{margin-top:48px;padding-top:14px;border-top:1px solid var(--hairline);
         display:flex;justify-content:space-between;font-size:11px;color:var(--ink-faint)}
  .chip{display:inline-block;width:8px;height:8px;border-radius:2px;
        background:var(--grad);margin-right:6px}
  @media print{
    body{background:#fff}
    .page{margin:0;box-shadow:none;width:auto;min-height:auto;padding:16mm}
    @page{size:A4;margin:0}
  }
</style>
</head>
<body>
<div class="page">

  <header>
    <img src="../logo/eic-lockup-horizontal-on-light.svg" alt="Grupo EIC">
    <div class="company">
      <b>Grupo EIC</b><br>
      contacto@grupoeic.com<br>
      grupoeic.com
    </div>
  </header>

  <!-- ===== MODO FACTURA (borrá este bloque para usar como carta) ===== -->
  <h1>Factura</h1>
  <div class="sub">N.º EIC-2026-001</div>

  <div class="meta">
    <div>
      <h4>Facturar a</h4>
      <div><b>Nombre del cliente</b><br>Empresa S.A.<br>Dirección<br>Ciudad, País<br>RUC 00000000-0</div>
    </div>
    <div>
      <h4>Emisión</h4>
      <div>01/01/2026</div>
      <h4 style="margin-top:14px">Vencimiento</h4>
      <div>15/01/2026</div>
    </div>
  </div>

  <table>
    <thead>
      <tr><th>Descripción</th><th class="r">Cant.</th><th class="r">Unitario</th><th class="r">Importe</th></tr>
    </thead>
    <tbody>
      <tr><td>Servicio / descripción del producto</td><td class="r num">1</td><td class="r num">1.000.000</td><td class="r num">1.000.000</td></tr>
      <tr><td>Otra línea de detalle</td><td class="r num">2</td><td class="r num">250.000</td><td class="r num">500.000</td></tr>
    </tbody>
  </table>

  <table class="totals">
    <tr><td>Subtotal</td><td class="r num">1.500.000</td></tr>
    <tr><td>IVA (10%)</td><td class="r num">150.000</td></tr>
    <tr class="grand"><td>Total</td><td class="r num">PYG 1.650.000</td></tr>
  </table>
  <!-- ===== fin modo factura ===== -->

  <!-- ===== MODO CARTA / PROPUESTA (descomentá y borrá el bloque de factura)
  <h1>Asunto del documento</h1>
  <div class="sub">Briefing · 01/01/2026</div>
  <div class="letter">
    <p>Estimado/a [Nombre],</p>
    <p>Cuerpo del documento…</p>
    <p>Cordialmente,<br><b>Nombre Apellido</b><br>Cargo · Grupo EIC</p>
  </div>
  ===== -->

  <footer>
    <div><span class="chip"></span>Gracias por confiar en Grupo EIC.</div>
    <div>grupoeic.com · contacto@grupoeic.com</div>
  </footer>

</div>
</body>
</html>
