/* ==========================================================================
   Retos de la transformación tecnológica — sistema de diseño
   Lienzo fijo 1920×1080 escalado al viewport. Todo en px del lienzo.
   ========================================================================== */

:root {
  --bg: #000;
  --fg: #F7F2EA;
  --fg2: #B4AB9D;
  --fg3: #7C7468;
  --hair: rgba(240, 222, 190, 0.15);
  --hair-strong: rgba(240, 222, 190, 0.3);
  --card: rgba(255, 246, 230, 0.045);
  --card2: rgba(255, 246, 230, 0.07);

  /* Humano (oro, calidez) → Tecnología (cristal, claridad) */
  --warm: #E2BF83;
  --coral: #DFA48A;   /* oro rosado */
  --violet: #CFCBD6;  /* perla */
  --cool: #A9CBE3;    /* cristal */
  --gold: #D9B77E;
  --gold-label: #CDAE78;
  --grad: linear-gradient(90deg, #F5E3BD 0%, #DDBB7F 36%, #EAE3D7 68%, #B4D0E4 100%);
  --imessage: #D2B06F;
  --bar-dim: #4A4540;
  --bar-mid: #8C8478;
  --bar-soft: #D5CCBD;
  --ink-2: #2B2825;
  --ink-3: #3A3631;

  /* Motion — curvas fuertes (Emil Kowalski) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-pop: cubic-bezier(0.34, 1.4, 0.64, 1);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "InterDeck", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; }
body {
  font-family: var(--font);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-optical-sizing: auto;
}
body.cursor-hidden, body.cursor-hidden * { cursor: none !important; }
p, h1, h2, h3, figure, blockquote { margin: 0; }
img { display: block; max-width: 100%; }
em { font-style: normal; }
.notes { display: none !important; }

/* ---------- Escenario ---------- */
.viewport { position: fixed; inset: 0; background: var(--bg); overflow: hidden; }
.stage {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  transform-origin: 50% 50%;
  overflow: hidden;
  background: var(--bg);
}

/* ---------- Diapositivas: disolución con profundidad ----------
   Adelante: la saliente retrocede (0.98) y la entrante llega desde 1.02.
   Atrás: el mismo camino en reversa (consistencia espacial).
   Salida más rápida que entrada. */
.slide {
  position: absolute; inset: 0;
  padding: 112px 136px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: scale(1.02);
  filter: blur(4px);
  transition:
    opacity 450ms var(--ease-out),
    transform 600ms var(--ease-out),
    filter 450ms var(--ease-out),
    visibility 0s linear 600ms;
}
.slide.before { transform: scale(0.98); }
.slide.active {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: none; filter: blur(0);
  z-index: 2;
  transition:
    opacity 800ms var(--ease-out),
    transform 1000ms var(--ease-out),
    filter 700ms var(--ease-out),
    visibility 0s;
}

/* Sin transiciones (navegación hacia atrás, saltos, miniaturas) */
.instant, .instant *, .instant *::before, .instant *::after {
  transition: none !important;
  animation-duration: 1ms !important;
  animation-delay: 0s !important;
}

/* ---------- Tipografía ---------- */
.eyebrow { font-size: 26px; line-height: 1.2; font-weight: 600; color: var(--fg2); letter-spacing: 0.002em; margin-bottom: 22px; }
.h1 { font-size: 96px; line-height: 1.02; font-weight: 700; letter-spacing: -0.036em; }
.h2 { font-size: 63px; line-height: 1.06; font-weight: 700; letter-spacing: -0.03em; }
.h3 { font-size: 42px; line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; }
.lead { font-size: 30px; line-height: 1.32; font-weight: 500; letter-spacing: -0.012em; color: var(--fg2); }
.body { font-size: 25px; line-height: 1.42; font-weight: 400; color: var(--fg2); }
.label { font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg3); }
.takeaway { font-size: 40px; line-height: 1.18; font-weight: 600; letter-spacing: -0.022em; }
.num { font-variant-numeric: tabular-nums; }
.grad {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.grad-warm {
  background: linear-gradient(90deg, #FBD89B, #F7C27A 45%, #F2907C);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.warm { color: var(--warm); }
.cool { color: var(--cool); }
.dimtext { color: var(--fg2); }

.head { position: relative; max-width: 1500px; }
.src { position: absolute; left: 136px; bottom: 52px; font-size: 17px; line-height: 1.4; color: var(--fg3); letter-spacing: 0.01em; }
.foot { position: absolute; left: 136px; right: 136px; bottom: 108px; }

/* ---------- Coreografía de entrada (con la diapositiva) ---------- */
.slide .e {
  transition:
    opacity 900ms var(--ease-out) var(--d, 0ms),
    transform 1000ms var(--ease-out) var(--d, 0ms),
    filter 800ms var(--ease-out) var(--d, 0ms);
}
.slide.pre .e { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(10px); transition: none; }

/* ---------- Builds (clic a clic) ----------
   Entrada: materializar (blur → nítido, sube 28px), ease-out fuerte.
   Salida: mismo camino en reversa, más rápida y sin retraso. */
.b {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  filter: blur(10px);
  transition:
    opacity 350ms var(--ease-out),
    transform 400ms var(--ease-out),
    filter 350ms var(--ease-out);
}
.b.in {
  opacity: 1; transform: none; filter: blur(0);
  transition:
    opacity 900ms var(--ease-out) var(--d, 0ms),
    transform 1000ms var(--ease-out) var(--d, 0ms),
    filter 800ms var(--ease-out) var(--d, 0ms);
}
.b.fade { transform: none; }
.b.scale { transform: scale(0.94); }
.b.left { transform: translate3d(-48px, 0, 0); }
.b.right { transform: translate3d(48px, 0, 0); }
.b.slow.in {
  transition:
    opacity 1600ms var(--ease-out) var(--d, 0ms),
    transform 1800ms var(--ease-out) var(--d, 0ms),
    filter 1500ms var(--ease-out) var(--d, 0ms);
}
.b.in.fade, .b.in.scale, .b.in.left, .b.in.right { transform: none; }

/* Elementos que salen en un paso posterior */
.slide .gone {
  opacity: 0 !important;
  transform: translate3d(0, -22px, 0) scale(0.985) !important;
  filter: blur(12px) !important;
  transition:
    opacity 450ms var(--ease-out),
    transform 600ms var(--ease-out),
    filter 450ms var(--ease-out) !important;
  pointer-events: none;
}

/* Listas con foco: lo anterior se atenúa mientras se presenta lo nuevo */
[data-focus-list] > * { transition-property: opacity, transform, filter; }
[data-focus-list] > .in.dim { opacity: 0.34; transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out), filter 600ms var(--ease-out); }

/* Bustos: el fondo ya es negro puro; solo se desvanece el corte inferior */
.fade-bottom {
  -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 97%);
          mask-image: linear-gradient(180deg, #000 68%, transparent 97%);
}

/* ==========================================================================
   01 · Portada
   ========================================================================== */
#s-cover { padding: 0; background: #000; }
#s-cover .claro-badge { position: absolute; right: 100px; top: 70px; height: 42px; width: auto; }
#s-cover .cover-glow {
  position: absolute; right: 260px; bottom: 0; width: 900px; height: 900px;
  background: radial-gradient(circle, rgba(217,183,126,.20), rgba(169,203,227,.12) 45%, transparent 70%);
  filter: blur(60px); pointer-events: none;
}
#s-cover .cover-text { position: absolute; left: 136px; top: 372px; width: 1080px; }
#s-cover .cover-eyebrow {
  display: inline-block; margin-bottom: 30px; padding: 13px 28px; border-radius: 999px;
  background: rgba(122, 150, 186, .28); border: 1px solid rgba(169, 203, 227, .3);
  font-size: 21px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--cool);
}
#s-cover .h1 { font-size: 92px; line-height: 1.06; letter-spacing: -0.035em; }
#s-cover .cover-photo { position: absolute; right: 280px; bottom: 0; height: 82%; }
#s-cover .cover-photo img { height: 100%; width: auto; object-fit: contain; object-position: bottom; }
#s-cover .byline { position: absolute; left: 136px; bottom: 100px; }
#s-cover .byline p { font-size: 30px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); }
#s-cover .byline span { display: block; font-size: 22px; font-weight: 500; color: var(--fg2); margin-top: 6px; }

