/* ============================================================
   Colombia Fintech — Webinar posters (editor de piezas)
   Estilos compartidos de las 3 plantillas (1 / 2 / 3 panelistas).
   Lienzo nativo: 1080 × 1350 (Instagram feed 4:5).
   Las fuentes (Wasa / Aeonik / PP Supply Mono) las carga colors_and_type.css.
   ============================================================ */

:root{
  --ink:#2b3241;
  --ink-soft:#3a4f60;
  --cyan:#78c6dd;
  --cyan-deep:#5db5cf;
  --blue-100:#b2dae6;
  --blue-150:#a5d5e3;
  --blue-50:#cfe7ef;
  --white:#ffffff;
  --headline-on-photo:#92d6ea;

  --font-poster-display:"Wasa","Arial Black",sans-serif;
  --font-poster-body:"Aeonik",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-poster-mono:"PP Supply Mono",ui-monospace,"SFMono-Regular",monospace;
}

/* ---------- Poster frame ---------- */
.poster{
  position:relative;
  width:1080px;
  height:1350px;
  overflow:hidden;
  font-family:var(--font-poster-body);
  color:var(--ink);
  background:var(--blue-100);
  -webkit-font-smoothing:antialiased;
}
.poster *{box-sizing:border-box}

/* ---------- Pills (EVENTO / WEBINAR) ---------- */
.poster .pills{display:flex;gap:16px}
.poster .pill{
  font-family:var(--font-poster-mono);font-weight:500;font-size:24px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);background:var(--cyan);border-radius:999px;
  padding:11px 34px;line-height:1;
}

/* ---------- Eyebrow ---------- */
.poster .eyebrow{
  font-family:var(--font-poster-mono);font-weight:500;font-size:24px;letter-spacing:.16em;text-transform:uppercase;
}

/* ---------- Colombia Fintech lockup (logo real, recoloreable) ---------- */
.poster .cf-logo{display:block;line-height:0}
.poster .cf-logo img{height:56px;width:auto;display:block}

/* ---------- payválida / partner lockup (intercambiable) ---------- */
.poster .partner-logo{display:inline-flex;align-items:center;gap:12px;color:var(--ink)}
.poster .partner-logo svg{width:38px;height:38px;flex:none}
.poster .partner-logo .pv-name{font-family:var(--font-poster-display);font-weight:700;font-size:40px;letter-spacing:-.02em;line-height:1}
.poster .partner-logo img{display:block;max-height:54px;width:auto}

/* ---------- Divider del lockup superior (template 1) ---------- */
.poster .lockup{display:inline-flex;align-items:center;gap:24px;color:var(--white)}
.poster .lockup .divider{width:2px;height:46px;background:currentColor;opacity:.5}

/* ---------- Marquee footer ---------- */
.poster .marquee{
  position:absolute;left:0;right:0;bottom:0;background:var(--cyan);border-top:2px solid var(--ink);
  height:72px;display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;text-align:center;
}
.poster .marquee span{
  display:block;font-family:var(--font-poster-mono);font-weight:500;font-size:46px;line-height:1;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink);
}

/* ---------- Pixel chevron ---------- */
.poster .pixchev{display:inline-block;vertical-align:baseline}

/* ---------- Foto + iniciales de respaldo (genérico) ---------- */
.poster .ph-fill{position:absolute;inset:0;background-repeat:no-repeat}
.poster .ph-frame{position:absolute;inset:0;overflow:hidden}
.poster .ph-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   TEMPLATE 1 — un panelista (foto a sangre)
   ============================================================ */
.t1{background:var(--ink-soft)}
.t1 .hero-frame{position:absolute;inset:0;overflow:hidden;background:var(--ink-soft)}
.t1 .hero-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.t1 .hero-initials{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-poster-display);font-weight:900;font-size:420px;color:var(--blue-50);background:var(--ink-soft)}
.t1 .scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,28,38,.34) 0%,rgba(20,28,38,0) 20%,rgba(20,28,38,0) 40%,rgba(20,28,38,.55) 100%)}
.t1 .top{position:absolute;top:84px;left:108px;right:108px;display:flex;align-items:center;justify-content:space-between;z-index:2}
.t1 .body{position:absolute;left:108px;right:108px;bottom:188px;display:flex;flex-direction:column;z-index:2}
.t1 .body .eyebrow{color:var(--headline-on-photo);margin-bottom:18px}
.t1 h1{margin:0;font-family:var(--font-poster-display);font-weight:900;color:var(--headline-on-photo);
  font-size:74px;line-height:.99;letter-spacing:-.03em;max-width:712px}
