/* ============================================================
   STARGATE — LAYOUTS «VANGUARD» (láminas generadas por IA)
   · Solo tokens (--accent, --text, --line…) → heredan las
     5 plantillas y los temas día / noche.
   · Todo en --u y --t. Sin color-mix() ni backdrop-filter.
   · 9:16 por defecto; body[data-ratio="16-9"] recompone.
   ============================================================ */
.vg{
  width:100%;
  display:flex;flex-direction:column;
  gap:calc(var(--u) * 2.2);
  position:relative;
}
.vg h2{margin:0}
.vg h3{margin:0}
.vg p{margin:0}
.vg em{font-style:normal;color:var(--accent);-webkit-text-fill-color:var(--accent)}

/* ---------- Cabecera común ---------- */
.vg-head{display:flex;flex-direction:column;gap:calc(var(--u) * 1)}
.vg-head h2{max-width:24ch}
.vg-sub{
  font-size:clamp(12px,calc(var(--u) * 2.05 * var(--t)),28px);
  line-height:1.45;color:var(--text-soft);max-width:52ch;font-weight:400;
}
.vg-lede{
  font-size:clamp(13px,calc(var(--u) * 2.35 * var(--t)),32px);
  line-height:1.45;color:var(--text-soft);max-width:44ch;
}
.vg-foot{font-size:clamp(9px,calc(var(--u) * 1.35 * var(--t)),16px);color:var(--text-faint);letter-spacing:.04em}
.vg-meta{
  font-family:var(--font-mono,monospace);font-size:clamp(9px,calc(var(--u) * 1.35 * var(--t)),16px);
  letter-spacing:.24em;text-transform:uppercase;color:var(--text-dim);
}

/* ---------- Imágenes ---------- */
.vg-media{margin:0;position:relative;overflow:hidden;border-radius:calc(var(--u) * 1.6);
  border:1px solid var(--line);background:var(--glass);
  box-shadow:0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(0,0,0,.28)}
.vg-media img{display:block;width:100%;height:100%;object-fit:cover}
.vg-media::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(var(--page-rgb),.35))}

/* ============================================================
   PORTADA
   ============================================================ */
.vg-cover{min-height:calc(var(--u) * 62);justify-content:center}
.vg-cover-body{position:relative;z-index:2;display:flex;flex-direction:column;gap:calc(var(--u) * 1.8);align-items:flex-start}
.vg-badge{
  display:inline-flex;align-items:center;gap:.6em;
  padding:.6em 1.1em;border-radius:999px;
  border:1px solid var(--stroke);background:rgba(var(--accent-rgb),.12);color:var(--accent);
  font-family:var(--font-mono,monospace);font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  font-size:clamp(8px,calc(var(--u) * 1.3 * var(--t)),15px);
}
.vg-badge::before{content:'';width:.55em;height:.55em;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.vg-title{
  margin:0;font-family:var(--font-head,var(--font));
  font-size:clamp(34px,calc(var(--u) * 8.2 * var(--t)),138px);
  font-weight:900;letter-spacing:-.035em;line-height:.95;max-width:14ch;
  background:linear-gradient(110deg,var(--mark-a) 10%,var(--mark-b) 55%,var(--mark-a) 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-wrap:balance;
}
.vg-title em{color:var(--accent);-webkit-text-fill-color:var(--accent)}
.vg-rule{width:calc(var(--u) * 9);height:calc(var(--u) * .45);border-radius:9px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.vg-orb{
  position:absolute;z-index:0;pointer-events:none;
  width:calc(var(--u) * 60);height:calc(var(--u) * 60);right:calc(var(--u) * -22);top:calc(var(--u) * -18);
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(var(--accent-rgb),.55),rgba(var(--accent2-rgb),.22) 45%,transparent 70%);
  filter:blur(calc(var(--u) * 1.2));opacity:.75;
  animation:vgFloat 12s ease-in-out infinite;
}
@keyframes vgFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(calc(var(--u) * -3),calc(var(--u) * 3)) scale(1.06)}}
.vg-cover.has-img .vg-cover-img{
  position:absolute;z-index:0;inset:auto 0 0 auto;width:100%;height:calc(var(--u) * 34);
  top:auto;bottom:calc(var(--u) * -4);border-radius:calc(var(--u) * 2);opacity:.9;
}
.vg-cover.has-img{justify-content:flex-start;padding-bottom:calc(var(--u) * 34)}
body[data-ratio="16-9"] .vg-cover{min-height:calc(var(--u) * 70)}
body[data-ratio="16-9"] .vg-cover.has-img{padding-bottom:0;padding-right:48%;justify-content:center}
body[data-ratio="16-9"] .vg-cover.has-img .vg-cover-img{width:44%;height:calc(var(--u) * 72);top:50%;bottom:auto;right:0;transform:translateY(-50%)}
body[data-ratio="16-9"] .vg-title{font-size:clamp(34px,calc(var(--u) * 10 * var(--t)),150px)}