/* ==========================================================================
   02 · Una conversación sorprendente (letras al estilo Apple Music)
   ========================================================================== */
#s-conversacion .conv-title { position: absolute; left: 136px; top: 50%; margin-top: -106px; }
#s-conversacion .conv-eyebrow { position: absolute; left: 136px; top: 100px; }
#s-conversacion .lyrics {
  position: absolute; left: 136px; right: 260px; top: 0; bottom: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 84%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 84%, transparent 100%);
}
#s-conversacion .lyrics-track { position: absolute; left: 0; right: 0; top: 0; transition: transform 1100ms var(--ease-io); }
#s-conversacion .lyric {
  padding: 34px 0;
  opacity: 0; filter: blur(10px); transform: translate3d(0, 40px, 0);
  transition: opacity 500ms var(--ease-out), filter 500ms var(--ease-out), transform 700ms var(--ease-out);
}
#s-conversacion .lyric { text-align: center; }
#s-conversacion .lyric blockquote { font-size: 55px; line-height: 1.17; font-weight: 600; letter-spacing: -0.024em; max-width: 1480px; margin: 0 auto; }
#s-conversacion .lyric .who { font-size: 24px; font-weight: 600; margin-bottom: 18px; letter-spacing: 0.002em; }
#s-conversacion .lyric.now {
  opacity: 1; filter: blur(0); transform: none;
  transition: opacity 1000ms var(--ease-out) 150ms, filter 900ms var(--ease-out) 150ms, transform 1100ms var(--ease-out) 150ms;
}
#s-conversacion .lyric.past { opacity: 0.26; filter: blur(0); transform: none; transition: opacity 900ms var(--ease-out), filter 900ms var(--ease-out), transform 900ms var(--ease-out); }
#s-conversacion .lyric.far { opacity: 0.1; filter: blur(3px); }

/* ==========================================================================
   03 · Era sobre la escritura
   ========================================================================== */
#s-escritura .esc-head {
  position: absolute; left: 0; right: 0; top: 330px; text-align: center;
  transform-origin: 50% 0;
  transition: transform 1100ms var(--ease-io);
}
#s-escritura.s1 .esc-head { transform: translate3d(0, -50px, 0); }
#s-escritura.s2 .esc-head { transform: translate3d(0, -238px, 0) scale(0.52); }
#s-escritura .esc-head .h1 { font-size: 100px; }
#s-escritura .esc-sub { margin-top: 26px; }
#s-escritura .esc-meta { position: absolute; left: 0; right: 0; top: 292px; text-align: center; font-size: 26px; color: var(--fg2); font-weight: 500; }
#s-escritura .esc-meta em { font-style: italic; }
#s-escritura .cast { position: absolute; left: 180px; right: 180px; top: 360px; display: grid; grid-template-columns: 1fr 1fr; gap: 120px; }
#s-escritura .actor { display: flex; flex-direction: column; align-items: center; text-align: center; }
#s-escritura .actor .bust { width: 380px; height: 380px; }
#s-escritura .actor .bust img { width: 100%; height: 100%; object-fit: cover; }
#s-escritura .actor strong { display: block; font-size: 42px; font-weight: 700; letter-spacing: -0.02em; margin-top: 10px; }
#s-escritura .actor span { display: block; font-size: 26px; line-height: 1.38; color: var(--fg2); max-width: 540px; margin-top: 10px; }

/* ==========================================================================
   04 · La misma tensión
   ========================================================================== */
#s-tension .cmp { position: absolute; left: 136px; right: 136px; top: 440px; }
#s-tension .row { display: grid; grid-template-columns: 1fr 120px 1fr; align-items: center; position: relative; padding: 34px 0; }
#s-tension .row .line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--hair); transform-origin: 0 50%; }
#s-tension .row .line.b { opacity: 1; filter: none; transform: scaleX(0); transition: transform 500ms var(--ease-out); }
#s-tension .row .line.b.in { transform: scaleX(1); transition: transform 1200ms var(--ease-io) var(--d, 0ms); }
#s-tension .colhead { font-size: 26px; font-weight: 600; padding-bottom: 22px; }
#s-tension .cell { font-size: 40px; line-height: 1.16; font-weight: 600; letter-spacing: -0.02em; }
#s-tension .cell.then { color: var(--fg2); }
#s-tension .arrow { text-align: center; font-size: 36px; color: var(--fg3); font-weight: 400; }

/* ==========================================================================
   05 · Voces que anticipan el cambio (se acercan y retroceden)
   ========================================================================== */
#s-voces .vf {
  position: absolute; left: 180px; right: 180px; top: 300px; height: 460px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  opacity: 0; transform: scale(0.9); filter: blur(14px);
  transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out), filter 400ms var(--ease-out);
}
#s-voces .vf.in {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity 900ms var(--ease-out) 200ms, transform 1100ms var(--ease-out) 200ms, filter 900ms var(--ease-out) 200ms;
}
#s-voces .vf.in.gone {
  opacity: 0 !important; filter: blur(4px) !important;
  transform: translate3d(var(--dx), var(--dy), 0) scale(0.22) !important;
  transition: opacity 700ms var(--ease-io), transform 900ms var(--ease-io), filter 700ms var(--ease-io) !important;
}
#s-voces .vf-photo {
  width: 148px; height: 148px; border-radius: 50%; overflow: hidden; margin-bottom: 32px; flex: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 20px 50px rgba(0,0,0,.5);
  background: var(--card2);
}
#s-voces .vf-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
#s-voces .vf blockquote { font-size: 58px; line-height: 1.14; font-weight: 600; letter-spacing: -0.026em; max-width: 1450px; }
#s-voces .vf figcaption { margin-top: 44px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#s-voces .vf strong { font-size: 32px; font-weight: 600; letter-spacing: -0.01em; }
#s-voces .vf figcaption span { font-size: 23px; color: var(--fg2); }
#s-voces .horizon {
  display: inline-block; margin-top: 18px; padding: 10px 24px; border-radius: 999px;
  border: 1px solid var(--hair-strong); font-size: 24px; font-weight: 600;
}
#s-voces .horizon b { font-weight: 600; }

#s-voces .vm {
  position: absolute; width: 700px; height: 200px; padding: 26px 34px;
  border-radius: 28px; background: var(--card2);
  display: flex; flex-direction: row; align-items: center; gap: 26px;
  opacity: 0;
}
#s-voces .vm-photo { flex: none; width: 88px; height: 88px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.12); background: var(--card); }
#s-voces .vm-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
#s-voces .vm-body { display: flex; flex-direction: column; justify-content: center; gap: 14px; min-width: 0; }
#s-voces .vm p { font-size: 25px; line-height: 1.34; font-weight: 500; color: var(--fg); }
#s-voces .vm strong { font-size: 21px; font-weight: 600; color: var(--fg2); }
#s-voces.s4 .vm { animation: vm-seq 2600ms both; animation-delay: var(--d, 0ms); }
@keyframes vm-seq {
  0%   { opacity: 0; transform: scale(0.94); filter: blur(10px); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  26%  { opacity: 1; transform: none; filter: blur(0); }
  58%  { opacity: 1; transform: none; filter: blur(0); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
  100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) scale(0.26); filter: blur(4px); }
}

#s-voces .shelf {
  position: absolute; left: 136px; right: 136px; top: 826px; height: 164px;
  display: grid; grid-template-columns: repeat(3, 1.6fr) repeat(4, 1fr); gap: 16px;
}
#s-voces .vs {
  border-radius: 22px; background: var(--card); border: 1px solid rgba(255,255,255,.08);
  padding: 18px 22px; display: flex; flex-direction: row; align-items: center; gap: 16px;
}
#s-voces .vs.b { transform: scale(1.18); }
#s-voces .vs.b.in { transform: none; }
#s-voces .vs-photo { flex: none; width: 54px; height: 54px; border-radius: 50%; overflow: hidden; background: var(--card2); }
#s-voces .vs-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
#s-voces .vs-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#s-voces .vs em { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
#s-voces .vs strong { font-size: 19px; font-weight: 600; }
#s-voces .vs span { font-size: 16px; line-height: 1.3; color: var(--fg2); }
#s-voces .vs.minor { padding: 16px 18px; }
#s-voces .vs.minor .vs-photo { width: 42px; height: 42px; }
#s-voces .vs.minor em { font-size: 22px; }
#s-voces .vs.minor strong { font-size: 17px; }
#s-voces .vs.minor span { font-size: 15px; }
#s-voces .vs.minor.in { opacity: 0.62; }
#s-voces .voces-close { position: absolute; left: 180px; right: 180px; top: 440px; text-align: center; font-size: 56px; line-height: 1.15; }