.t1 h1 .pixchev{margin-left:16px}
.t1 .desc{margin:24px 0 0;font-size:30px;line-height:1.42;color:#e3f2f8;max-width:700px}
.t1 .foot{margin-top:32px;display:flex;align-items:flex-end;justify-content:space-between}
.t1 .speaker{font-family:var(--font-poster-mono);font-weight:500;font-size:28px;letter-spacing:.04em;color:var(--headline-on-photo)}
.t1 .when{font-family:var(--font-poster-mono);font-weight:500;font-size:32px;line-height:1.15;letter-spacing:.04em;
  color:var(--headline-on-photo);text-align:right}

/* ============================================================
   TEMPLATE 2 — dos panelistas (hero + tarjetas de foto)
   ============================================================ */
.t2{background:var(--blue-100)}
.t2 .blobs{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.t2 .blobs i{position:absolute;display:block;background:var(--blue-150);opacity:.5;border-radius:44px}
.t2 .blobs .b1{top:-80px;left:-120px;width:520px;height:560px;border-radius:0 0 60px 60px}
.t2 .blobs .b2{top:300px;left:40px;width:360px;height:520px}
.t2 .blobs .b3{bottom:170px;left:64px;width:430px;height:240px}
.t2 .top{position:absolute;top:84px;left:108px;right:108px;display:flex;align-items:flex-start;justify-content:space-between;z-index:2}
.t2 .grid{position:absolute;left:108px;right:108px;top:188px;bottom:150px;display:grid;grid-template-columns:431px 1fr;gap:46px;z-index:2}
.t2 .left{display:flex;flex-direction:column;height:100%;min-width:0}
.t2 h1{margin:0;font-family:var(--font-poster-display);font-weight:900;color:var(--ink);font-size:76px;line-height:1.12;letter-spacing:-.03em;max-width:400px;overflow-wrap:break-word}
.t2 .desc{margin:50px 0 0;font-size:29px;line-height:1.4;color:var(--ink);max-width:440px}
.t2 .date{margin:30px 0 0;display:flex;align-items:center;gap:20px}
.t2 .date .bar{width:6px;height:46px;background:var(--cyan-deep);border-radius:3px}
.t2 .date .txt{font-family:var(--font-poster-mono);font-weight:500;font-size:34px;letter-spacing:.04em;color:var(--ink)}
.t2 .con{margin-top:auto;background:var(--cyan);border-radius:40px;padding:46px 32px;display:flex;flex-direction:column;align-items:center;gap:18px}
.t2 .con .lbl{font-family:var(--font-poster-mono);font-weight:500;font-size:24px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.t2 .right{display:flex;flex-direction:column;gap:28px;height:100%;min-width:0}
.t2 .card{position:relative;flex:1;border-radius:36px;overflow:hidden;background:var(--ink-soft)}
.t2 .card .nameplate{position:absolute;left:0;right:0;bottom:0;padding:30px 24px 26px;text-align:center;
  background:linear-gradient(180deg,rgba(93,181,207,0) 0%,rgba(93,181,207,.82) 60%,rgba(93,181,207,.92) 100%)}
.t2 .card .nm{font-family:var(--font-poster-body);font-weight:400;font-size:34px;color:var(--white);line-height:1.1}
.t2 .card .rl{font-family:var(--font-poster-mono);font-weight:500;font-size:22px;letter-spacing:.06em;color:var(--white);margin-top:4px}
.t2 .card .initials{display:flex;position:absolute;inset:0;align-items:center;justify-content:center;
  font-family:var(--font-poster-display);font-weight:900;color:var(--blue-50);font-size:150px}

/* ============================================================
   TEMPLATE 3 — tres panelistas (lista + tira de fotos)
   ============================================================ */
.t3{background:var(--blue-100)}
.t3 .blobs{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.t3 .blobs i{position:absolute;display:block;background:var(--blue-150);opacity:.5;border-radius:48px}
.t3 .blobs .b1{top:-90px;left:-110px;width:520px;height:560px;border-radius:0 0 60px 60px}
.t3 .blobs .b2{top:430px;left:120px;width:430px;height:430px}
.t3 .top{position:absolute;top:84px;left:108px;right:108px;display:flex;align-items:flex-start;justify-content:space-between;z-index:2}
.t3 h1{position:absolute;left:108px;right:108px;top:188px;margin:0;z-index:2;
  font-family:var(--font-poster-display);font-weight:900;color:var(--ink);font-size:60px;line-height:1.02;letter-spacing:-.03em}
.t3 .grid{position:absolute;left:108px;right:108px;top:383px;z-index:2;display:grid;grid-template-columns:1fr 290px;gap:40px;align-items:stretch}
.t3 .speakers{display:flex;flex-direction:column;gap:24px;min-width:0}
.t3 .spk{background:var(--cyan);border-radius:999px;min-height:112px;display:flex;align-items:center;
  padding:0 56px;font-size:33px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t3 .side{display:flex;flex-direction:column;gap:24px;min-width:0}
.t3 .datepill{background:var(--cyan);border-radius:999px;min-height:112px;display:flex;align-items:center;justify-content:center;white-space:nowrap;
  font-family:var(--font-poster-mono);font-weight:500;font-size:27px;letter-spacing:.03em;color:var(--ink)}
.t3 .datepill .d{padding:0 18px}
.t3 .datepill .sep{width:2px;height:54px;background:var(--ink);opacity:.45}
.t3 .con{flex:1;background:var(--cyan);border-radius:44px;padding:40px 28px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.t3 .con .lbl{font-family:var(--font-poster-mono);font-weight:500;font-size:24px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.t3 .strip{position:absolute;left:0;right:0;bottom:0;height:458px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;background:var(--ink)}
.t3 .strip .ph{position:relative;overflow:hidden;background:var(--ink-soft)}
.t3 .strip .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.t3 .strip .ph .initials{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-poster-display);font-weight:900;color:var(--blue-50);font-size:120px}
.t3 .marquee{bottom:458px;border-bottom:2px solid var(--ink)}