pflores.linkedcorp.net/tarjeta-presentacion-patricia-flores.html

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tarjeta de Presentación | Patricia Flores</title>
  <style>
    :root {
      --bg: #f3efe7;
      --card: #0f1923;
      --card-soft: #162433;
      --text: #f5f3ef;
      --muted: rgba(245, 243, 239, 0.72);
      --accent: #c6a56f;
      --line: rgba(255, 255, 255, 0.12);
      --radius: 28px;
      --shadow: 0 28px 70px rgba(15, 25, 35, 0.22);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 2rem;
      background:
        radial-gradient(circle at top left, rgba(198, 165, 111, 0.22), transparent 28%),
        linear-gradient(180deg, #f8f5ef 0%, var(--bg) 100%);
      font-family: "Segoe UI", Arial, sans-serif;
      color: var(--text);
    }

    .card {
      width: min(100%, 980px);
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 1.4rem;
      padding: 1.5rem;
      border-radius: 34px;
      background: linear-gradient(145deg, var(--card) 0%, var(--card-soft) 100%);
      box-shadow: var(--shadow);
    }

    .panel {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.03);
      overflow: hidden;
    }

    .identity {
      display: grid;
      grid-template-columns: 180px 1fr;
      gap: 1.25rem;
      padding: 1.25rem;
      align-items: center;
    }

    .identity img {
      width: 100%;
      aspect-ratio: 1 / 1.1;
      object-fit: cover;
      border-radius: 22px;
      border: 1px solid var(--line);
    }

    .eyebrow {
      margin: 0 0 0.6rem;
      color: var(--accent);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    h1 {
      margin: 0;
      font: 700 clamp(2rem, 4vw, 3rem) Georgia, serif;
      line-height: 0.95;
    }

    .role {
      margin: 0.85rem 0 0;
      color: var(--muted);
      font-size: 1.02rem;
      line-height: 1.55;
    }

    .highlights {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.8rem;
      padding: 0 1.25rem 1.25rem;
    }

    .metric {
      padding: 0.95rem;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.03);
    }

    .metric strong {
      display: block;
      margin-bottom: 0.35rem;
      color: var(--accent);
      font-size: 1.25rem;
    }

    .metric span {
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.5;
    }

    .contact {
      display: grid;
      gap: 0.8rem;
      padding: 1.25rem;
    }

    .contact a,
    .contact p {
      margin: 0;
      color: var(--text);
      text-decoration: none;
      line-height: 1.5;
    }

    .contact p span {
      display: block;
      color: var(--muted);
      font-size: 0.84rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 0.15rem;
    }

    .qr-panel {
      display: grid;
      align-content: space-between;
      padding: 1.25rem;
    }

    .qr-wrap {
      display: grid;
      gap: 1rem;
      justify-items: center;
      text-align: center;
    }

    .qr-wrap img {
      width: min(100%, 250px);
      padding: 0.9rem;
      border-radius: 24px;
      background: #fff;
    }

    .qr-wrap p {
      margin: 0;
      color: var(--muted);
      line-height: 1.6;
    }

    .url {
      color: var(--accent);
      font-weight: 700;
      word-break: break-word;
    }

    .footer {
      padding-top: 1rem;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 0.92rem;
      line-height: 1.6;
    }

    @media (max-width: 820px) {
      .card,
      .identity {
        grid-template-columns: 1fr;
      }

      .highlights {
        grid-template-columns: 1fr;
      }
    }

    @media print {
      body {
        padding: 0;
        background: #fff;
      }

      .card {
        box-shadow: none;
      }
    }
  </style>
</head>
<body>
  <main class="card">
    <section class="panel">
      <div class="identity">
        <img src="img-pflores.jpeg" alt="Patricia Soledad Flores Sánchez">
        <div>
          <p class="eyebrow">Tarjeta de presentación</p>
          <h1>Patricia Soledad Flores Sánchez</h1>
          <p class="role">Gerente / Jefa de Operaciones Financieras | Sector financiero y microfinanzas</p>
        </div>
      </div>

      <div class="highlights">
        <article class="metric">
          <strong>22+</strong>
          <span>Años de trayectoria en banca y microfinanzas.</span>
        </article>
        <article class="metric">
          <strong>26</strong>
          <span>Agencias bajo liderazgo operativo a nivel nacional.</span>
        </article>
        <article class="metric">
          <strong>48</strong>
          <span>Personas coordinadas en la estructura operativa.</span>
        </article>
      </div>

      <div class="contact">
        <p><span>Correo</span><a href="mailto:patricflorsanchez@gmail.com">patricflorsanchez@gmail.com</a></p>
        <p><span>Teléfono</span><a href="tel:+593994698405">+593 99 469 8405</a></p>
        <p><span>Ubicación</span>Loja, Ecuador</p>
        <p><span>LinkedIn</span><a href="https://linkedin.com/in/patricia-soledad-flores-sanchez-43b84418">linkedin.com/in/patricia-soledad-flores-sanchez-43b84418</a></p>
      </div>
    </section>

    <aside class="panel qr-panel">
      <div class="qr-wrap">
        <p class="eyebrow">Perfil web</p>
        <img src="tarjeta-patricia-flores-qr.png" alt="Código QR hacia pflres.linkedcorp.net">
        <p>Escanea el código QR para abrir el perfil profesional online.</p>
        <p class="url">https://pflres.linkedcorp.net</p>
      </div>

      <div class="footer">
        Ejecutiva financiera con enfoque en operaciones, transformación digital, control interno y liderazgo de equipos multidisciplinarios.
      </div>
    </aside>
  </main>
</body>
</html>