/* ==========================================================================
   Listas a dos columnas (06 · 20)
   ========================================================================== */
.split { position: absolute; inset: 100px 120px; display: grid; grid-template-columns: 620px 1fr; gap: 100px; }
.split .aside { position: relative; }
.split .aside .h2 { font-size: 66px; }
.split .aside .closing { position: absolute; left: 0; bottom: 0; font-size: 42px; line-height: 1.18; font-weight: 600; letter-spacing: -0.02em; }
.list { display: flex; flex-direction: column; justify-content: center; }
.list .item { padding: 28px 0; border-top: 1px solid var(--hair); }
.list .item:last-child { border-bottom: 1px solid var(--hair); }
.list .item h3 { font-size: 40px; line-height: 1.14; font-weight: 600; letter-spacing: -0.02em; }
.list .item p { font-size: 26px; line-height: 1.38; color: var(--fg2); margin-top: 8px; }

/* ==========================================================================
   07 · Cada revolución amplió una capacidad humana
   ========================================================================== */
#s-historia .timeline { position: absolute; left: 136px; right: 136px; top: 360px; height: 470px; }
#s-historia .track { position: absolute; top: 292px; left: 140px; right: 140px; height: 2px; }
#s-historia .track i { position: absolute; top: 0; height: 2px; transform-origin: 0 50%; transform: scaleX(0); }
#s-historia .track .t1 { left: 0; width: 80%; background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.4)); transition: transform 500ms var(--ease-out); }
#s-historia .track .t2 { left: 80%; width: 20%; background: var(--grad); transition: transform 500ms var(--ease-out); }
#s-historia.s1 .track .t1 { transform: scaleX(1); transition: transform 2000ms var(--ease-io); }
#s-historia.s2 .track .t2 { transform: scaleX(1); transition: transform 900ms var(--ease-io); }
#s-historia .eras { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); }
#s-historia .era { display: flex; flex-direction: column; align-items: center; text-align: center; transition: opacity 800ms var(--ease-out); }
#s-historia .era .obj { width: 250px; height: 250px; margin-top: 25px; margin-bottom: 36px; }
#s-historia .era .obj img { width: 100%; height: 100%; object-fit: cover; }
#s-historia .era .yr { font-size: 20px; font-weight: 500; color: var(--fg3); letter-spacing: 0.02em; }
#s-historia .era h3 { font-size: 36px; font-weight: 600; letter-spacing: -0.02em; margin-top: 6px; }
#s-historia .era p { font-size: 26px; color: var(--fg2); margin-top: 4px; }
#s-historia.s2 .era:not(.ai) { opacity: 0.42; }
#s-historia .era.ai .obj { position: relative; }
#s-historia .era.ai .obj img { position: relative; -webkit-mask-image: radial-gradient(closest-side, #000 78%, transparent 100%); mask-image: radial-gradient(closest-side, #000 78%, transparent 100%); }
#s-historia .era.ai .obj::before {
  content: ""; position: absolute; inset: -40px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(184,140,255,.28), rgba(106,168,255,.1) 60%, transparent);
  opacity: 0; transform: scale(0.6); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}
#s-historia.s2 .era.ai .obj::before { opacity: 1; transform: none; transition: opacity 1800ms var(--ease-out) 300ms, transform 2200ms var(--ease-out) 300ms; }
#s-historia .era.ai.b { transform: scale(0.82); }
#s-historia .era.ai.b.in { transform: none; }
#s-historia .era.ai h3 { font-weight: 700; }
#s-historia .foot { bottom: 110px; }

/* ==========================================================================
   08 · Tres relojes
   ========================================================================== */
#s-relojes .clocks { position: absolute; left: 136px; right: 136px; top: 390px; }
#s-relojes .axis { display: grid; grid-template-columns: 470px 1fr; margin-bottom: 18px; }
#s-relojes .ticks { position: relative; height: 28px; }
#s-relojes .ticks span { position: absolute; transform: translateX(-50%); font-size: 19px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg3); }
#s-relojes .clock { display: grid; grid-template-columns: 470px 1fr; align-items: center; padding: 30px 0; border-top: 1px solid var(--hair); }
#s-relojes .clock:last-child { border-bottom: 1px solid var(--hair); }
#s-relojes .clock h3 { font-size: 40px; font-weight: 600; letter-spacing: -0.02em; }
#s-relojes .clock p { font-size: 24px; color: var(--fg2); margin-top: 6px; }
#s-relojes .bar { position: relative; height: 30px; }
#s-relojes .bar .gridline { position: absolute; top: -34px; bottom: -34px; width: 1px; background: rgba(255,255,255,.06); }
#s-relojes .bar .fill {
  position: absolute; left: 0; top: 0; height: 30px; border-radius: 15px;
  transform-origin: 0 50%; transform: scaleX(0);
  transition: transform 400ms var(--ease-out);
}
#s-relojes .bar .fill.in { transform: scaleX(1); transition: transform var(--dur, 1000ms) var(--ease-io) 150ms; }
#s-relojes .bar .val { position: absolute; top: 50%; transform: translate(18px, -50%); font-size: 26px; font-weight: 600; white-space: nowrap; }
#s-relojes .bar .val.b.in { transform: translate(18px, -50%); }
#s-relojes .bar .val.b { transform: translate(8px, -50%); }

/* ==========================================================================
   09 · La empresa en transición
   ========================================================================== */
#s-transicion .chart { position: absolute; left: 136px; top: 380px; width: 1680px; height: 290px; }
#s-transicion svg { position: absolute; inset: 0; overflow: visible; }
#s-transicion .seg { fill: none; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 500ms var(--ease-out); }
#s-transicion .seg.auto { stroke: url(#g-auto); }
#s-transicion .seg.resp { stroke: var(--warm); }
#s-transicion .seg.in { stroke-dashoffset: 0; transition: stroke-dashoffset 1300ms var(--ease-io) 100ms; }
#s-transicion .axis-line { stroke: var(--hair); stroke-width: 1; }
#s-transicion .dot { transform-box: fill-box; transform-origin: center; transform: scale(0.4); opacity: 0; transition: transform 400ms var(--ease-out), opacity 300ms var(--ease-out); }
#s-transicion .dot.in { transform: none; opacity: 1; transition: transform 900ms var(--ease-pop) 1100ms, opacity 500ms var(--ease-out) 1100ms; }
#s-transicion .dot.auto { fill: var(--cool); }
#s-transicion .dot.resp { fill: var(--warm); }
#s-transicion .halo { transform-box: fill-box; transform-origin: center; opacity: 0; }
#s-transicion .linelabel { position: absolute; font-size: 21px; font-weight: 600; white-space: nowrap; }
#s-transicion .stages { position: absolute; left: 136px; right: 136px; top: 690px; display: grid; grid-template-columns: repeat(4, 1fr); }
#s-transicion .stage-col { padding: 0 34px 0 0; }
#s-transicion .stage-col h3 { font-size: 32px; font-weight: 600; letter-spacing: -0.015em; }
#s-transicion .stage-col p { font-size: 21px; line-height: 1.4; color: var(--fg2); margin-top: 8px; }
#s-transicion .tag { display: inline-block; margin-top: 12px; font-size: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg3); border: 1px solid var(--hair); border-radius: 999px; padding: 6px 12px; }
#s-transicion .foot { bottom: 70px; display: flex; align-items: baseline; justify-content: space-between; gap: 40px; }
#s-transicion .foot .takeaway { font-size: 40px; }
#s-transicion .foot .caption { font-size: 20px; color: var(--fg3); text-align: right; line-height: 1.4; }

/* ==========================================================================
   10 · Sectores (rangos)
   ========================================================================== */