/* ============================================================
   SEPARADOR DE SECCIÓN
   ============================================================ */
.vg-section{min-height:calc(var(--u) * 56);justify-content:center}
.vg-giant{
  position:absolute;right:0;top:50%;transform:translateY(-58%);
  font-family:var(--font-head,var(--font));font-weight:900;line-height:.8;
  font-size:calc(var(--u) * 30 * var(--t));letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:2px rgba(var(--accent-rgb),.35);
  pointer-events:none;
}
.vg-section-body{position:relative;display:flex;flex-direction:column;gap:calc(var(--u) * 1.4);max-width:80%}
.vg-section h2{font-size:clamp(28px,calc(var(--u) * 6.6 * var(--t)),100px)}

/* ============================================================
   GRAN IDEA / CIERRE
   ============================================================ */
.vg-statement,.vg-closing{min-height:calc(var(--u) * 56);justify-content:center}
.vg-mega{
  font-size:clamp(28px,calc(var(--u) * 6.4 * var(--t)),104px)!important;
  line-height:1.02!important;max-width:18ch!important;letter-spacing:-.035em!important;
}
.vg-statement::before{
  content:'';position:absolute;left:calc(var(--u) * -3);top:10%;bottom:10%;width:calc(var(--u) * .5);
  border-radius:9px;background:linear-gradient(180deg,var(--accent),var(--accent-2));
}
.vg-closing{align-items:center;text-align:center}
.vg-closing .kicker{justify-content:center}
.vg-closing .vg-mega{margin-inline:auto}
.vg-closing .vg-lede{margin-inline:auto}
.vg-closing .vg-orb{left:50%;top:50%;right:auto;transform:translate(-50%,-50%);animation:none;opacity:.45}
.vg-closing > *{position:relative;z-index:1}
.vg-cta-row{display:flex;flex-wrap:wrap;gap:calc(var(--u) * 1);justify-content:center}
.vg-cta{
  padding:.75em 1.3em;border-radius:999px;border:1px solid var(--stroke);
  font-size:clamp(11px,calc(var(--u) * 1.75 * var(--t)),22px);font-weight:700;color:var(--text);background:var(--glass);
}
.vg-cta.is-main{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:var(--accent-ink);border-color:transparent;
  box-shadow:0 0 calc(var(--u) * 3) rgba(var(--accent-rgb),.4)}

/* ============================================================
   PUNTOS CLAVE
   ============================================================ */
.vg-bullets .vg-col{display:flex;flex-direction:column;gap:calc(var(--u) * 2.2);min-width:0}
.vg-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(var(--u) * 1.1)}
.vg-points li{
  display:grid;grid-template-columns:auto 1fr;gap:calc(var(--u) * 1.4);align-items:start;
  padding:calc(var(--u) * 1.3) calc(var(--u) * 1.5);
  border-radius:calc(var(--u) * 1.2);border:1px solid var(--line);background:var(--glass);
}
.vg-idx{
  font-family:var(--font-mono,monospace);font-weight:600;color:var(--accent);
  font-size:clamp(10px,calc(var(--u) * 1.5 * var(--t)),18px);letter-spacing:.08em;padding-top:.25em;
}
.vg-points li div{display:flex;flex-direction:column;gap:.25em;
  font-size:clamp(12px,calc(var(--u) * 1.95 * var(--t)),26px);line-height:1.38;color:var(--text-soft)}
.vg-points li b{color:var(--text);font-weight:800}
.vg-bullets.with-media .vg-side-img{height:calc(var(--u) * 22)}
body[data-ratio="16-9"] .vg-bullets.with-media{display:grid;grid-template-columns:1.25fr .9fr;gap:calc(var(--u) * 4);align-items:center}
body[data-ratio="16-9"] .vg-bullets.with-media .vg-side-img{height:calc(var(--u) * 70)}
body[data-ratio="16-9"] .vg-bullets:not(.with-media) .vg-points{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u) * 1.4)}

/* ============================================================
   CIFRAS
   ============================================================ */
