/* ============================================================
   AgencyDomains — scroll-story (la invitación para compartir)
   Infografía vertical mobile-first: paneles a pantalla, prensa
   editorial de la casa. Dolor primero; la Línea Nadella es el
   pivote, no la apertura.
   ============================================================ */
.story{margin:0}
.pnl{position:relative;min-height:92svh;display:flex;align-items:center;justify-content:center;
  padding:clamp(2.2rem,7vh,4.5rem) clamp(1.4rem,6vw,2.5rem)}
/* folio de imprenta: posición y total, para que el scroll no se sienta infinito */
.folio{position:absolute;bottom:1.1rem;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--faint)}
.pnl.dark .folio{color:rgba(251,250,244,.45)}
.pin{max-width:38rem;width:100%}
.pnl.tone2{background:var(--paper-2)}
.pnl.dark{background:var(--ink);color:var(--paper)}
.pnl.dark ::selection{background:var(--accent);color:#fff}

.story .eyebrow{margin:0 0 1.2rem}
.pnl.dark .eyebrow{color:var(--accent-tint)}
.story .big{font-family:var(--display);font-weight:600;letter-spacing:-.025em;line-height:1.06;
  font-size:clamp(2.1rem,8vw,3.3rem);margin:0}
.story h2{font-family:var(--display);font-weight:600;letter-spacing:-.015em;line-height:1.12;
  font-size:clamp(1.55rem,5.5vw,2.2rem);margin:0 0 1.2rem}
.pnl.dark h2,.pnl.dark .big{color:var(--paper)}
.story .lead{font-family:var(--display);font-style:italic;font-weight:340;color:var(--ink-soft);
  font-size:clamp(1.15rem,3.6vw,1.5rem);line-height:1.35;margin:1.1rem 0 0}
.pnl.dark .lead{color:var(--paper-3)}
.story p{font-size:clamp(1rem,2.6vw,1.12rem);line-height:1.6;margin:1rem 0 0}
.pnl.dark p{color:var(--paper-2)}
.story .hint{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--faint);
  margin-top:3.2rem;text-align:center}

/* datos duros (panel mecanismo) */
.stats{margin:1.6rem 0 0;display:flex;flex-direction:column;gap:1.1rem}
.stat{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:baseline}
.stat b{font-family:var(--display);font-size:clamp(1.5rem,5vw,2rem);font-weight:600;color:var(--accent);white-space:nowrap}
.stat span{font-size:clamp(.94rem,2.4vw,1.05rem);line-height:1.5;color:var(--ink-soft)}

/* la pregunta (panel pivote, oscuro) */
.pill{width:fit-content;margin:1.4rem auto;background:var(--paper);color:var(--ink);
  font-family:var(--display);font-style:italic;font-size:clamp(1.05rem,3.4vw,1.35rem);
  padding:.65rem 1.3rem;border-radius:8px;text-align:center}
.worlds2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:1.6rem}
.w2{border:1px solid rgba(251,250,244,.25);border-radius:8px;padding:1rem}
.w2 .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:.4rem}
.w2.si .k{color:#9db7d9}.w2.no .k{color:#e0a9a9}
.w2 b{font-family:var(--display);font-size:clamp(1rem,2.8vw,1.2rem);font-weight:600;display:block;line-height:1.2}
.w2 p{font-size:clamp(.82rem,2.2vw,.92rem);line-height:1.45;margin:.5rem 0 0;color:var(--paper-3)}
@media(max-width:30rem){.worlds2{grid-template-columns:1fr}}

/* liberaciones (3 filas) */
.libs{margin:1.6rem 0 0;display:flex;flex-direction:column;gap:.9rem}
.lib{display:grid;grid-template-columns:1fr auto 1fr;gap:.8rem;align-items:center;
  border-top:1px solid var(--rule-soft);padding-top:.9rem}
.lib:first-child{border-top:0;padding-top:0}
.lib .de{text-align:right;color:var(--ink-soft);font-size:clamp(.9rem,2.4vw,1rem)}
.lib .fl{font-family:var(--mono);color:var(--accent);font-size:.9rem}
.lib .a{font-family:var(--display);font-weight:600;font-size:clamp(1rem,2.8vw,1.15rem)}

/* el martes (timeline) */
.tl{margin:1.4rem 0 0;display:flex;flex-direction:column;gap:1rem}
.mom{display:grid;grid-template-columns:3.6rem 1fr;gap:1rem;align-items:baseline}
.mom b{font-family:var(--mono);font-size:.88rem;font-weight:500;color:var(--accent)}
.mom span{font-size:clamp(.94rem,2.4vw,1.04rem);line-height:1.5;color:var(--ink-soft)}
.mom span strong{color:var(--ink);font-weight:560}

/* métrica destacada */
.metric{margin:1.8rem 0 0;padding:1rem 1.2rem;background:var(--paper-2);border-left:2px solid var(--accent);
  border-radius:0 6px 6px 0;font-size:clamp(.92rem,2.4vw,1rem)}
.metric .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.25rem}

/* cierre: escalera + byline */
.story .next{margin-top:2rem;padding-top:1.2rem;border-top:1px solid rgba(251,250,244,.25);
  display:flex;flex-direction:column;gap:.65rem;font-family:var(--mono);font-size:.8rem}
.pnl.dark .next a{color:var(--paper-2)}.pnl.dark .next a:hover{color:#fff}
.pnl.dark .next .k{color:rgba(251,250,244,.55)}
.story .byline2{font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;
  color:rgba(251,250,244,.5);margin-top:2.4rem}
.story .byline2 a{color:rgba(251,250,244,.7)}

/* toggle de idioma flotante, discreto */
.story-lang{position:absolute;top:1rem;right:1.2rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em}
.story-lang a{color:var(--faint)}.story-lang .on{color:var(--accent);font-weight:500}
.story-wrap{position:relative}