#s-sectores .ranges { position: absolute; left: 136px; right: 136px; top: 430px; }
#s-sectores .rrow { display: grid; grid-template-columns: 520px 1fr; align-items: center; padding: 30px 0; border-top: 1px solid var(--hair); }
#s-sectores .rrow:last-child { border-bottom: 1px solid var(--hair); }
#s-sectores .rrow h3 { font-size: 34px; font-weight: 600; letter-spacing: -0.015em; }
#s-sectores .rrow p { font-size: 22px; color: var(--fg2); margin-top: 6px; }
#s-sectores .scale-head { display: grid; grid-template-columns: 520px 1fr; margin-bottom: 14px; }
#s-sectores .rtrack { position: relative; height: 44px; }
#s-sectores .grid { position: absolute; top: -40px; bottom: -40px; width: 1px; background: rgba(255,255,255,.06); }
#s-sectores .grid.full { background: rgba(255,255,255,.14); transition: background 800ms var(--ease-out); }
#s-sectores.s4 .grid.full { background: rgba(255,255,255,.55); }
#s-sectores .pct { position: absolute; transform: translateX(-50%); font-size: 19px; font-weight: 600; color: var(--fg3); }
#s-sectores .pct.full { transition: color 800ms var(--ease-out); }
#s-sectores.s4 .pct.full { color: var(--fg); }
#s-sectores .range {
  position: absolute; top: 0; height: 44px; border-radius: 22px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
  font-size: 21px; font-weight: 700; color: #000;
  transform-origin: 0 50%;
}
#s-sectores .range.b { transform: scaleX(0.02); filter: none; opacity: 0; }
#s-sectores .range.b.in { transform: none; opacity: 1; transition: transform 1300ms var(--ease-io) 100ms, opacity 400ms var(--ease-out) 100ms; }
#s-sectores .range .v { opacity: 0; transition: opacity 300ms var(--ease-out); }
#s-sectores .range.in .v { opacity: 1; transition: opacity 600ms var(--ease-out) 1200ms; }
#s-sectores .range.r1 { background: #8E8E93; }
#s-sectores .range.r2 { background: #D1D1D6; }
#s-sectores .range.r3 { background: var(--grad); }
#s-sectores .rtrack .rest {
  position: absolute; top: 0; height: 44px; right: 0; border-radius: 22px;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 2px, transparent 2px 12px);
  opacity: 0; transition: opacity 400ms var(--ease-out);
}
#s-sectores.s4 .rtrack .rest { opacity: 1; transition: opacity 1200ms var(--ease-out) 200ms; }

/* ==========================================================================
   11 · La inteligencia se abarata
   ========================================================================== */
#s-costo .hero { position: absolute; left: 110px; top: 300px; }
#s-costo .hero .big { font-size: 252px; line-height: 0.9; font-weight: 700; letter-spacing: -0.055em; }
#s-costo .hero .cap { margin-top: 26px; font-size: 38px; font-weight: 600; letter-spacing: -0.015em; }
#s-costo .hero .sub { font-size: 26px; color: var(--fg2); margin-top: 6px; }
#s-costo .side { position: absolute; left: 1150px; right: 136px; top: 330px; }
#s-costo .stat { padding: 30px 0; border-top: 1px solid var(--hair); }
#s-costo .stat:last-child { border-bottom: 1px solid var(--hair); }
#s-costo .stat .n { font-size: 88px; line-height: 1; font-weight: 700; letter-spacing: -0.045em; }
#s-costo .stat .l { font-size: 30px; font-weight: 600; margin-top: 10px; letter-spacing: -0.01em; }
#s-costo .stat .s { font-size: 22px; color: var(--fg2); margin-top: 4px; }

/* ==========================================================================
   12 · La transformación no se compra
   ========================================================================== */
#s-nosecompra .panels { position: absolute; left: 136px; right: 136px; top: 440px; display: grid; grid-template-columns: 1fr 1fr; gap: 120px; }
#s-nosecompra .label { margin-bottom: 30px; }
#s-nosecompra .stack { display: flex; gap: 6px; height: 72px; }
#s-nosecompra .stack i { display: block; height: 100%; border-radius: 12px; transform-origin: 0 50%; }
#s-nosecompra .stack i.b { transform: scaleX(0); opacity: 1; filter: none; }
#s-nosecompra .stack i.b.in { transform: none; transition: transform 900ms var(--ease-io) var(--d, 0ms); }
#s-nosecompra .stack-labels { display: flex; gap: 6px; margin-top: 18px; }
#s-nosecompra .stack-labels div { min-width: 0; }
#s-nosecompra .stack-labels strong { display: block; font-size: 44px; font-weight: 700; letter-spacing: -0.03em; }
#s-nosecompra .stack-labels span { display: block; font-size: 21px; line-height: 1.3; color: var(--fg2); margin-top: 4px; }
#s-nosecompra .hbar { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 20px; margin-bottom: 22px; min-height: 64px; }
#s-nosecompra .hbar span { font-size: 24px; line-height: 1.25; font-weight: 500; }
#s-nosecompra .hbar .bw { position: relative; height: 38px; }
#s-nosecompra .hbar .bw i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 10px; transform-origin: 0 50%; }
#s-nosecompra .hbar .bw i.b { transform: scaleX(0); opacity: 1; filter: none; }
#s-nosecompra .hbar .bw i.b.in { transform: none; transition: transform 1000ms var(--ease-io) var(--d, 0ms); }
#s-nosecompra .hbar .bw b { position: absolute; top: 50%; transform: translate(14px, -50%); font-size: 24px; font-weight: 700; }

/* ==========================================================================
   13 · El empleo se reconfigura
   ========================================================================== */
#s-empleo .panels { position: absolute; left: 136px; right: 136px; top: 400px; display: grid; grid-template-columns: 1fr 1fr; gap: 120px; }
#s-empleo .people { display: flex; gap: 20px; margin: 10px 0 26px; }
#s-empleo .people svg { width: 64px; height: 108px; }
#s-empleo .people svg.hl { fill: url(#g-fill); }
#s-empleo .people svg:not(.hl) { fill: #3A3A3C; }
#s-empleo .big { font-size: 70px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
#s-empleo .big + p { font-size: 28px; color: var(--fg2); margin-top: 10px; }
#s-empleo .minor { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--hair); display: flex; align-items: baseline; gap: 18px; }
#s-empleo .minor strong { font-size: 52px; font-weight: 700; letter-spacing: -0.03em; }
#s-empleo .minor span { font-size: 24px; color: var(--fg2); }
#s-empleo .wf { position: relative; height: 350px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; align-items: end; margin-top: 6px; }
#s-empleo .wf .col { position: relative; height: 100%; }
#s-empleo .wf .bar { position: absolute; left: 0; right: 0; border-radius: 14px; }
#s-empleo .wf .bar.b { opacity: 1; filter: none; transform: scaleY(0); }
#s-empleo .wf .bar.b.in { transform: none; transition: transform 1100ms var(--ease-io) var(--d, 0ms); }
#s-empleo .wf .up { transform-origin: 50% 100%; }
#s-empleo .wf .down { transform-origin: 50% 0; }
#s-empleo .wf-labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 18px; }
#s-empleo .wf-labels strong { display: block; font-size: 40px; font-weight: 700; letter-spacing: -0.025em; }
#s-empleo .wf-labels span { display: block; font-size: 21px; color: var(--fg2); margin-top: 2px; }

/* ==========================================================================
   14 · Preparar personas
   ========================================================================== */
#s-preparar .cards { position: absolute; left: 136px; right: 136px; top: 408px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px; }
#s-preparar .card { height: 460px; border-radius: 32px; background: var(--card); border: 1px solid rgba(255,255,255,.07); padding: 40px 32px; display: flex; flex-direction: column; }
#s-preparar .card svg { width: 64px; height: 64px; fill: none; stroke: url(#g-stroke); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
#s-preparar .card h3 { font-size: 32px; line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; margin-top: auto; }
#s-preparar .card p { font-size: 24px; line-height: 1.38; color: var(--fg2); margin-top: 12px; min-height: 100px; }

/* ==========================================================================
   15 · La paradoja económica
   ========================================================================== */