.vg-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u) * 1.4)}
.vg-stats.n1 .vg-stat-grid{grid-template-columns:1fr}
.vg-stats.n3 .vg-stat-grid .vg-stat:first-child{grid-column:1 / -1}
.vg-stat{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:calc(var(--u) * .6);
  padding:calc(var(--u) * 2.2) calc(var(--u) * 2);
  border-radius:calc(var(--u) * 1.6);border:1px solid var(--stroke);
  background:linear-gradient(155deg,rgba(var(--accent-rgb),.16),var(--glass) 70%);
}
.vg-stat::before{content:'';position:absolute;left:0;top:0;right:0;height:calc(var(--u) * .35);
  background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.vg-stat.c1{background:linear-gradient(155deg,rgba(var(--accent2-rgb),.18),var(--glass) 70%)}
.vg-stat.c2::before{background:linear-gradient(90deg,var(--amber),var(--accent))}
.vg-stat.c3::before{background:linear-gradient(90deg,var(--emerald),var(--accent-2))}
.vg-num{
  font-family:var(--font-head,var(--font));
  font-size:clamp(26px,calc(var(--u) * 6.2 * var(--t)),96px);
  font-weight:900;line-height:.95;letter-spacing:-.04em;color:var(--text);
  font-variant-numeric:tabular-nums;
}
.vg-stat.c0 .vg-num{color:var(--accent)}
.vg-stat-l{font-family:var(--font-mono,monospace);font-size:clamp(9px,calc(var(--u) * 1.35 * var(--t)),16px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);font-weight:600}
.vg-stat-d{font-size:clamp(11px,calc(var(--u) * 1.6 * var(--t)),20px);line-height:1.4;color:var(--text-soft)}
body[data-ratio="16-9"] .vg-stats.n4 .vg-stat-grid{grid-template-columns:repeat(4,1fr)}
body[data-ratio="16-9"] .vg-stats.n3 .vg-stat-grid{grid-template-columns:repeat(3,1fr)}
body[data-ratio="16-9"] .vg-stats.n3 .vg-stat-grid .vg-stat:first-child{grid-column:auto}
body[data-ratio="16-9"] .vg-stat{padding:calc(var(--u) * 3) calc(var(--u) * 2.6)}
body[data-ratio="16-9"] .vg-num{font-size:clamp(26px,calc(var(--u) * 8 * var(--t)),120px)}

/* ============================================================
   TARJETAS
   ============================================================ */
.vg-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u) * 1.2)}
.vg-cards.n1 .vg-card-grid,.vg-cards.n2 .vg-card-grid{grid-template-columns:1fr}
.vg-cards.n3 .vg-card-grid{grid-template-columns:1fr}
.vg-card{
  display:flex;flex-direction:column;gap:calc(var(--u) * .8);
  padding:calc(var(--u) * 2) calc(var(--u) * 1.8);
  border-radius:calc(var(--u) * 1.5);border:1px solid var(--line);background:var(--glass);
  position:relative;overflow:hidden;
}
.vg-card::after{content:'';position:absolute;right:calc(var(--u) * -6);top:calc(var(--u) * -6);
  width:calc(var(--u) * 14);height:calc(var(--u) * 14);border-radius:50%;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.18),transparent 70%);pointer-events:none}
.vg-ico{
  width:calc(var(--u) * 5);height:calc(var(--u) * 5);border-radius:calc(var(--u) * 1.2);
  display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(145deg,var(--accent-2),var(--accent));color:var(--accent-ink);
  font-size:clamp(12px,calc(var(--u) * 2.2 * var(--t)),30px);
  box-shadow:0 calc(var(--u) * .8) calc(var(--u) * 2.4) rgba(var(--accent-rgb),.3);
}
.vg-card.c1 .vg-ico{background:linear-gradient(145deg,var(--accent),var(--emerald))}
.vg-card.c2 .vg-ico{background:linear-gradient(145deg,var(--amber),var(--accent-2))}
.vg-card.c3 .vg-ico{background:linear-gradient(145deg,var(--crimson),var(--accent-2))}
.vg-card h3{font-size:clamp(14px,calc(var(--u) * 2.25 * var(--t)),32px);font-weight:800;color:var(--text);line-height:1.15}
.vg-card p{font-size:clamp(11px,calc(var(--u) * 1.65 * var(--t)),21px);line-height:1.45;color:var(--text-soft)}
.vg-cards.n3 .vg-card{display:grid;grid-template-columns:auto 1fr;column-gap:calc(var(--u) * 1.6);align-items:center}
.vg-cards.n3 .vg-card .vg-ico{grid-row:span 2}
body[data-ratio="16-9"] .vg-cards .vg-card-grid{grid-template-columns:repeat(3,1fr)}
body[data-ratio="16-9"] .vg-cards.n2 .vg-card-grid{grid-template-columns:repeat(2,1fr)}
body[data-ratio="16-9"] .vg-cards.n4 .vg-card-grid{grid-template-columns:repeat(4,1fr)}
body[data-ratio="16-9"] .vg-cards.n3 .vg-card{display:flex}
body[data-ratio="16-9"] .vg-card{padding:calc(var(--u) * 3) calc(var(--u) * 2.4)}

/* ============================================================
   CRONOLOGÍA
   ============================================================ */