#s-paradoja .panels { position: absolute; left: 136px; right: 136px; top: 400px; display: grid; grid-template-columns: 1fr 1fr; gap: 120px; }
#s-paradoja .label { margin-bottom: 22px; }
#s-paradoja .money { font-size: 110px; line-height: 0.95; font-weight: 700; letter-spacing: -0.05em; }
#s-paradoja .money-cap { font-size: 34px; font-weight: 600; margin-top: 14px; letter-spacing: -0.01em; }
#s-paradoja .inv { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--hair); display: flex; align-items: baseline; gap: 18px; }
#s-paradoja .inv strong { font-size: 56px; font-weight: 700; letter-spacing: -0.03em; }
#s-paradoja .inv span { font-size: 25px; color: var(--fg2); }
#s-paradoja .grids { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
#s-paradoja .dots { display: grid; grid-template-columns: repeat(10, 16px); gap: 8px; }
#s-paradoja .dots i { width: 16px; height: 16px; border-radius: 50%; background: #2C2C2E; transition: background 300ms var(--ease-out), transform 300ms var(--ease-out); }
#s-paradoja .dots i.on { background: #2C2C2E; }
#s-paradoja.s2 .dots i.on { background: var(--fg); transform: scale(1.06); transition: background 500ms var(--ease-out) calc(var(--i) * 45ms + 300ms), transform 500ms var(--ease-pop) calc(var(--i) * 45ms + 300ms); }
#s-paradoja.s2 .dots.hot i.on { background: var(--coral); }
#s-paradoja .gstat { margin-top: 22px; }
#s-paradoja .gstat strong { display: block; font-size: 56px; font-weight: 700; letter-spacing: -0.03em; }
#s-paradoja .gstat span { display: block; font-size: 22px; line-height: 1.35; color: var(--fg2); margin-top: 4px; }
#s-paradoja .migra { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--hair); font-size: 26px; font-weight: 500; color: var(--fg); }

/* ==========================================================================
   16 · 22 · Cuatro columnas con filete superior
   ========================================================================== */
.cols4 { position: absolute; left: 136px; right: 136px; top: 448px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 64px; }
.cols4 .col { position: relative; padding-top: 34px; }
.cols4 .col .rule { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad); transform-origin: 0 50%; }
.cols4 .col.b .rule { transform: scaleX(0); transition: transform 400ms var(--ease-out); }
.cols4 .col.b.in .rule { transform: scaleX(1); transition: transform 1100ms var(--ease-io); }
.cols4 .col h3 { font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; }
.cols4 .col p { font-size: 26px; line-height: 1.4; color: var(--fg2); margin-top: 14px; }
.cols4.words .col h3 { font-size: 50px; letter-spacing: -0.03em; }
.cols4.words .col p { font-size: 32px; color: var(--fg2); }

/* ==========================================================================
   17 · Claro, 95 años
   ========================================================================== */
#s-claro95 .bgimg { position: absolute; right: 0; top: 0; width: 1300px; height: 760px; opacity: 0.55;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%); mask-image: linear-gradient(90deg, transparent 0%, #000 55%); }
#s-claro95 .bgimg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
#s-claro95 .bgimg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, #000 100%); }
#s-claro95 .brand { height: 46px; width: auto; margin-bottom: 40px; }
#s-claro95 .h2 { font-size: 70px; }
#s-claro95 .lead { max-width: 1000px; margin-top: 18px; font-size: 28px; }
#s-claro95 .tl { position: absolute; left: 136px; right: 136px; top: 590px; height: 300px; }
#s-claro95 .tl .base { position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: rgba(255,255,255,.12); }
#s-claro95 .tl .prog { position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--fg); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1100ms var(--ease-io); }
#s-claro95 .nodes { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); }
#s-claro95 .node { position: relative; padding-right: 22px; }
#s-claro95 .node .pin { width: 24px; height: 24px; border-radius: 50%; background: #000; border: 2px solid rgba(255,255,255,.22); transition: border-color 500ms var(--ease-out), background 500ms var(--ease-out), transform 500ms var(--ease-out); }
#s-claro95 .node.lit .pin { border-color: var(--fg); background: var(--fg); transition: border-color 500ms var(--ease-out) 700ms, background 500ms var(--ease-out) 700ms; }
#s-claro95 .node.now .pin { box-shadow: 0 0 0 8px rgba(255,255,255,.10); }
#s-claro95 .node .txt { margin-top: 28px; }
#s-claro95 .node .yr { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; }
#s-claro95 .node h3 { font-size: 19px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 10px; color: var(--fg); }
#s-claro95 .node p { font-size: 19px; line-height: 1.38; color: var(--fg2); margin-top: 8px; }
#s-claro95 .node .txt.b.in.dim { opacity: 0.5; }
#s-claro95 .foot { bottom: 70px; }
#s-claro95 .foot .takeaway { font-size: 38px; max-width: 1560px; }

/* ==========================================================================
   18 · Claro 2026
   ========================================================================== */
#s-claro2026 .brand { height: 40px; width: auto; margin-bottom: 36px; }
#s-claro2026 .wrap { position: absolute; left: 136px; right: 136px; top: 410px; display: grid; grid-template-columns: 1.55fr 1fr; gap: 110px; }
#s-claro2026 .label { margin-bottom: 26px; }
#s-claro2026 .stairs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: end; height: 430px; }
#s-claro2026 .stair { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
#s-claro2026 .stair h3 { font-size: 30px; line-height: 1.12; font-weight: 600; letter-spacing: -0.015em; }
#s-claro2026 .stair p { font-size: 21px; line-height: 1.36; color: var(--fg2); margin: 8px 0 18px; }
#s-claro2026 .stair i { display: block; border-radius: 18px 18px 6px 6px; transform-origin: 50% 100%; transform: scaleY(0); transition: transform 400ms var(--ease-out); }
#s-claro2026 .stair.in i { transform: none; transition: transform 1200ms var(--ease-io) calc(var(--d, 0ms) + 250ms); }
#s-claro2026 .procs .proc { padding: 30px 0; border-top: 1px solid var(--hair); display: grid; grid-template-columns: 30px 1fr; gap: 18px; }
#s-claro2026 .procs .proc:last-child { border-bottom: 1px solid var(--hair); }
#s-claro2026 .procs .dotc { width: 16px; height: 16px; border-radius: 50%; margin-top: 12px; }
#s-claro2026 .procs h3 { font-size: 32px; line-height: 1.15; font-weight: 600; letter-spacing: -0.015em; }
#s-claro2026 .procs p { font-size: 22px; color: var(--fg2); margin-top: 6px; }

/* ==========================================================================
   19 · Voces académicas
   ========================================================================== */
#s-academia .trio { position: absolute; left: 136px; right: 136px; top: 440px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 72px; }
#s-academia .voice { padding-top: 30px; border-top: 1px solid var(--hair); }
#s-academia .voice .label { color: var(--fg3); }
#s-academia .voice strong { display: block; font-size: 28px; font-weight: 600; margin-top: 8px; color: var(--fg2); }
#s-academia .voice p { font-size: 50px; line-height: 1.1; font-weight: 600; letter-spacing: -0.025em; margin-top: 28px; }

/* ==========================================================================
   21 · Preguntar mejor (burbujas)
   ========================================================================== */
#s-preguntar .chat { position: absolute; left: 136px; right: 136px; top: 400px; display: grid; grid-template-columns: 560px 1fr; gap: 120px; }
#s-preguntar .label { margin-bottom: 30px; }
#s-preguntar .thread { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
#s-preguntar .thread.passive { align-items: flex-start; }
#s-preguntar .bubble {
  position: relative; font-size: 32px; line-height: 1.2; font-weight: 500; letter-spacing: -0.01em;
  padding: 16px 28px 18px; border-radius: 34px; max-width: 900px;
}
#s-preguntar .bubble.gray { background: #3A3A3C; color: var(--fg); }
#s-preguntar .bubble.blue { background: var(--imessage); color: #fff; }
#s-preguntar .bubble.tail::before, #s-preguntar .bubble.tail::after { content: ""; position: absolute; bottom: 0; height: 28px; }
#s-preguntar .bubble.blue.tail::before { right: -9px; width: 22px; background: var(--imessage); border-bottom-left-radius: 18px 16px; }
#s-preguntar .bubble.blue.tail::after { right: -28px; width: 28px; background: #000; border-bottom-left-radius: 12px; }
#s-preguntar .bubble.gray.tail::before { left: -9px; width: 22px; background: #3A3A3C; border-bottom-right-radius: 18px 16px; }
#s-preguntar .bubble.gray.tail::after { left: -28px; width: 28px; background: #000; border-bottom-right-radius: 12px; }
#s-preguntar .bubble.b { transform: scale(0.72) translate3d(0, 20px, 0); filter: blur(6px); transform-origin: 100% 100%; }
#s-preguntar .bubble.gray.b { transform-origin: 0 100%; }
#s-preguntar .bubble.b.in { transform: none; transition: opacity 500ms var(--ease-out) var(--d, 0ms), transform 700ms var(--ease-pop) var(--d, 0ms), filter 500ms var(--ease-out) var(--d, 0ms); }
#s-preguntar .passive-note { margin-top: 26px; font-size: 24px; color: var(--fg3); }

/* ==========================================================================
   23 · El criterio escasea
   ========================================================================== */
#s-criterio .verbs { display: flex; flex-direction: column; justify-content: center; }
#s-criterio .verb { padding: 22px 0; border-top: 1px solid var(--hair); display: grid; grid-template-columns: 380px 1fr; align-items: baseline; }
#s-criterio .verb:last-child { border-bottom: 1px solid var(--hair); }
#s-criterio .verb span { font-size: 22px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg3); }
#s-criterio .verb strong { font-size: 60px; line-height: 1.05; font-weight: 700; letter-spacing: -0.035em; }
#s-criterio .aside .h2 { font-size: 72px; line-height: 1.04; }

/* ==========================================================================
   24 · Empresa y universidad (Venn)
   ========================================================================== */
#s-juntas .venn { position: absolute; left: 0; right: 0; top: 300px; height: 580px; }
#s-juntas .circle {
  position: absolute; top: 20px; width: 540px; height: 540px; border-radius: 50%;
  display: flex; flex-direction: column; justify-content: center;
  mix-blend-mode: screen;
}
#s-juntas .circle.emp { left: calc(960px - 470px); background: radial-gradient(circle at 35% 40%, rgba(247,194,122,.20), rgba(247,194,122,.07) 70%); box-shadow: inset 0 0 0 1.5px rgba(247,194,122,.55); padding: 0 250px 0 78px; }
#s-juntas .circle.uni { left: calc(960px - 70px); background: radial-gradient(circle at 65% 40%, rgba(106,168,255,.22), rgba(106,168,255,.07) 70%); box-shadow: inset 0 0 0 1.5px rgba(106,168,255,.55); padding: 0 70px 0 250px; text-align: left; }
#s-juntas .circle.emp.b.in { transition: opacity 900ms var(--ease-out), transform 1100ms var(--ease-out), filter 800ms var(--ease-out); }
#s-juntas.s3 .circle.emp { transform: translate3d(60px, 0, 0); transition: transform 1400ms var(--ease-io); }
#s-juntas.s3 .circle.uni { transform: translate3d(-60px, 0, 0); transition: transform 1400ms var(--ease-io); }
#s-juntas .circle h3 { font-size: 38px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 18px; }
#s-juntas .circle li { list-style: none; font-size: 22px; line-height: 1.32; color: var(--fg); margin-bottom: 14px; }
#s-juntas .circle ul { margin: 0; padding: 0; }
#s-juntas .center {
  position: absolute; left: 50%; top: 290px; width: 220px; transform: translate(-50%, -50%);
  text-align: center; font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em;
}
#s-juntas .center.b { transform: translate(-50%, -50%) scale(0.9); }
#s-juntas .center.b.in { transform: translate(-50%, -50%); transition: opacity 900ms var(--ease-out) 900ms, transform 1100ms var(--ease-out) 900ms, filter 800ms var(--ease-out) 900ms; }
#s-juntas .foot { bottom: 80px; text-align: center; }

/* ==========================================================================
   25 · Las olas
   ========================================================================== */
#s-olas { padding: 0; }
#s-olas .bg { position: absolute; inset: 0; overflow: hidden; }
#s-olas .bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; transform: scale(1.0); transition: transform 14000ms var(--ease-out); }
#s-olas.active .bg img { transform: scale(1.05); }
#s-olas.pre .bg img { transform: scale(1.0); transition: none; }
#s-olas .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.15) 70%, rgba(0,0,0,.4) 100%); }
#s-olas .dim { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity 700ms var(--ease-out); }
#s-olas.s2 .dim { opacity: 0.74; transition: opacity 1600ms var(--ease-out); }
#s-olas .top { position: absolute; left: 136px; top: 110px; width: 1300px; }
#s-olas .top .h1 { font-size: 88px; }
#s-olas .qs { position: absolute; left: 136px; top: 480px; }
#s-olas .qs p { font-size: 64px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; }
#s-olas .reflect { position: absolute; left: 200px; right: 200px; top: 50%; transform: translateY(-50%); text-align: center; }
#s-olas .reflect p { font-size: 54px; line-height: 1.18; font-weight: 600; letter-spacing: -0.024em; }
#s-olas .reflect p + p { margin-top: 30px; }
#s-olas .reflect .b.in { transform: none; }

/* ==========================================================================
   26 · Volvamos a Platón
   ========================================================================== */
#s-platon .head { max-width: none; text-align: center; }
#s-platon .head .h2 { font-size: 62px; }
#s-platon .duo { position: absolute; left: 200px; right: 200px; top: 330px; display: grid; grid-template-columns: 1fr 1fr; gap: 160px; }
#s-platon .duo figure { display: flex; flex-direction: column; align-items: center; text-align: center; }
#s-platon .duo .bust { width: 340px; height: 340px; }
#s-platon .duo .bust img { width: 100%; height: 100%; object-fit: cover; }
#s-platon .duo p { font-size: 38px; line-height: 1.2; font-weight: 600; letter-spacing: -0.018em; margin-top: 18px; max-width: 560px; }
#s-platon .duo figure.left.gone { transform: translate3d(-60px, 0, 0) !important; }
#s-platon .duo figure.right.gone { transform: translate3d(60px, 0, 0) !important; }
#s-platon .today { position: absolute; left: 200px; right: 200px; top: 870px; text-align: center; font-size: 40px; line-height: 1.22; font-weight: 500; color: var(--fg2); }
#s-platon .today strong { color: var(--fg); font-weight: 600; }
#s-platon .final { position: absolute; left: 160px; right: 160px; top: 50%; transform: translateY(-50%); text-align: center; }
#s-platon .final .l1 { font-size: 88px; line-height: 1.04; font-weight: 700; letter-spacing: -0.035em; }
#s-platon .final .l2 { font-size: 60px; line-height: 1.14; font-weight: 600; letter-spacing: -0.026em; margin-top: 34px; }
#s-platon .final .b.in { transform: none; }

/* ==========================================================================
   27 · Gracias
   ========================================================================== */
#s-gracias { padding: 0; }
#s-gracias .bg { position: absolute; inset: 0; opacity: 0.4; }
#s-gracias .bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
#s-gracias .shade { position: absolute; inset: 0; background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.9) 35%, rgba(0,0,0,0) 80%); }
#s-gracias .txt { position: absolute; left: 136px; top: 300px; }
#s-gracias .txt .h1 { font-size: 176px; letter-spacing: -0.05em; line-height: 0.95; }
#s-gracias .byline { position: absolute; left: 136px; bottom: 100px; display: flex; align-items: center; gap: 32px; }
#s-gracias .byline p { font-size: 30px; font-weight: 500; }
#s-gracias .byline .sep { width: 1px; height: 44px; background: var(--hair-strong); }
#s-gracias .byline img { height: 46px; width: auto; }

/* ==========================================================================
   Material de apoyo
   ========================================================================== */
#s-backup .mid { position: absolute; left: 136px; top: 50%; transform: translateY(-50%); }
#s-backup .h1 { color: var(--fg); }

/* B1 · Humano aumentado */
#s-aumentado .eq { position: absolute; left: 136px; top: 400px; display: flex; align-items: baseline; gap: 22px; font-size: 40px; font-weight: 600; letter-spacing: -0.015em; }
#s-aumentado .eq i { font-style: normal; color: var(--fg3); font-weight: 400; }
#s-aumentado .quote { position: absolute; left: 136px; top: 500px; width: 760px; }
#s-aumentado .quote p { font-size: 50px; line-height: 1.14; font-weight: 600; letter-spacing: -0.025em; }
#s-aumentado .quote p.dimtext { margin-bottom: 10px; }
#s-aumentado .uses { position: absolute; left: 1000px; right: 136px; top: 400px; }
#s-aumentado .uses div { padding: 26px 0; border-top: 1px solid var(--hair); font-size: 36px; font-weight: 600; letter-spacing: -0.015em; }
#s-aumentado .uses div:last-child { border-bottom: 1px solid var(--hair); }
#s-aumentado .foot .takeaway { font-size: 40px; }