.vg-tl{position:relative;display:flex;flex-direction:column;gap:calc(var(--u) * 1.6);padding-left:calc(var(--u) * 3.4)}
.vg-tl::before{content:'';position:absolute;left:calc(var(--u) * .9);top:calc(var(--u) * .6);bottom:calc(var(--u) * .6);width:2px;
  background:linear-gradient(180deg,var(--accent),rgba(var(--accent2-rgb),.2))}
.vg-tl-item{position:relative;display:flex;flex-direction:column;gap:.3em}
.vg-tl-dot{position:absolute;left:calc(var(--u) * -3.4 + var(--u) * .9 - var(--u) * .75 + 1px);top:calc(var(--u) * .3);
  width:calc(var(--u) * 1.5);height:calc(var(--u) * 1.5);border-radius:50%;background:var(--page);
  border:2px solid var(--accent);box-shadow:0 0 12px rgba(var(--accent-rgb),.6)}
.vg-tl-when{font-family:var(--font-mono,monospace);font-size:clamp(9px,calc(var(--u) * 1.3 * var(--t)),16px);
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:600}
.vg-tl-item b{font-size:clamp(13px,calc(var(--u) * 2.1 * var(--t)),28px);color:var(--text);font-weight:800;line-height:1.2}
.vg-tl-d{font-size:clamp(11px,calc(var(--u) * 1.6 * var(--t)),20px);color:var(--text-soft);line-height:1.4}
body[data-ratio="16-9"] .vg-tl{flex-direction:row;padding-left:0;padding-top:calc(var(--u) * 4);gap:calc(var(--u) * 2.4)}
body[data-ratio="16-9"] .vg-tl::before{left:0;right:0;top:calc(var(--u) * 1.1);bottom:auto;width:auto;height:2px;
  background:linear-gradient(90deg,var(--accent),rgba(var(--accent2-rgb),.2))}
body[data-ratio="16-9"] .vg-tl-item{flex:1 1 0;min-width:0}
body[data-ratio="16-9"] .vg-tl-dot{left:0;top:calc(var(--u) * -3.6)}

/* ============================================================
   PROCESO
   ============================================================ */
.vg-proc{display:flex;flex-direction:column;gap:calc(var(--u) * 1.2);counter-reset:p}
.vg-proc-step{
  position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:calc(var(--u) * 1.6);row-gap:.25em;align-items:center;
  padding:calc(var(--u) * 1.6) calc(var(--u) * 1.8);border-radius:calc(var(--u) * 1.4);
  border:1px solid var(--line);background:var(--glass);
}
.vg-proc-step .vg-ico{grid-row:span 2}
.vg-proc-step b{font-size:clamp(13px,calc(var(--u) * 2.05 * var(--t)),28px);color:var(--text);font-weight:800;line-height:1.2}
.vg-proc-step > span:last-child{font-size:clamp(11px,calc(var(--u) * 1.55 * var(--t)),20px);color:var(--text-soft);line-height:1.4}
.vg-proc-n{position:absolute;right:calc(var(--u) * 1.6);top:calc(var(--u) * 1);
  font-family:var(--font-mono,monospace);font-size:clamp(9px,calc(var(--u) * 1.3 * var(--t)),16px);color:var(--text-faint);letter-spacing:.1em}
.vg-proc-n::before{content:'PASO '}
.vg-proc-step:not(:last-child)::after{content:'';position:absolute;left:calc(var(--u) * 4.3);bottom:calc(var(--u) * -1.2);
  width:2px;height:calc(var(--u) * 1.2);background:var(--accent)}
body[data-ratio="16-9"] .vg-proc{flex-direction:row;gap:calc(var(--u) * 2)}
body[data-ratio="16-9"] .vg-proc-step{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--u) * 1);
  padding:calc(var(--u) * 3) calc(var(--u) * 2.2)}
body[data-ratio="16-9"] .vg-proc-step:not(:last-child)::after{left:auto;right:calc(var(--u) * -2);top:50%;bottom:auto;width:calc(var(--u) * 2);height:2px}

/* ============================================================
   COMPARATIVO
   ============================================================ */
.vg-cmp{display:grid;grid-template-columns:1fr;gap:calc(var(--u) * 1.2);position:relative}
.vg-cmp-col{padding:calc(var(--u) * 2);border-radius:calc(var(--u) * 1.5);border:1px solid var(--line);background:var(--glass);
  display:flex;flex-direction:column;gap:calc(var(--u) * 1.2)}