/* B2 · Brecha de adopción */
#s-brecha .lanes { position: absolute; left: 136px; right: 136px; top: 420px; }
#s-brecha .lane { display: grid; grid-template-columns: 320px 1fr; align-items: center; padding: 38px 0; border-top: 1px solid var(--hair); }
#s-brecha .lane:last-child { border-bottom: 1px solid var(--hair); }
#s-brecha .lane h3 { font-size: 36px; font-weight: 600; }
#s-brecha .chips { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; }
#s-brecha .chip { font-size: 28px; font-weight: 600; padding: 14px 26px; border-radius: 999px; background: var(--card2); white-space: nowrap; }
#s-brecha .sep { color: var(--fg3); font-size: 26px; }
#s-brecha .lane.fast .chip { color: var(--warm); }
#s-brecha .lane.slow .chip { color: var(--cool); }

/* B3 · Escritora */
#s-escritora .bars { position: absolute; left: 136px; right: 136px; top: 430px; }
#s-escritora .brow { display: grid; grid-template-columns: 300px 1fr; align-items: center; padding: 30px 0; border-top: 1px solid var(--hair); }
#s-escritora .brow:last-of-type { border-bottom: 1px solid var(--hair); }
#s-escritora .brow h3 { font-size: 34px; font-weight: 600; }
#s-escritora .brow p { font-size: 24px; color: var(--fg2); margin-top: 4px; }
#s-escritora .seg { display: flex; height: 48px; gap: 4px; }
#s-escritora .seg i { display: block; height: 100%; border-radius: 10px; transform-origin: 0 50%; }
#s-escritora .seg i.b { transform: scaleX(0); opacity: 1; filter: none; }
#s-escritora .seg i.b.in { transform: none; transition: transform 1100ms var(--ease-io) var(--d, 0ms); }
#s-escritora .legend { display: flex; gap: 36px; margin-top: 26px; font-size: 22px; color: var(--fg2); }
#s-escritora .legend span::before { content: ""; display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 10px; vertical-align: -1px; background: var(--c); }
#s-escritora .quote { position: absolute; left: 136px; right: 136px; bottom: 96px; font-size: 48px; line-height: 1.15; font-weight: 600; letter-spacing: -0.022em; }

/* B4 · El líder */
#s-lider .flow { position: absolute; left: 136px; right: 136px; top: 470px; display: grid; grid-template-columns: 1fr 60px 1fr 60px 1fr 60px 1fr; align-items: center; }
#s-lider .step { border-radius: 28px; background: var(--card); border: 1px solid rgba(255,255,255,.07); padding: 34px 30px; }
#s-lider .step h3 { font-size: 22px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg2); }
#s-lider .step p { font-size: 44px; font-weight: 700; letter-spacing: -0.025em; margin-top: 8px; }
#s-lider .step.human { border-color: rgba(247,194,122,.5); }
#s-lider .arrow { text-align: center; color: var(--fg3); font-size: 34px; }
#s-lider .brackets { position: absolute; left: 136px; right: 136px; top: 400px; display: grid; grid-template-columns: 1245px 375px; gap: 60px; }
#s-lider .brackets div { border-top: 2px solid; padding-top: 12px; font-size: 20px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

/* ==========================================================================
   Vista general, pantalla negra, presentador
   ========================================================================== */
.blackout { position: fixed; inset: 0; background: #000; z-index: 50; opacity: 0; pointer-events: none; transition: opacity 400ms var(--ease-out); }
body.black .blackout { opacity: 1; pointer-events: auto; }

.overview {
  position: fixed; inset: 0; z-index: 40; overflow-y: auto;
  background: rgba(0,0,0,.86);
  -webkit-backdrop-filter: blur(30px) saturate(140%); backdrop-filter: blur(30px) saturate(140%);
  padding: 48px; opacity: 0; pointer-events: none;
  transition: opacity 300ms var(--ease-out);
}
body.show-overview .overview { opacity: 1; pointer-events: auto; }
.overview .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; transform: scale(0.98); transition: transform 400ms var(--ease-out); }
body.show-overview .overview .grid { transform: none; }
.overview .thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.12); cursor: pointer; transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out); }
.overview .thumb:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .overview .thumb:hover { box-shadow: 0 0 0 2px rgba(255,255,255,.5); } }
.overview .thumb.current { box-shadow: 0 0 0 3px var(--cool); }
.overview .thumb .mini { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; pointer-events: none; }
.overview .thumb .mini .slide { opacity: 1 !important; visibility: visible !important; transform: none !important; filter: none !important; }
.overview .thumb .no { position: absolute; left: 10px; bottom: 8px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.75); text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.overview .hint { color: var(--fg3); font-size: 14px; margin: 0 0 20px; }

.jump { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 60; padding: 12px 22px; border-radius: 14px;
  background: rgba(40,40,42,.72); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  font-size: 22px; font-weight: 600; color: var(--fg); opacity: 0; transition: opacity 150ms var(--ease-out); pointer-events: none; }
.jump.show { opacity: 1; }

/* ==========================================================================
   TEMA GOLD · negro + marfil, oro suave y cristal
   (va después de todo lo anterior para sobreescribirlo sin tocarlo)
   ========================================================================== */

/* ---------- Láminas marfil ("respiro") ---------- */
.slide.light {
  --bg: #F1ECE3;
  --fg: #1C1813;
  --fg2: #5F574C;
  --fg3: #8F8577;
  --hair: rgba(40, 30, 15, 0.14);
  --hair-strong: rgba(40, 30, 15, 0.28);
  --card: rgba(255, 255, 255, 0.55);
  --card2: rgba(255, 255, 255, 0.7);
  --warm: #9C7532;
  --coral: #A4664C;
  --violet: #7D7788;
  --cool: #5F7F97;
  --gold-label: #9A7535;
  --grad: linear-gradient(90deg, #8A6428 0%, #B08A45 45%, #6D8BA2 100%);
  --bar-dim: #DCD3C5;
  --bar-mid: #B3A792;
  --bar-soft: #756A5B;
  --ink-2: #E4DCCF;
  --ink-3: #D3C9B9;
  background: var(--bg);
  color: var(--fg);
}

/* Luz ambiental: brillos radiales muy suaves (sin filtros: solo gradientes) */
.slide::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(1100px 700px at 6% 110%, rgba(217, 183, 126, 0.10), transparent 70%),
    radial-gradient(900px 620px at 100% -12%, rgba(169, 203, 227, 0.06), transparent 70%);
}
.slide.light::before {
  background:
    radial-gradient(1200px 820px at 0% 0%, rgba(255, 255, 255, 0.75), transparent 62%),
    radial-gradient(1000px 720px at 100% 100%, rgba(217, 183, 126, 0.16), transparent 70%);
}

/* Solo se renderizan la lámina activa, sus vecinas y la saliente (deck.js marca .near):
   las demás no se pintan ni decodifican imágenes → la presentación pesa poco en memoria. */
.slide:not(.near):not(.active) { content-visibility: hidden; }