.vg-cmp-col h3{font-size:clamp(14px,calc(var(--u) * 2.3 * var(--t)),32px);font-weight:800;color:var(--text);display:flex;gap:.5em;align-items:center}
.vg-cmp-col.is-a h3 i{color:var(--crimson)}
.vg-cmp-col.is-b{border-color:var(--stroke);background:linear-gradient(155deg,rgba(var(--accent-rgb),.14),var(--glass) 70%)}
.vg-cmp-col.is-b h3 i{color:var(--accent)}
.vg-cmp-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(var(--u) * .8)}
.vg-cmp-col li{display:flex;flex-direction:column;gap:.15em;font-size:clamp(11px,calc(var(--u) * 1.7 * var(--t)),22px);color:var(--text-soft);line-height:1.4;
  padding-left:calc(var(--u) * 1.6);position:relative}
.vg-cmp-col li::before{content:'';position:absolute;left:0;top:.62em;width:calc(var(--u) * .6);height:calc(var(--u) * .6);border-radius:50%;background:var(--text-faint)}
.vg-cmp-col.is-b li::before{background:var(--accent)}
.vg-cmp-col li b{color:var(--text)}
.vg-vs{justify-self:center;font-family:var(--font-mono,monospace);font-weight:700;letter-spacing:.2em;color:var(--accent);
  font-size:clamp(10px,calc(var(--u) * 1.5 * var(--t)),18px);padding:.4em .9em;border-radius:999px;border:1px solid var(--stroke);background:var(--page)}
body[data-ratio="16-9"] .vg-cmp{grid-template-columns:1fr auto 1fr;align-items:stretch}
body[data-ratio="16-9"] .vg-vs{align-self:center}

/* ============================================================
   CITA
   ============================================================ */
.vg-quote{min-height:calc(var(--u) * 52);justify-content:center}
.vg-qmark{font-family:Georgia,serif;font-size:calc(var(--u) * 20 * var(--t));line-height:.6;color:var(--accent);opacity:.5;height:calc(var(--u) * 9)}
.vg-quote blockquote{margin:0;font-family:var(--font-head,var(--font));
  font-size:clamp(20px,calc(var(--u) * 4.4 * var(--t)),68px);line-height:1.15;font-weight:700;letter-spacing:-.02em;color:var(--text);max-width:22ch;text-wrap:balance}
.vg-author{font-family:var(--font-mono,monospace);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  font-size:clamp(10px,calc(var(--u) * 1.45 * var(--t)),18px)}

/* ============================================================
   GRÁFICA
   ============================================================ */
.vg-bars{display:flex;flex-direction:column;gap:calc(var(--u) * 1.5)}
.vg-bar-top{display:flex;justify-content:space-between;gap:1em;align-items:baseline;margin-bottom:calc(var(--u) * .6);
  font-size:clamp(11px,calc(var(--u) * 1.75 * var(--t)),22px);color:var(--text-soft)}
.vg-bar-top b{font-family:var(--font-head,var(--font));font-weight:900;color:var(--text);font-size:1.15em;font-variant-numeric:tabular-nums}
.vg-bar-track{height:calc(var(--u) * 1.9);border-radius:999px;background:var(--glass-2);overflow:hidden}
.vg-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,rgba(var(--accent2-rgb),.6),rgba(var(--accent-rgb),.75));
  transform-origin:left center}
.vg-bar.is-hi .vg-bar-fill{background:linear-gradient(90deg,var(--accent-2),var(--accent));box-shadow:0 0 16px rgba(var(--accent-rgb),.5)}
.vg-bar.is-hi .vg-bar-top b{color:var(--accent)}
.slide.is-active .vg-bar-fill{animation:vgGrow 1.1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(260ms + var(--i,0) * 110ms)}
@keyframes vgGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
body[data-ratio="16-9"] .vg-bars{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(var(--u) * 5);row-gap:calc(var(--u) * 2.2)}

/* ============================================================
   IMAGEN + TEXTO
   ============================================================ */
.vg-image{gap:calc(var(--u) * 2.4)}
.vg-image .vg-split-img{height:calc(var(--u) * 30)}
.vg-image .vg-col{display:flex;flex-direction:column;gap:calc(var(--u) * 1.8)}
.vg-mini{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(var(--u) * .9)}
.vg-mini li{display:flex;flex-direction:column;gap:.15em;padding-left:calc(var(--u) * 2);position:relative;
  font-size:clamp(11px,calc(var(--u) * 1.8 * var(--t)),24px);color:var(--text-soft);line-height:1.4}
.vg-mini li::before{content:'';position:absolute;left:0;top:.5em;width:calc(var(--u) * 1);height:2px;background:var(--accent)}
.vg-mini li b{color:var(--text)}
body[data-ratio="16-9"] .vg-image{display:grid;grid-template-columns:1fr 1.1fr;gap:calc(var(--u) * 5);align-items:center}
body[data-ratio="16-9"] .vg-image .vg-split-img{height:calc(var(--u) * 74)}

/* ============================================================
   AGENDA
   ============================================================ */
.vg-ag{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.vg-ag li{display:grid;grid-template-columns:auto 1fr;column-gap:calc(var(--u) * 2);row-gap:.2em;align-items:baseline;
  padding:calc(var(--u) * 1.5) 0;border-bottom:1px solid var(--line)}
.vg-ag li:last-child{border-bottom:none}
.vg-ag-n{font-family:var(--font-head,var(--font));font-weight:900;color:var(--accent);
  font-size:clamp(18px,calc(var(--u) * 3.4 * var(--t)),48px);line-height:1;grid-row:span 2;letter-spacing:-.03em}
.vg-ag li b{font-size:clamp(13px,calc(var(--u) * 2.2 * var(--t)),30px);color:var(--text);font-weight:800}
.vg-ag li span:not(.vg-ag-n){font-size:clamp(11px,calc(var(--u) * 1.55 * var(--t)),20px);color:var(--text-dim)}
body[data-ratio="16-9"] .vg-ag{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(var(--u) * 5)}

/* ---------- Animación escalonada propia ---------- */
.slide.is-active .vg-points li,
.slide.is-active .vg-stat,
.slide.is-active .vg-card,
.slide.is-active .vg-tl-item,
.slide.is-active .vg-proc-step,
.slide.is-active .vg-ag li,
.slide.is-active .vg-cmp-col{animation:popIn .62s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(200ms + var(--i,0) * 95ms)}
@media (prefers-reduced-motion:reduce){
  .vg-orb,.slide.is-active .vg *{animation:none!important}
}

/* Día: sombras suaves en lugar de brillos */
body[data-theme="day"] .vg-media{box-shadow:0 calc(var(--u) * 1.4) calc(var(--u) * 3.4) rgba(15,23,42,.14)}
body[data-theme="day"] .vg-orb{opacity:.35}
body[data-theme="day"] .vg-card,body[data-theme="day"] .vg-points li,body[data-theme="day"] .vg-proc-step{box-shadow:0 6px 18px rgba(15,23,42,.06)}

/* ============================================================
   PLANTILLAS DE VANGUARDIA (Nova · Lumen · Noir Oro)
   ============================================================ */
body[data-template="nova"][data-theme="night"]{
  --accent-rgb:124,92,255; --accent2-rgb:255,79,216;
  --page-rgb:7,6,26; --text-rgb:238,236,255;
  --page:#07061A;
  --deck-a:rgba(24,18,66,.97); --deck-b:rgba(7,6,26,.99); --deck-c:rgba(46,20,86,.96);
  --panel-a:rgba(20,15,56,.96); --panel-b:rgba(7,6,26,.99); --chrome:rgba(24,18,66,.7);
  --accent:#9B84FF; --accent-2:#FF4FD8; --accent-ink:#0B0620;
  --crimson:#FF5C7A; --amber:#FFC85C; --emerald:#3EF0C0;
  --text:#EEECFF; --text-soft:rgba(238,236,255,.86); --text-dim:rgba(238,236,255,.62); --text-faint:rgba(238,236,255,.42);
  --glass:rgba(238,236,255,.055); --glass-2:rgba(238,236,255,.11);
  --line:rgba(238,236,255,.12); --line-soft:rgba(238,236,255,.06); --stroke:rgba(155,132,255,.34);
  --h2-a:#FFFFFF; --h2-b:#C9B8FF; --mark-a:#FFFFFF; --mark-b:#FF7FE3;
  --glow-1:rgba(124,92,255,.36); --glow-2:rgba(255,79,216,.14); --glow-3:rgba(124,92,255,.2);
  --grid-line:rgba(155,132,255,.1); --grid-op:.3;
  --shadow-deck:0 34px 110px rgba(0,0,0,.8),0 0 120px rgba(124,92,255,.28);
  --sheen:linear-gradient(115deg,rgba(255,255,255,.07),transparent 38%,transparent 62%,rgba(255,79,216,.06));
  --radius:26px;
}
body[data-template="nova"][data-theme="day"]{
  --accent-rgb:91,61,245; --accent2-rgb:214,36,159;
  --page-rgb:245,243,255; --text-rgb:18,14,44;
  --page:#F5F3FF;
  --deck-a:rgba(255,255,255,.99); --deck-b:rgba(244,241,255,.99); --deck-c:rgba(252,240,251,.99);
  --panel-a:rgba(255,255,255,.98); --panel-b:rgba(244,241,255,.99); --chrome:rgba(255,255,255,.9);
  --accent:#5B3DF5; --accent-2:#D6249F; --accent-ink:#FFFFFF;
  --crimson:#C4254A; --amber:#9A6400; --emerald:#0B8A6A;
  --text:#120E2C; --text-soft:rgba(18,14,44,.8); --text-dim:rgba(18,14,44,.6); --text-faint:rgba(18,14,44,.42);
  --glass:rgba(91,61,245,.045); --glass-2:rgba(91,61,245,.09);
  --line:rgba(18,14,44,.12); --line-soft:rgba(18,14,44,.06); --stroke:rgba(91,61,245,.26);
  --h2-a:#120E2C; --h2-b:#5B3DF5; --mark-a:#120E2C; --mark-b:#D6249F;
  --glow-1:rgba(91,61,245,.1); --glow-2:rgba(214,36,159,.06); --glow-3:rgba(91,61,245,.06);
  --grid-line:rgba(18,14,44,.05); --grid-op:.4;
  --shadow-deck:0 26px 70px rgba(40,20,120,.16),0 2px 8px rgba(40,20,120,.06);
  --sheen:linear-gradient(115deg,rgba(255,255,255,.5),transparent 42%);
  --radius:26px;
}
body[data-template="nova"] .slide h2{
  background:linear-gradient(115deg,var(--h2-a) 20%,var(--accent) 60%,var(--accent-2) 100%);
  -webkit-background-clip:text;background-clip:text;
}

body[data-template="lumen"][data-theme="day"]{
  --accent-rgb:255,90,0; --accent2-rgb:17,17,17;
  --page-rgb:238,238,234; --text-rgb:17,17,17;
  --page:#EEEEEA;
  --deck-a:rgba(255,255,255,1); --deck-b:rgba(255,255,255,1); --deck-c:rgba(255,255,255,1);
  --panel-a:#FFFFFF; --panel-b:#F6F6F3; --chrome:rgba(255,255,255,.92);
  --accent:#FF5A00; --accent-2:#111111; --accent-ink:#FFFFFF;
  --crimson:#D7263D; --amber:#B7791F; --emerald:#138A5B;
  --text:#111111; --text-soft:rgba(17,17,17,.78); --text-dim:rgba(17,17,17,.56); --text-faint:rgba(17,17,17,.4);
  --glass:rgba(17,17,17,.035); --glass-2:rgba(17,17,17,.07);
  --line:rgba(17,17,17,.12); --line-soft:rgba(17,17,17,.06); --stroke:rgba(17,17,17,.16);
  --h2-a:#111111; --h2-b:#111111; --mark-a:#111111; --mark-b:#FF5A00;
  --glow-1:transparent; --glow-2:transparent; --glow-3:transparent;
  --grid-line:rgba(17,17,17,.05); --grid-op:.35;
  --shadow-deck:0 20px 60px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.06);
  --sheen:none; --radius:6px;
}
body[data-template="lumen"][data-theme="night"]{
  --accent-rgb:255,106,26; --accent2-rgb:245,245,242;
  --page-rgb:14,14,16; --text-rgb:245,245,242;
  --page:#0E0E10;
  --deck-a:rgba(22,22,25,1); --deck-b:rgba(14,14,16,1); --deck-c:rgba(22,22,25,1);
  --panel-a:#18181B; --panel-b:#0E0E10; --chrome:rgba(24,24,27,.8);
  --accent:#FF6A1A; --accent-2:#F5F5F2; --accent-ink:#0E0E10;
  --crimson:#FF5A67; --amber:#FFB547; --emerald:#3DDC97;
  --text:#F5F5F2; --text-soft:rgba(245,245,242,.82); --text-dim:rgba(245,245,242,.58); --text-faint:rgba(245,245,242,.4);
  --glass:rgba(245,245,242,.045); --glass-2:rgba(245,245,242,.09);
  --line:rgba(245,245,242,.12); --line-soft:rgba(245,245,242,.06); --stroke:rgba(245,245,242,.18);
  --h2-a:#F5F5F2; --h2-b:#F5F5F2; --mark-a:#F5F5F2; --mark-b:#FF6A1A;
  --glow-1:transparent; --glow-2:transparent; --glow-3:transparent;
  --grid-line:rgba(245,245,242,.04); --grid-op:.3;
  --shadow-deck:0 30px 90px rgba(0,0,0,.7); --sheen:none; --radius:6px;
}
body[data-template="lumen"] .slide h2 em,body[data-template="lumen"] .vg em{text-shadow:none}
body[data-template="lumen"] .vg-ico{background:var(--accent);box-shadow:none}
body[data-template="lumen"] .vg-card .vg-ico,body[data-template="lumen"] .vg-proc-step .vg-ico{background:var(--text);color:var(--page)}
body[data-template="lumen"] .vg-card.c0 .vg-ico{background:var(--accent);color:#fff}
body[data-template="lumen"] .vg-stat{background:var(--glass)}
body[data-template="lumen"] .vg-stat::before{background:var(--accent)}
body[data-template="lumen"] .vg-orb{display:none}
body[data-template="lumen"] .vg-title{background:none;color:var(--text);-webkit-text-fill-color:var(--text);filter:none}
body[data-template="lumen"] .vg-title em{-webkit-text-fill-color:var(--accent)}
body[data-template="lumen"] .vg-card::after{display:none}

body[data-template="noir"][data-theme="night"]{
  --accent-rgb:212,175,106; --accent2-rgb:140,122,86;
  --page-rgb:5,5,5; --text-rgb:240,234,220;
  --page:#050505;
  --deck-a:rgba(18,17,15,.99); --deck-b:rgba(5,5,5,1); --deck-c:rgba(28,24,16,.97);
  --panel-a:#11100D; --panel-b:#050505; --chrome:rgba(20,19,16,.76);
  --accent:#D4AF6A; --accent-2:#8C7A56; --accent-ink:#0A0805;
  --crimson:#D66A5E; --amber:#E2C27D; --emerald:#8FBF9A;
  --text:#F0EADC; --text-soft:rgba(240,234,220,.82); --text-dim:rgba(240,234,220,.58); --text-faint:rgba(240,234,220,.4);
  --glass:rgba(240,234,220,.04); --glass-2:rgba(240,234,220,.08);
  --line:rgba(212,175,106,.16); --line-soft:rgba(212,175,106,.08); --stroke:rgba(212,175,106,.32);
  --h2-a:#F7F1E3; --h2-b:#D4AF6A; --mark-a:#F7F1E3; --mark-b:#D4AF6A;
  --glow-1:rgba(212,175,106,.12); --glow-2:rgba(212,175,106,.05); --glow-3:rgba(212,175,106,.08);
  --grid-line:rgba(212,175,106,.06); --grid-op:.25;
  --shadow-deck:0 34px 100px rgba(0,0,0,.85),0 0 80px rgba(212,175,106,.08);
  --sheen:linear-gradient(115deg,rgba(255,240,200,.05),transparent 40%);
  --radius:4px;
}
body[data-template="noir"][data-theme="day"]{
  --accent-rgb:154,122,58; --accent2-rgb:26,26,26;
  --page-rgb:247,243,234; --text-rgb:26,26,26;
  --page:#F7F3EA;
  --deck-a:#FFFDF8; --deck-b:#F7F3EA; --deck-c:#FFFDF8;
  --panel-a:#FFFDF8; --panel-b:#F3EEE2; --chrome:rgba(255,253,248,.92);
  --accent:#9A7A3A; --accent-2:#1A1A1A; --accent-ink:#FFFDF8;
  --crimson:#9E3025; --amber:#8A6413; --emerald:#2F6B4F;
  --text:#1A1A1A; --text-soft:rgba(26,26,26,.8); --text-dim:rgba(26,26,26,.58); --text-faint:rgba(26,26,26,.4);
  --glass:rgba(154,122,58,.05); --glass-2:rgba(154,122,58,.09);
  --line:rgba(26,26,26,.13); --line-soft:rgba(26,26,26,.06); --stroke:rgba(154,122,58,.3);
  --h2-a:#1A1A1A; --h2-b:#1A1A1A; --mark-a:#1A1A1A; --mark-b:#9A7A3A;
  --glow-1:transparent; --glow-2:transparent; --glow-3:transparent;
  --grid-line:rgba(26,26,26,.05); --grid-op:.3;
  --shadow-deck:0 22px 60px rgba(40,30,10,.14); --sheen:none; --radius:4px;
}
body[data-template="noir"] .vg h2,body[data-template="noir"] .vg-title,body[data-template="noir"] .vg-quote blockquote{font-weight:600;letter-spacing:-.01em}
body[data-template="noir"] .vg-ico{background:transparent;border:1px solid var(--accent);color:var(--accent);box-shadow:none}
body[data-template="noir"] .vg-stat{background:var(--glass)}
body[data-template="noir"] .vg-stat::before{height:1px;background:var(--accent)}
body[data-template="noir"] .vg-num{font-family:var(--font-head);font-weight:500;color:var(--accent)}
body[data-template="noir"] .vg-card::after{display:none}

/* Arreglo: el acento personalizado debe ganar a la plantilla */
body.accent-custom[data-template]{
  --accent:var(--accent-user,#00D2FF);
  --accent-rgb:var(--accent-user-rgb,0,210,255);
}

/* ---------- Imagen en carga / fallida: placeholder de marca ---------- */
.vg-media{background:
  radial-gradient(70% 60% at 70% 30%,rgba(var(--accent2-rgb),.35),transparent 70%),
  linear-gradient(145deg,rgba(var(--accent-rgb),.28),rgba(var(--page-rgb),.6))}
.vg-media img{color:transparent;font-size:0}
.vg-media.is-failed img{display:none}
.vg-media::before{content:'\f03e';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);font-size:calc(var(--u) * 4);color:rgba(var(--text-rgb),.18);z-index:0}
.vg-media img{position:relative;z-index:1}