/* ---------- Tipografía fina (display) ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 18px;
  font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-label); margin-bottom: 26px;
}
.eyebrow::before { content: ""; flex: none; width: 40px; height: 1px; background: currentColor; opacity: 0.7; }
#s-juntas .eyebrow, #s-platon .eyebrow { justify-content: center; }
.label { letter-spacing: 0.14em; }
.h1 { font-weight: 300; letter-spacing: -0.045em; }
.h2 { font-weight: 300; letter-spacing: -0.036em; }
.takeaway { font-weight: 400; letter-spacing: -0.024em; }
.takeaway .grad, .closing .grad { font-weight: 500; }
.grad-warm { background: linear-gradient(90deg, #F6E4BF, #E2BF83 45%, #C9A066); -webkit-background-clip: text; background-clip: text; color: transparent; }

#s-conversacion .lyric blockquote { font-weight: 400; letter-spacing: -0.03em; }
#s-voces .vf blockquote { font-weight: 400; letter-spacing: -0.032em; }
#s-costo .hero .big { font-weight: 200; letter-spacing: -0.065em; }
#s-costo .stat .n { font-weight: 250; letter-spacing: -0.05em; }
#s-paradoja .money { font-weight: 250; letter-spacing: -0.055em; }
#s-paradoja .inv strong, #s-paradoja .gstat strong { font-weight: 300; }
#s-empleo .big { font-weight: 300; letter-spacing: -0.045em; }
#s-empleo .minor strong, #s-empleo .wf-labels strong { font-weight: 350; }
#s-claro95 .node .yr { font-weight: 300; }
#s-criterio .verb strong { font-weight: 300; letter-spacing: -0.04em; }
#s-academia .voice p { font-weight: 400; }
#s-lider .step p { font-weight: 400; }
#s-gracias .txt .h1 { font-weight: 200; letter-spacing: -0.06em; }
#s-platon .final .l1 { font-weight: 300; }
#s-olas .qs p, #s-olas .reflect p { font-weight: 400; }

/* ---------- Imágenes: una por lámina, como protagonista o composición ----------
   z-index -1 dentro del contexto de apilamiento de la lámina: queda sobre el fondo
   (marfil incluido) y bajo todo el contenido, sin tocar el layout existente. */
.art { position: absolute; z-index: -1; pointer-events: none; }
.art img { width: 100%; height: 100%; object-fit: cover; }
.art.full { inset: 0; overflow: hidden; opacity: var(--o, 1); transition: opacity 1600ms var(--ease-out); }
.art.full::after { content: ""; position: absolute; inset: 0; background: var(--shade, none); }
.slide.pre .art.full { opacity: 0; transition: none; }

/* Sujeto arriba a la derecha: se oscurece hacia abajo, donde viven los datos */
.art.photo {
  --shade:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.1) 24%, rgba(0,0,0,.76) 47%, rgba(0,0,0,.93) 70%, #000 100%),
    linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 46%);
}
.art.leftdark { --shade: linear-gradient(90deg, #000 0%, rgba(0,0,0,.88) 38%, rgba(0,0,0,.22) 72%, rgba(0,0,0,.4) 100%); }
.art.centerdim { --shade: radial-gradient(ellipse 58% 62% at 50% 50%, rgba(0,0,0,.74), rgba(0,0,0,.5) 62%, rgba(0,0,0,.72) 100%); }
.art.vignette {
  --shade:
    radial-gradient(ellipse 60% 70% at 50% 57%, rgba(0,0,0,.9) 0%, rgba(0,0,0,.68) 56%, rgba(0,0,0,.2) 100%),
    linear-gradient(180deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 74%, rgba(0,0,0,.88) 100%);
}
.art.ivoryleft { --shade: linear-gradient(90deg, var(--bg) 0%, rgba(241,236,227,.78) 38%, rgba(241,236,227,0) 66%); }

/* Objeto de cristal y oro flotando: borde disuelto en el fondo */
.art.obj {
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
  opacity: 0; transform: translate3d(0, 26px, 0) scale(0.97);
  transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out);
}
.slide.active .art.obj {
  opacity: 1; transform: none;
  transition: opacity 1400ms var(--ease-out) 250ms, transform 1800ms var(--ease-out) 250ms;
}

/* Ken Burns de una sola pasada, solo en la lámina activa (nunca en bucle).
   Al salir, el reinicio espera a que la lámina sea invisible. */
.art img { transform: scale(1.05); transform-origin: var(--kb, 72% 28%); transition: transform 0s linear 700ms; }
.slide.active .art img { transform: none; transition: transform 11000ms cubic-bezier(0.22, 0.61, 0.36, 1); }

/* ---------- Vidrio esmerilado (tarjetas sobre imágenes) ---------- */
#s-voces .vm, #s-voces .vs, #s-preparar .card, #s-lider .step, #s-brecha .chip {
  background: linear-gradient(180deg, rgba(255, 248, 236, 0.08), rgba(255, 248, 236, 0.025));
  border: 1px solid rgba(240, 222, 190, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 244, 222, 0.16), 0 40px 80px -40px rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
}
#s-lider .step.human { border-color: rgba(226, 191, 131, 0.55); box-shadow: inset 0 1px 0 rgba(255, 236, 200, 0.3), 0 0 60px -10px rgba(217, 183, 126, 0.25); }

/* ---------- Ajustes de color por lámina ---------- */
#s-historia .era.ai .obj::before { background: radial-gradient(closest-side, rgba(217, 183, 126, 0.32), rgba(169, 203, 227, 0.1) 60%, transparent); }
#s-sectores .range.r1 { background: #8C8478; }
#s-sectores .range.r2 { background: #D5CCBD; }
#s-empleo .people svg:not(.hl) { fill: var(--ink-3); }
#s-paradoja .dots i, #s-paradoja .dots i.on { background: var(--ink-2); }
#s-preguntar .bubble.blue { background: linear-gradient(180deg, #EBD4A4, #D2B06F); color: #1B1408; }
#s-preguntar .bubble.blue.tail::before { background: #D2B06F; }
#s-preguntar .bubble.gray, #s-preguntar .bubble.gray.tail::before { background: #2A2622; }
#s-preguntar .bubble.tail::after { background: var(--bg); }
#s-juntas .circle.emp { background: radial-gradient(circle at 35% 40%, rgba(226, 191, 131, 0.22), rgba(226, 191, 131, 0.06) 70%); box-shadow: inset 0 0 0 1.5px rgba(226, 191, 131, 0.6); }
#s-juntas .circle.uni { background: radial-gradient(circle at 65% 40%, rgba(169, 203, 227, 0.22), rgba(169, 203, 227, 0.06) 70%); box-shadow: inset 0 0 0 1.5px rgba(169, 203, 227, 0.6); }
.overview .thumb.current { box-shadow: 0 0 0 3px var(--gold); }

/* Marfil: olas, gracias */
#s-olas.light .shade { background: linear-gradient(90deg, rgba(241,236,227,.96) 0%, rgba(241,236,227,.8) 38%, rgba(241,236,227,.18) 62%, rgba(241,236,227,0) 78%); }
#s-olas.light .dim { background: var(--bg); }
#s-olas.light.s2 .dim { opacity: 0.84; }
#s-gracias.light .bg { opacity: 1; }
#s-gracias.light .shade { background: linear-gradient(90deg, var(--bg) 0%, rgba(241,236,227,.86) 34%, rgba(241,236,227,0) 60%); }

/* Fotos con mucha luz junto al titular: más sombra a la izquierda y abajo */
.art.photo.strong {
  --shade:
    linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.25) 22%, rgba(0,0,0,.82) 42%, rgba(0,0,0,.94) 64%, #000 100%),
    linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.8) 40%, rgba(0,0,0,.35) 60%, rgba(0,0,0,0) 76%);
}
/* La imagen es protagonista al abrir y se retira cuando empieza la conversación */
#s-conversacion.s1 .art.full { opacity: 0.34; transition: opacity 1400ms var(--ease-out); }
/* Correcciones heredadas del original */
#s-preguntar .bubble.b.in { filter: blur(0); }      /* el blur(6px) de .bubble.b nunca se quitaba */
#s-aumentado .eq { top: 320px; font-size: 36px; }   /* la ecuación se montaba sobre la lista */

@media (prefers-reduced-motion: reduce) {
  .art img, .slide.active .art img { transform: none !important; transition: none !important; }
  .art.obj, .slide.active .art.obj { transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  #s-voces .vm, #s-voces .vs, #s-preparar .card, #s-lider .step, #s-brecha .chip { background: #1E1B18; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Movimiento reducido: solo fundidos breves ---------- */
@media (prefers-reduced-motion: reduce) {
  .slide, .slide.active, .slide.before { transform: none !important; filter: none !important; transition: opacity 250ms ease, visibility 0s linear 250ms !important; }
  .slide.active { transition: opacity 250ms ease !important; }
  .b, .b.in, .e, .slide .gone, .lyric, .vf, .vm, .vs, [data-focus-list] > * { transform: none !important; filter: none !important; }
  .b, .b.in, .e, .lyric, .vf { transition: opacity 250ms ease !important; }
  .lyrics-track { transition: none !important; }
  #s-voces.s4 .vm { animation: none !important; }
  #s-olas .bg img { transition: none !important; transform: none !important; }
}