/* Presentación · Programar sin código
   Paleta: papel frío / noche, naranja neón y ultramar (complementario). */

@font-face { font-family: "Inter Tight"; src: url("../assets/fuentes/InterTight.ttf") format("truetype"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "DM Serif Display"; src: url("../assets/fuentes/DMSerifDisplay-Regular.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "DM Serif Display"; src: url("../assets/fuentes/DMSerifDisplay-Italic.ttf") format("truetype"); font-style: italic; font-display: block; }
@font-face { font-family: "DM Serif Text"; src: url("../assets/fuentes/DMSerifText-Regular.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "DM Serif Text"; src: url("../assets/fuentes/DMSerifText-Italic.ttf") format("truetype"); font-style: italic; font-display: block; }
@font-face { font-family: "Courier Prime"; src: url("../assets/fuentes/CourierPrime-Bold.ttf") format("truetype"); font-weight: 700; font-display: block; }

:root {
  --paper: #F1F1EC;
  --paper-2: #E4E4DC;
  --ink: #121314;
  --ink-2: #45474B;
  --night: #0E0F11;
  --night-2: #1A1C20;
  --night-3: #2A2D33;
  --chalk: #F4F2EC;
  --chalk-2: #B3B5B9;
  --neon: #FF6A13;
  --neon-hot: #FFB37E;
  --ultra: #2433F0;
  --ultra-soft: #DCDFFF;
  --ultra-on-dark: #9AA2FF;

  --sans: "Inter Tight", system-ui, sans-serif;
  --serif: "DM Serif Display", Georgia, serif;
  --serif-text: "DM Serif Text", Georgia, serif;
  --mono: "Courier Prime", ui-monospace, monospace;

  /* 1u = 1 % del ancho del escenario 16:9 */
  --u: min(1vw, 1.7778vh);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  scrollbar-width: none;
  background: var(--night);
}
html::-webkit-scrollbar { display: none; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--night);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--neon); color: var(--ink); }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 0.06em; }
:focus-visible { outline: 3px solid var(--neon); outline-offset: 3px; border-radius: 4px; }

/* ───────── Diapositiva y escenario ───────── */

.slide {
  position: relative;
  height: 100vh;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.slide--light { background: var(--paper); color: var(--ink); }
.slide--dark { background: var(--night); color: var(--chalk); }

.stage {
  position: relative;
  width: calc(var(--u) * 100);
  height: calc(var(--u) * 56.25);
  padding: calc(var(--u) * 4.4) calc(var(--u) * 5.2) calc(var(--u) * 6.4);
}

.tag {
  font-family: var(--sans);
  font-weight: 700;
  font-size: calc(var(--u) * 1.3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.slide--dark .tag { color: var(--neon); }
.slide--light .tag { color: var(--ultra); }

.cite {
  font-size: calc(var(--u) * 1.4);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.slide--dark .cite { color: var(--chalk-2); }
.slide--light .cite { color: var(--ink-2); }

.serif { font-family: var(--serif); font-weight: 400; }

/* Citas textuales */
.quote {
  font-family: var(--serif-text);
  font-style: italic;
  font-size: calc(var(--u) * 1.75);
  line-height: 1.32;
  margin-top: calc(var(--u) * 2.4);
  max-width: 44ch;
}
.quote + .cite, .quote ~ .cite { display: block; margin-top: calc(var(--u) * 0.8); }
.slide--dark .quote { color: var(--chalk); }

/* Bandas de resaltado: se pintan de izquierda a derecha */
.mark {
  background-image: linear-gradient(var(--neon), var(--neon));
  background-repeat: no-repeat;
  background-position: 0 55%;
  background-size: 0% 92%;
  padding: 0 0.14em;
  margin: 0 -0.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 650ms var(--ease-out) var(--md, 900ms),
              color 300ms ease var(--md, 900ms);
}
.slide.is-in .mark { background-size: 100% 92%; color: var(--ink); }
.mark--ultra { background-image: linear-gradient(var(--ultra), var(--ultra)); }
.slide.is-in .mark--ultra { color: #fff; }

/* Neón de código */
.neon {
  font-family: var(--sans);
  font-weight: 800;
  color: var(--neon);
  white-space: nowrap;
}
.neon .br { font-family: var(--mono); font-weight: 700; opacity: 0.9; }
.slide.is-in .neon {
  color: var(--neon-hot);
  text-shadow:
    0 0 0.04em #fff3e8,
    0 0 0.16em var(--neon),
    0 0 0.45em rgba(255, 106, 19, 0.75),
    0 0 1.1em rgba(255, 80, 0, 0.45);
  animation: neon-on 1100ms steps(1, end) 350ms both;
}
@keyframes neon-on {
  0%   { color: #6b3a1c; text-shadow: none; }
  12%  { color: var(--neon-hot); }
  18%  { color: #6b3a1c; text-shadow: none; }
  30%  { color: var(--neon-hot); }
  36%  { color: #7a4220; text-shadow: none; }
  52%  { color: var(--neon-hot); }
}

.chip-code {
  display: inline-block;
  background: var(--night);
  border-radius: 0.3em;
  padding: 0.02em 0.32em 0.08em;
  line-height: 1.15;
}

/* Fotos y tarjetas sobre fotos */
.photo { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--u) * 0.8); }
.float-card {
  background: #fff;
  color: var(--ink);
  border-radius: calc(var(--u) * 0.7);
  box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(14, 15, 17, 0.22);
}

/* ───────── Revelado al entrar ───────── */

.js .r {
  opacity: 0;
  transform: translateY(calc(var(--u) * 1.6));
  filter: blur(6px);
  transition:
    opacity 700ms var(--ease-out),
    transform 900ms var(--ease-out),
    filter 700ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms + 120ms);
}
.js .slide.is-in .r { opacity: 1; transform: none; filter: none; }
.js .r--late { transition-delay: calc(var(--i, 0) * 110ms + 1500ms); }

/* Trazos de diagrama que se dibujan */
.draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 700ms var(--ease-in-out); transition-delay: var(--dd, 600ms); }
.slide.is-in .draw { stroke-dashoffset: 0; }

/* Clawd: gesto corto al entrar, luego quieto */
.clawd { image-rendering: pixelated; display: block; height: auto; }
.slide.is-in .clawd--hop { animation: hop 700ms var(--ease-out) var(--hd, 700ms) both; }
@keyframes hop {
  0%   { transform: translateY(40%) scale(0.92); opacity: 0; }
  55%  { transform: translateY(-10%) scale(1); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.js .clawd--hop { opacity: 0; }
.js .slide.is-in .clawd--hop { opacity: 1; }

/* ───────── 1 · Portada ───────── */

.s1 .stage { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: calc(var(--u) * 3); align-items: center; }
.s1 .logo-wrap { position: absolute; top: calc(var(--u) * 4); left: calc(var(--u) * 5.2); }
.s1 .logo { display: block; height: calc(var(--u) * 5.2); width: auto; filter: brightness(0) invert(1); opacity: 0.94; }
.s1 h1 { line-height: 0.95; letter-spacing: -0.015em; margin-top: calc(var(--u) * 4); font-weight: 400; }
.s1 h1 .l1 { display: block; font-family: var(--serif); font-size: calc(var(--u) * 9.4); }
.s1 h1 .l2 { display: block; font-size: calc(var(--u) * 9.4); }
.s1 h1 .l2 .serif { margin-right: 0.2em; }
.s1 h1 .neon { font-size: 0.86em; letter-spacing: -0.03em; }
.s1 .sub { margin-top: calc(var(--u) * 2.6); font-size: calc(var(--u) * 2.35); font-weight: 500; line-height: 1.25; max-width: 30ch; color: var(--chalk); }
.s1 .sub em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.12em; color: #fff; }
.s1 .name { margin-top: calc(var(--u) * 3.2); font-size: calc(var(--u) * 1.9); font-weight: 700; letter-spacing: 0.01em; display: flex; align-items: center; gap: 0.6em; }
.s1 .name::before { content: ""; width: 2.2em; height: 2px; background: var(--neon); }

.prompt {
  position: relative;
  background: var(--night-2);
  border: 1px solid var(--night-3);
  border-radius: calc(var(--u) * 0.7);
  padding: calc(var(--u) * 1.8) calc(var(--u) * 2);
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.45);
  line-height: 1.5;
  color: var(--chalk);
  box-shadow: 0 calc(var(--u) * 1.4) calc(var(--u) * 4) rgba(0, 0, 0, 0.45);
}
.prompt .bar { display: flex; justify-content: space-between; font-family: var(--sans); font-size: calc(var(--u) * 1.1); color: var(--chalk-2); margin-bottom: calc(var(--u) * 1.2); letter-spacing: 0.04em; }
.prompt .tools { display: flex; gap: 0.7em; align-items: center; }
.prompt .tools img { height: 1.35em; width: auto; }
.prompt .tools .gpt { filter: invert(1); }
.prompt .say { color: var(--neon); }
.prompt .out { margin-top: calc(var(--u) * 1.2); padding-top: calc(var(--u) * 1.2); border-top: 1px dashed var(--night-3); color: var(--chalk-2); font-size: 0.86em; }
.prompt .out b { color: var(--chalk); font-weight: 700; }
.caret { display: inline-block; width: 0.55em; height: 1.05em; vertical-align: -0.15em; background: var(--neon); margin-left: 0.1em; }
.slide.is-in .caret { animation: caret 1s steps(1) 4 forwards; }
@keyframes caret { 50% { opacity: 0; } }

/* ───────── 2 · Tema, pregunta, postura ───────── */

.s2 { background: linear-gradient(90deg, var(--paper) 0 47%, var(--ultra) 47% 100%); }
.s2 .stage { display: grid; grid-template-columns: 0.47fr 0.53fr; padding: 0; }
.s2 .left { padding: calc(var(--u) * 3.6) calc(var(--u) * 3.6) calc(var(--u) * 6.4) calc(var(--u) * 5.2); display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 2.6); }
.s2 .tema p { font-size: calc(var(--u) * 2.1); font-weight: 500; line-height: 1.32; margin-top: calc(var(--u) * 0.9); }
.s2 .preg { border: 2px solid var(--ultra); padding: calc(var(--u) * 1.8) calc(var(--u) * 2.1); border-radius: 4px; }
.s2 .preg p { font-family: var(--serif-text); font-size: calc(var(--u) * 2.15); line-height: 1.3; margin-top: calc(var(--u) * 0.8); }
.s2 .right { color: #fff; padding: calc(var(--u) * 5) calc(var(--u) * 5.2) calc(var(--u) * 6.4) calc(var(--u) * 4.4); display: flex; flex-direction: column; justify-content: center; }
.s2 .right h2 { font-family: var(--serif); font-weight: 400; font-size: calc(var(--u) * 5.6); line-height: 1; }
.s2 .right p { margin-top: calc(var(--u) * 2.4); font-size: calc(var(--u) * 3.3); font-weight: 700; line-height: 1.26; letter-spacing: -0.012em; }

/* ───────── 3 · Contextualización ───────── */

.s3 .stage { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: calc(var(--u) * 4.4); align-items: center; }
.s3 h2 { font-family: var(--serif); font-weight: 400; font-size: calc(var(--u) * 4.2); line-height: 1.08; }
.s3 .def { margin-top: calc(var(--u) * 2.8); font-size: calc(var(--u) * 2.05); line-height: 1.4; font-weight: 500; max-width: 40ch; }
.s3 .def .neon { font-size: 1.05em; }
.s3 .tools { display: flex; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 2.8); align-items: center; }
.s3 .tools span { display: flex; align-items: center; gap: 0.5em; font-weight: 700; font-size: calc(var(--u) * 2.1); }
.s3 .tools img { height: 1.5em; width: auto; }
.s3 figure { position: relative; height: calc(var(--u) * 38); margin-top: calc(var(--u) * -4); }
.s3 .flow {
  position: absolute;
  left: calc(var(--u) * -3);
  right: calc(var(--u) * 2);
  bottom: calc(var(--u) * -4);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #fff;
  border-radius: calc(var(--u) * 0.7);
  box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(14, 15, 17, 0.2);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 1.2);
}
.s3 .flow li { display: flex; flex-direction: column; gap: calc(var(--u) * 0.7); padding: 0 calc(var(--u) * 1.2); font-size: calc(var(--u) * 1.4); font-weight: 700; line-height: 1.2; position: relative; }
.s3 .flow li + li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--paper-2); }
.s3 .flow svg { width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); padding: calc(var(--u) * 0.6); border-radius: 50%; background: var(--ultra-soft); color: var(--ultra); }
.s3 .flow li:last-child svg { background: var(--ultra); color: #fff; }

/* ───────── 4 · Esquema (versus) ───────── */

.s4 .stage { display: flex; align-items: center; }
.s4 .versus {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr calc(var(--u) * 11) 1fr;
  row-gap: calc(var(--u) * 1.6);
  align-items: center;
}
.s4 h3 { font-size: calc(var(--u) * 1.5); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.s4 .h-obj { color: var(--neon); }
.s4 .h-res { color: var(--ultra-on-dark); }
.s4 .root { font-family: var(--serif); font-size: calc(var(--u) * 3.1); line-height: 1.1; align-self: start; margin-bottom: calc(var(--u) * 1.4); }
.s4 .vs { display: grid; place-items: center; align-self: center; }
.s4 .vs .neon { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: calc(var(--u) * 6); line-height: 1; }
.s4 .b { align-self: stretch; display: flex; align-items: center; gap: calc(var(--u) * 1.2); font-size: calc(var(--u) * 2.3); font-weight: 700; line-height: 1.15; padding: calc(var(--u) * 1.3) calc(var(--u) * 1.6); border-radius: 6px; min-height: calc(var(--u) * 6.4); }
.s4 .b i { font-style: normal; font-family: var(--mono); font-size: 0.72em; width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center; flex: none; }
.s4 .b.obj { border: 2px solid var(--neon); color: var(--chalk); }
.s4 .b.obj i { background: var(--neon); color: var(--ink); }
.s4 .b.res { background: var(--ultra); color: #fff; }
.s4 .b.res i { background: #fff; color: var(--ultra); }
.s4 .link { position: relative; height: 2px; margin: 0 calc(var(--u) * 1); }
.s4 .link b { position: absolute; inset: 0; background: linear-gradient(90deg, var(--neon), var(--ultra-on-dark)); transform-origin: left; transform: scaleX(0); transition: transform 600ms var(--ease-out) 1300ms; }
.s4 .link::after { content: ""; position: absolute; right: -2px; top: 50%; width: 0; height: 0; border-left: 10px solid var(--ultra-on-dark); border-top: 6px solid transparent; border-bottom: 6px solid transparent; transform: translateY(-50%); }
.slide.is-in.s4 .link b { transform: scaleX(1); }

/* ───────── 5–7 · Contraargumentación ───────── */

.contra .stage { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: calc(var(--u) * 4.5); align-items: center; }
.contra .claim { font-size: calc(var(--u) * 4.1); font-weight: 750; line-height: 1.12; letter-spacing: -0.02em; margin-top: calc(var(--u) * 2); }
.contra .num, .resp .num { display: flex; gap: calc(var(--u) * 0.6); margin-top: calc(var(--u) * 1.2); }
.contra .num i, .resp .num i { width: calc(var(--u) * 2.4); height: 4px; border-radius: 2px; }
.contra .num i { background: var(--night-3); }
.contra .num i.on { background: var(--neon); }

/* editor */
.editor { background: var(--night-2); border: 1px solid var(--night-3); border-radius: calc(var(--u) * 0.7); overflow: hidden; font-family: var(--mono); font-size: calc(var(--u) * 1.4); }
.editor .tab { font-family: var(--sans); font-size: calc(var(--u) * 1.1); color: var(--chalk-2); padding: calc(var(--u) * 0.9) calc(var(--u) * 1.6); border-bottom: 1px solid var(--night-3); display: flex; justify-content: space-between; letter-spacing: 0.03em; }
.editor ol { list-style: none; padding: calc(var(--u) * 1.2) 0; counter-reset: ln; }
.editor li { counter-increment: ln; padding: 0.12em calc(var(--u) * 1.6) 0.12em 0; white-space: pre; color: var(--chalk); position: relative; }
.editor li::before { content: counter(ln); display: inline-block; width: 3.2em; text-align: right; padding-right: 1.2em; color: #5b5f66; }
.editor .k { color: var(--ultra-on-dark); }
.editor li.bad { background: rgba(255, 106, 19, 0.12); }
.editor li.bad .squig { text-decoration: underline wavy var(--neon); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.editor li.bad::after { content: attr(data-flag); position: absolute; right: calc(var(--u) * 1.4); font-family: var(--sans); font-size: calc(var(--u) * 1); font-weight: 700; color: var(--ink); background: var(--neon); padding: 0.15em 0.55em; border-radius: 3px; top: 50%; transform: translateY(-50%); letter-spacing: 0.04em; text-transform: uppercase; }
.persist { margin-top: calc(var(--u) * 2.2); }
.persist .track { height: calc(var(--u) * 1.2); background: var(--night-3); border-radius: 3px; overflow: hidden; position: relative; }
.persist .fill { position: absolute; inset: 0 auto 0 0; width: 22.7%; background: var(--neon); transform-origin: left; transform: scaleX(0); transition: transform 1100ms var(--ease-out) 1300ms; }
.slide.is-in .persist .fill { transform: scaleX(1); }
.persist .big { display: block; margin-top: calc(var(--u) * 1.6); font-family: var(--serif); font-weight: 400; font-size: calc(var(--u) * 5); line-height: 1; color: var(--neon); }
.persist .quote { margin-top: calc(var(--u) * 1); font-size: calc(var(--u) * 1.65); max-width: none; }

/* ilusión de competencia */
.quote-inline { margin-top: calc(var(--u) * 2.6); font-size: calc(var(--u) * 1.9); line-height: 1.35; color: var(--chalk); }
.quote-inline .q { font-family: var(--serif-text); font-style: italic; font-size: 1.25em; color: var(--neon-hot); }
.quote-inline .cite { font-size: calc(var(--u) * 1.4); }
.illusion { position: relative; height: calc(var(--u) * 40); }
.illusion .photo { filter: saturate(0.85); }
.illusion .card { position: absolute; border-radius: calc(var(--u) * 0.7); box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0, 0, 0, 0.45); }
.illusion .ok { left: calc(var(--u) * -3); top: calc(var(--u) * 3); background: #fff; color: var(--ink); display: flex; align-items: center; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 1.3) calc(var(--u) * 1.8) calc(var(--u) * 1.3) calc(var(--u) * 1.3); }
.illusion .ok svg { width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); padding: calc(var(--u) * 0.6); border-radius: 50%; background: var(--ink); color: #fff; }
.illusion .ok b { display: block; font-size: calc(var(--u) * 2); }
.illusion .ok span { font-size: calc(var(--u) * 1.25); color: var(--ink-2); font-weight: 600; }
.illusion .ask { right: calc(var(--u) * -2); bottom: calc(var(--u) * -2.4); background: var(--neon); color: var(--ink); padding: calc(var(--u) * 1.4) calc(var(--u) * 1.8); max-width: calc(var(--u) * 26); }
.illusion .ask .who { font-size: calc(var(--u) * 1.15); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.illusion .ask b { display: block; font-size: calc(var(--u) * 2.1); line-height: 1.15; margin-top: 0.25em; }
.illusion .ask .dots { display: block; font-family: var(--serif); font-size: calc(var(--u) * 3.4); line-height: 0.6; margin-top: 0.25em; }
.illusion .clawd { position: absolute; width: calc(var(--u) * 7); left: calc(var(--u) * 2); bottom: calc(var(--u) * 1.2); }

/* ciclo */
.cycle { position: relative; }
.cycle svg { width: 100%; height: auto; display: block; overflow: visible; max-height: calc(var(--u) * 44); }
.cycle .node rect { fill: var(--night-2); stroke: var(--chalk-2); stroke-width: 1.5; }
.cycle .node.focal rect { fill: var(--neon); stroke: var(--neon); }
.cycle .node text { font-family: var(--sans); font-weight: 700; font-size: 26px; fill: var(--chalk); }
.cycle .node.focal text { fill: var(--ink); }
.cycle .ring { fill: none; stroke: var(--neon); stroke-width: 3; }
.cycle .center { font-family: var(--serif-text); font-style: italic; font-size: 28px; fill: var(--chalk-2); }
.s7 .cycle .clawd { position: absolute; width: calc(var(--u) * 10); right: calc(var(--u) * -2.5); bottom: calc(var(--u) * -1); }

/* ───────── 8–10 · Mi respuesta ───────── */

.resp .stage { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: calc(var(--u) * 5); align-items: center; }
.resp h2 { font-family: var(--serif); font-weight: 400; font-size: calc(var(--u) * 4.2); line-height: 1.04; margin-top: calc(var(--u) * 1.6); }
.resp .claim { font-size: calc(var(--u) * 2.2); font-weight: 600; line-height: 1.32; margin-top: calc(var(--u) * 2); }
.resp .claim + .cite { display: block; margin-top: calc(var(--u) * 1.4); }
.resp .quote { font-size: calc(var(--u) * 1.6); margin-top: calc(var(--u) * 2); }
.resp .num i { background: var(--paper-2); }
.resp .num i.on { background: var(--ultra); }

.scene { position: relative; height: calc(var(--u) * 42); }
.scene .ex-tag { position: absolute; top: calc(var(--u) * 1.6); left: calc(var(--u) * 1.6); background: var(--ultra); color: #fff; font-weight: 800; font-size: calc(var(--u) * 1.2); letter-spacing: 0.06em; text-transform: uppercase; padding: 0.45em 0.9em; border-radius: 999px; }

.review { position: absolute; left: calc(var(--u) * -4); bottom: calc(var(--u) * -2.4); width: calc(var(--u) * 33); padding: calc(var(--u) * 1.8) calc(var(--u) * 2); background: #fff; border-radius: calc(var(--u) * 0.7); box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(14, 15, 17, 0.22); }
.review .title { font-size: calc(var(--u) * 1.7); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.review ul { list-style: none; margin-top: calc(var(--u) * 1.2); display: grid; gap: calc(var(--u) * 0.8); }
.review li { display: flex; align-items: center; gap: calc(var(--u) * 1); font-size: calc(var(--u) * 1.5); font-weight: 600; }
.review li svg { flex: none; width: calc(var(--u) * 2.3); height: calc(var(--u) * 2.3); padding: calc(var(--u) * 0.45); border-radius: 50%; }
.review .ok svg { background: var(--ink); color: #fff; }
.review .no svg { background: var(--neon); color: var(--ink); }
.review .foot { margin-top: calc(var(--u) * 1.3); padding-top: calc(var(--u) * 1.1); border-top: 1px solid var(--paper-2); font-size: calc(var(--u) * 1.45); font-weight: 700; color: var(--ultra); }
.s8 .scene .clawd { position: absolute; width: calc(var(--u) * 7.5); right: calc(var(--u) * 1.6); bottom: calc(var(--u) * 1.4); }

.evidence { position: absolute; left: calc(var(--u) * -4); right: calc(var(--u) * 3); bottom: calc(var(--u) * -2.4); padding: calc(var(--u) * 1.8) calc(var(--u) * 2.2); background: #fff; border-radius: calc(var(--u) * 0.7); box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(14, 15, 17, 0.22); }
.evidence .lead { font-weight: 800; font-size: calc(var(--u) * 1.6); color: var(--ultra); }
.evidence .quote { margin-top: calc(var(--u) * 0.6); font-size: calc(var(--u) * 1.75); max-width: none; }
.train { margin-top: calc(var(--u) * 1.4); padding-top: calc(var(--u) * 1.2); border-top: 1px solid var(--paper-2); display: flex; align-items: center; gap: calc(var(--u) * 0.9); flex-wrap: wrap; font-size: calc(var(--u) * 1.45); font-weight: 700; }
.train .pill { background: var(--ink); color: var(--chalk); padding: 0.3em 0.85em; border-radius: 999px; }

.caption-card { position: absolute; left: calc(var(--u) * -4); right: calc(var(--u) * 3); bottom: calc(var(--u) * -2.4); padding: calc(var(--u) * 1.8) calc(var(--u) * 2.2); background: #fff; border-radius: calc(var(--u) * 0.7); box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(14, 15, 17, 0.22); }
.caption-card p { font-size: calc(var(--u) * 1.9); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.decide { margin-top: calc(var(--u) * 1.3); display: flex; flex-wrap: wrap; gap: calc(var(--u) * 0.8); align-items: center; font-size: calc(var(--u) * 1.4); }
.decide span { font-weight: 800; color: var(--ultra); margin-right: 0.3em; }
.decide b { background: var(--ultra); color: #fff; padding: 0.35em 0.85em; border-radius: 999px; font-weight: 700; }

/* Cortina: el giro de la objeción a mi respuesta */
.turn {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--ultra);
  color: #fff;
  display: grid;
  place-content: center;
  text-align: center;
  gap: calc(var(--u) * 2);
  padding: 0 calc(var(--u) * 8);
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
}
.turn-tag { font-weight: 800; font-size: calc(var(--u) * 1.8); letter-spacing: 0.14em; text-transform: uppercase; color: var(--neon-hot); }
.turn-big { font-family: var(--serif); font-size: calc(var(--u) * 7.4); line-height: 1; }
.turn-big em { font-style: italic; display: block; }
.s8.wipe .turn { visibility: visible; animation: turn 2600ms var(--ease-in-out) both; }
@keyframes turn {
  0%   { clip-path: inset(0 0 0 0); }
  70%  { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 100% 0); }
}
.s8.wipe .turn-big, .s8.wipe .turn-tag { animation: turn-text 2600ms var(--ease-out) both; }
@keyframes turn-text {
  0%   { opacity: 0; transform: scale(0.94); }
  15%  { opacity: 1; transform: none; }
  100% { opacity: 1; transform: none; }
}
.js .s8.wipe .r { transition-delay: calc(var(--i, 0) * 110ms + 1900ms); }
.js .s8.wipe .r--late { transition-delay: calc(var(--i, 0) * 110ms + 3200ms); }
.s8.wipe .mark { transition-delay: 3000ms; }

/* ───────── 11 · Cierre ───────── */

.s11 .bg { position: absolute; inset: 0 0 0 50%; background: url("../assets/fotos/pucp-aula.jpg") center / cover no-repeat; }
.s11 .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--night) 0%, rgba(14, 15, 17, 0.78) 30%, rgba(14, 15, 17, 0.35) 100%); }
.s11 .stage { display: grid; grid-template-columns: 0.66fr 0.34fr; align-items: center; z-index: 1; }
.s11 blockquote { font-family: var(--serif); font-size: calc(var(--u) * 3.6); line-height: 1.14; color: #fff; }
.s11 blockquote .q { color: var(--neon); }
.s11 .cite { display: block; margin-top: calc(var(--u) * 2.4); color: var(--chalk); opacity: 0.86; }
.s11 .bye { margin-top: calc(var(--u) * 3.6); display: flex; align-items: center; gap: calc(var(--u) * 1.4); }
.s11 .bye span { font-family: var(--serif); font-style: italic; font-size: calc(var(--u) * 3); }
.s11 .clawd { width: calc(var(--u) * 5.4); }

/* ───────── 12 · Bibliografía ───────── */

.s12 h2 { font-family: var(--serif); font-weight: 400; font-size: calc(var(--u) * 4.4); line-height: 1; }
.s12 .refs { margin-top: calc(var(--u) * 3.2); max-width: calc(var(--u) * 80); }
.s12 .refs p { font-size: calc(var(--u) * 1.8); line-height: 1.4; padding-left: 2em; text-indent: -2em; margin-bottom: calc(var(--u) * 2.2); }
.s12 .refs a { color: var(--ultra); overflow-wrap: anywhere; }

/* ───────── Navegación ───────── */

.nav {
  position: fixed;
  left: 50%;
  bottom: calc(var(--u) * 1.6);
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  font-size: clamp(13px, calc(var(--u) * 1.05), 20px);
  transition: opacity 400ms ease, background-color 300ms ease, color 300ms ease;
}
[data-theme="dark"] .nav { background: rgba(26, 28, 32, 0.92); color: var(--chalk); border: 1px solid var(--night-3); }
[data-theme="light"] .nav { background: rgba(255, 255, 255, 0.94); color: var(--ink); border: 1px solid #D6D6CE; }
.nav.idle { opacity: 0.28; }
.nav button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 160ms ease, transform 140ms var(--ease-out);
}
.nav button svg { width: 1.25em; height: 1.25em; }
.nav button:active { transform: scale(0.94); }
.nav button:disabled { opacity: 0.3; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  [data-theme="dark"] .nav button:not(:disabled):hover { background: var(--night-3); }
  [data-theme="light"] .nav button:not(:disabled):hover { background: var(--paper-2); }
}
.nav .count { display: flex; align-items: baseline; gap: 0.6em; padding: 0 0.7em; white-space: nowrap; min-width: 17em; justify-content: center; }
.nav .count b { font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: 0.02em; }
.nav .count span { opacity: 0.72; font-weight: 500; }
.nav .sep { width: 1px; height: 1.6em; background: currentColor; opacity: 0.18; margin: 0 2px; }
.nav .prog { position: absolute; left: 1.6em; right: 1.6em; bottom: 3px; height: 2px; border-radius: 1px; overflow: hidden; }
.nav .prog i { display: block; height: 100%; background: var(--neon); transform-origin: left; transition: transform 500ms var(--ease-out); }

/* ───────── Pantallas verticales (móvil) ───────── */



/* ───────── Movimiento reducido ───────── */

@media (prefers-reduced-motion: reduce) {
  .js .r { transform: none; filter: none; transition: opacity 300ms ease; transition-delay: 0ms; }
  .js .s8.wipe .r, .js .s8.wipe .r--late { transition-delay: 0ms; }
  .s8.wipe .turn { animation: none; visibility: hidden; }
  .slide.is-in .neon { animation: none; }
  .slide.is-in .clawd--hop { animation: none; }
  .slide.is-in .caret { animation: none; }
  .draw, .persist .fill, .s4 .link b, .mark { transition-duration: 1ms; transition-delay: 0ms; }
}

/* ───────── Impresión: 12 páginas completas ───────── */

@media print {
  @page { size: 13.333in 7.5in; margin: 0; }
  :root { --u: 0.13333in; }
  html, body { background: #fff; }
  html { scroll-snap-type: none; overflow: visible; }
  .slide { height: 7.5in; break-after: page; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .nav, .turn { display: none; }
  .js .r, .js .clawd--hop { opacity: 1; transform: none; filter: none; }
  .mark { background-size: 100% 92%; color: var(--ink); }
  .mark--ultra { color: #fff; }
  .draw { stroke-dashoffset: 0; }
  .persist .fill, .s4 .link b { transform: none; }
  .neon { color: var(--neon-hot); text-shadow: 0 0 0.16em var(--neon), 0 0 0.45em rgba(255, 106, 19, 0.75); }
}

/* ───────── Ronda 3 ───────── */

/* Razón visible arriba de cada respaldo (5–10) */
.contra .stage, .resp .stage { grid-template-rows: auto 1fr; row-gap: calc(var(--u) * 2.2); padding-top: calc(var(--u) * 3.6); }
.razon { grid-column: 1 / -1; display: flex; align-items: baseline; gap: calc(var(--u) * 1.6); padding-bottom: calc(var(--u) * 1.4); border-bottom: 1px solid; }
.slide--dark .razon { border-color: var(--night-3); }
.slide--light .razon { border-color: #D6D6CE; }
.razon p { font-family: var(--serif); font-size: calc(var(--u) * 2.7); line-height: 1.1; }
.razon .tag { flex: none; }
.contra .claim { margin-top: calc(var(--u) * 1.4); font-size: calc(var(--u) * 3.7); }
.contra .quote { font-size: calc(var(--u) * 1.6); margin-top: calc(var(--u) * 1.8); }
.resp h2 { font-size: calc(var(--u) * 3.4); margin-top: calc(var(--u) * 1.2); }
.resp .claim { margin-top: calc(var(--u) * 1.4); }
.resp .quote { margin-top: calc(var(--u) * 1.6); }
.scene { height: calc(var(--u) * 34); }
.illusion { height: calc(var(--u) * 33); }
.cycle svg { max-height: calc(var(--u) * 35); }

/* 5 · dato */
.stat { margin-top: calc(var(--u) * 1.4); display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * 1.6); align-items: center; }
.stat .big { margin: 0; }
.stat span { font-size: calc(var(--u) * 1.6); line-height: 1.3; color: var(--chalk); font-weight: 600; }

/* 8 · caso real */
.review { width: calc(var(--u) * 36); }
.review .sub { margin-top: calc(var(--u) * 0.4); font-size: calc(var(--u) * 1.2); font-weight: 600; color: var(--ink-2); }
.review .stats { list-style: none; margin-top: calc(var(--u) * 1.2); display: grid; gap: calc(var(--u) * 0.9); }
.review .stats li { display: grid; grid-template-columns: calc(var(--u) * 9.5) 1fr; gap: calc(var(--u) * 1.2); align-items: center; font-size: calc(var(--u) * 1.4); font-weight: 600; line-height: 1.25; }
.review .stats b { font-family: var(--serif); font-weight: 400; font-size: calc(var(--u) * 3.4); line-height: 1; color: var(--ultra); }
.review .foot { font-family: var(--serif-text); font-style: italic; font-weight: 400; color: var(--ink); font-size: calc(var(--u) * 1.45); line-height: 1.3; }
.review .foot .cite { font-family: var(--sans); font-style: normal; font-size: calc(var(--u) * 1.15); }

/* 10 · caso real */
.caption-card p { font-size: calc(var(--u) * 1.55); line-height: 1.3; }
.caption-card .quote { font-size: calc(var(--u) * 1.5); margin-top: calc(var(--u) * 1); max-width: none; }
.caption-card .cite { font-size: calc(var(--u) * 1.15); }

/* 4 · versus simétrico: el lado izquierdo se alinea hacia el centro */
.s4 .h-obj, .s4 .root.obj { text-align: right; }
.s4 .b.obj { flex-direction: row-reverse; text-align: right; }

/* Cortina más larga */
.s8.wipe .turn { animation-duration: 4200ms; }
.s8.wipe .turn-big, .s8.wipe .turn-tag { animation-duration: 4200ms; }
@keyframes turn {
  0%   { clip-path: inset(0 0 0 0); }
  80%  { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 100% 0); }
}
.js .s8.wipe .r { transition-delay: calc(var(--i, 0) * 110ms + 3300ms); }
.js .s8.wipe .r--late { transition-delay: calc(var(--i, 0) * 110ms + 4600ms); }
.s8.wipe .mark { transition-delay: 4400ms; }

/* 12 · bibliografía completa */
.s12 .stage { padding-top: calc(var(--u) * 3.4); }
.s12 h2 { font-size: calc(var(--u) * 3.2); }
.s12 .refs { margin-top: calc(var(--u) * 1.8); max-width: none; columns: 3; column-gap: calc(var(--u) * 2.8); }
.s12 .refs p { break-inside: avoid; font-size: calc(var(--u) * 1.02); line-height: 1.3; margin-bottom: calc(var(--u) * 0.9); }


.s12 .stage { padding-top: calc(var(--u) * 2.8); padding-bottom: calc(var(--u) * 5.4); }
.s12 .refs { margin-top: calc(var(--u) * 1.4); }
.s12 .refs p { font-size: calc(var(--u) * 0.92); line-height: 1.24; margin-bottom: calc(var(--u) * 0.7); }

/* ───────── Ronda 4 ───────── */

/* 1 · Clawd grande abajo a la derecha */
.s1-clawd { position: absolute; width: calc(var(--u) * 13); right: calc(var(--u) * 6); bottom: calc(var(--u) * 3.6); }

/* 2 · tema y pregunta con más presencia */
.s2 .tema { background: #fff; border-radius: calc(var(--u) * 0.7); padding: calc(var(--u) * 2) calc(var(--u) * 2.2); box-shadow: 0 calc(var(--u) * 0.6) calc(var(--u) * 2.2) rgba(14, 15, 17, 0.08); }
.s2 .tema b { color: var(--ultra); font-weight: 700; }
.s2 .preg { position: relative; overflow: hidden; border: 0; background: var(--ultra-soft); border-radius: calc(var(--u) * 0.7); padding: calc(var(--u) * 2) calc(var(--u) * 7) calc(var(--u) * 2) calc(var(--u) * 2.2); }
.s2 .preg p { position: relative; z-index: 1; }
.s2 .preg u { text-decoration: underline; text-decoration-color: var(--neon); text-decoration-thickness: 0.12em; text-underline-offset: 0.16em; }
.s2 .qmark { position: absolute; right: calc(var(--u) * 0.6); bottom: calc(var(--u) * -3); font-family: var(--serif); font-size: calc(var(--u) * 15); line-height: 1; color: var(--ultra); opacity: 0.9; }
.s2 .tag { display: inline-block; }

/* 5–10 · razón: grande solo en 5 y 8; pequeña en las demás */
.razon { border-bottom: 0; padding-bottom: 0; align-items: center; }
.razon p { font-size: calc(var(--u) * 1.45); font-family: var(--sans); font-weight: 600; line-height: 1.3; opacity: 0.75; }
.razon--big { flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 0.8); padding-bottom: calc(var(--u) * 1.6); border-bottom: 1px solid; }
.razon--big p { font-family: var(--serif); font-weight: 400; font-size: calc(var(--u) * 2.9); line-height: 1.1; opacity: 1; }
.resp .razon--big p { font-size: calc(var(--u) * 2.3); max-width: 70ch; }

/* tarjetas de caso: etiqueta dentro, sin tapar la foto */
.review .ex-tag, .caption-card .ex-tag, .evidence .ex-tag { position: static; display: inline-block; margin-bottom: calc(var(--u) * 0.9); font-size: calc(var(--u) * 1.05); }
.review .title { font-size: calc(var(--u) * 1.6); }
.review .stats li { grid-template-columns: calc(var(--u) * 6) 1fr; }

/* 9 · cómo enseñarlo */
.teach .title { font-size: calc(var(--u) * 2); font-weight: 800; letter-spacing: -0.01em; }
.teach ul { list-style: none; margin-top: calc(var(--u) * 1.1); display: grid; gap: calc(var(--u) * 0.9); }
.teach li { display: grid; grid-template-columns: calc(var(--u) * 11) 1fr; gap: calc(var(--u) * 1.2); align-items: baseline; font-size: calc(var(--u) * 1.4); line-height: 1.3; padding-top: calc(var(--u) * 0.9); border-top: 1px solid var(--paper-2); }
.teach li b { font-family: var(--serif); font-weight: 400; font-size: 1.45em; color: var(--ultra); }

/* Cortina 1,5 s más larga */
.s8.wipe .turn, .s8.wipe .turn-big, .s8.wipe .turn-tag { animation-duration: 5700ms; }
@keyframes turn {
  0%   { clip-path: inset(0 0 0 0); }
  85%  { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 100% 0); }
}
.js .s8.wipe .r { transition-delay: calc(var(--i, 0) * 110ms + 5600ms); }
.js .s8.wipe .r--late { transition-delay: calc(var(--i, 0) * 110ms + 6800ms); }
.s8.wipe .mark { transition-delay: 6600ms; }



.s2 .left { gap: calc(var(--u) * 2); padding-top: calc(var(--u) * 3); padding-bottom: calc(var(--u) * 6.6); }
.s2 .tema p { font-size: calc(var(--u) * 1.95); }
.s2 .preg p { font-size: calc(var(--u) * 2); }
.s2 .tema, .s2 .preg { padding-top: calc(var(--u) * 1.7); padding-bottom: calc(var(--u) * 1.7); }
.s8 .review { bottom: calc(var(--u) * 0.6); }
.s8 .scene { height: calc(var(--u) * 32); }
.resp .razon--big p { font-size: calc(var(--u) * 2.1); }

/* ───────── Ronda 5 ───────── */

/* Logo PUCP con sus colores sobre placa blanca (el filtro borraba el escudo) */
.s1 .logo { filter: none; opacity: 1; height: calc(var(--u) * 4.6); }
.s1 .logo-wrap { background: #fff; border-radius: calc(var(--u) * 0.6); padding: calc(var(--u) * 0.8) calc(var(--u) * 1.2); }

/* 8 · franja del mercado */
.s8 .stage { grid-template-rows: auto auto 1fr; row-gap: calc(var(--u) * 1.6); }
.market { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * 2.4); align-items: center; background: var(--ultra); color: #fff; border-radius: calc(var(--u) * 0.6); padding: calc(var(--u) * 1.2) calc(var(--u) * 2); }
.market .m-claim { font-weight: 800; font-size: calc(var(--u) * 1.75); line-height: 1.15; max-width: 14ch; }
.market .m-quote { font-family: var(--serif-text); font-style: italic; font-size: calc(var(--u) * 1.4); line-height: 1.3; }
.market .cite { font-family: var(--sans); font-style: normal; font-size: calc(var(--u) * 1.1); color: var(--ultra-soft); }
.s8 .razon--big { padding-bottom: calc(var(--u) * 1.2); }
.s8 .scene { height: calc(var(--u) * 26); }
.s8 .claim { font-size: calc(var(--u) * 2); }
.s8 .quote { font-size: calc(var(--u) * 1.45); }

/* 8 · resultados del caso */
.review .results { list-style: none; margin-top: calc(var(--u) * 1); display: grid; gap: calc(var(--u) * 0.8); }
.review .results li { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * 1); align-items: start; font-size: calc(var(--u) * 1.35); font-weight: 600; line-height: 1.3; }
.review .results svg { width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); padding: calc(var(--u) * 0.42); border-radius: 50%; }
.review .results .ok svg { background: var(--ultra); color: #fff; }
.review .results .no svg { background: var(--neon); color: var(--ink); }
.s8 .review { width: calc(var(--u) * 38); bottom: calc(var(--u) * -1); }

/* 8–10 · movimiento más visible: la foto se descubre y la tarjeta entra desde la derecha */
.js .scene .photo { clip-path: inset(0 100% 0 0); transition: clip-path 1000ms var(--ease-in-out) 350ms; }
.js .slide.is-in .scene .photo { clip-path: inset(0 0 0 0); }
.js .scene .review.r, .js .scene .evidence.r, .js .scene .caption-card.r { transform: translateX(calc(var(--u) * 4)); }
.js .slide.is-in .scene .review.r, .js .slide.is-in .scene .evidence.r, .js .slide.is-in .scene .caption-card.r { transform: none; }
.js .s8.wipe .scene .photo { transition-delay: 5700ms; }
@media (prefers-reduced-motion: reduce) {
  .js .scene .photo { clip-path: none; transition: none; }
}
@media print { .js .scene .photo { clip-path: none; } }

/* Logo PUCP blanco real, más grande y sin placa */
.s1 .logo-wrap { background: none; padding: 0; border-radius: 0; top: calc(var(--u) * 3.6); }
.s1 .logo { height: calc(var(--u) * 7); filter: none; opacity: 1; }
.s1 h1 { margin-top: calc(var(--u) * 6); }
.review .results b { font-family: var(--serif); font-weight: 400; font-size: 1.5em; color: var(--ultra); margin-right: 0.15em; }
.review .results .no b { color: var(--ink); }
.s8 .review { padding: calc(var(--u) * 1.3) calc(var(--u) * 1.6); width: calc(var(--u) * 37); bottom: calc(var(--u) * 0.4); }
.s8 .review .title { font-size: calc(var(--u) * 1.4); }
.s8 .review .results li { font-size: calc(var(--u) * 1.22); }
.s8 .review .foot { font-size: calc(var(--u) * 1.2); margin-top: calc(var(--u) * 0.9); padding-top: calc(var(--u) * 0.8); }
.s8 .review .ex-tag { margin-bottom: calc(var(--u) * 0.6); }
.s8 .scene { height: calc(var(--u) * 25); }

/* ───────── Ronda 7 ───────── */

/* Etiqueta de rama: el mismo lenguaje del esquema (diapositiva 4) */
.branch { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 0.6) calc(var(--u) * 1.2); }
.branch .lbl { font-weight: 700; font-size: calc(var(--u) * 1.2); letter-spacing: 0.08em; text-transform: uppercase; }
.branch .pillb { display: inline-flex; align-items: center; gap: 0.55em; font-weight: 800; font-size: calc(var(--u) * 1.75); padding: 0.32em 0.8em 0.32em 0.4em; border-radius: 6px; line-height: 1.1; }
.branch .pillb i { font-style: normal; font-family: var(--mono); font-size: 0.72em; width: 1.6em; height: 1.6em; border-radius: 50%; display: grid; place-items: center; }
.branch.obj .lbl { color: var(--neon); }
.branch.obj .pillb { border: 2px solid var(--neon); color: #fff; }
.branch.obj .pillb i { background: var(--neon); color: var(--ink); }
.branch.res .lbl { color: var(--ultra); }
.branch.res .pillb { background: var(--ultra); color: #fff; }
.branch.res .pillb i { background: #fff; color: var(--ultra); }
.branch .q { flex-basis: 100%; font-family: var(--serif-text); font-style: italic; font-size: calc(var(--u) * 1.45); color: var(--ink-2); }
.s5 .branch .pillb { font-size: calc(var(--u) * 2.2); }

.market .m-case { display: block; font-family: var(--sans); font-style: normal; font-weight: 700; font-size: calc(var(--u) * 1.1); color: var(--ultra-soft); margin-bottom: 0.25em; }
.caption-card .hl { background: var(--ultra); color: #fff; padding: 0 0.2em; border-radius: 3px; }
.s8 .scene { height: auto; display: grid; grid-template-columns: 1fr calc(var(--u) * 11); gap: calc(var(--u) * 1.4); align-items: stretch; }
.s8 .scene .photo { grid-column: 2; grid-row: 1; height: 100%; }
.s8 .review { position: static; grid-column: 1; grid-row: 1; width: auto; }
.s8 .scene .clawd { right: calc(var(--u) * 1); bottom: calc(var(--u) * 1); width: calc(var(--u) * 7); }
.s8 .review .title { font-size: calc(var(--u) * 1.5); }
.s8 .review .results li { font-size: calc(var(--u) * 1.3); }
.s8 .stage { row-gap: calc(var(--u) * 1.1); padding-top: calc(var(--u) * 2.6); padding-bottom: calc(var(--u) * 5.6); }
.s8 .razon--big p { font-size: calc(var(--u) * 1.75); }
.s8 .razon--big { padding-bottom: calc(var(--u) * 0.9); gap: calc(var(--u) * 0.5); }
.s8 .market { padding: calc(var(--u) * 0.9) calc(var(--u) * 1.6); }
.s8 .market .m-quote { font-size: calc(var(--u) * 1.22); }
.s8 .market .m-claim { font-size: calc(var(--u) * 1.55); }
.s8 .review { padding: calc(var(--u) * 1.1) calc(var(--u) * 1.4); }
.s8 .review .title { font-size: calc(var(--u) * 1.35); }
.s8 .review .results { gap: calc(var(--u) * 0.5); margin-top: calc(var(--u) * 0.7); }
.s8 .review .results li { font-size: calc(var(--u) * 1.18); }
.s8 .review .foot { font-size: calc(var(--u) * 1.12); margin-top: calc(var(--u) * 0.6); padding-top: calc(var(--u) * 0.6); }
.s8 .branch .q { font-size: calc(var(--u) * 1.3); }
.s8 .claim { margin-top: calc(var(--u) * 1); }
.review .ex-tag, .caption-card .ex-tag { text-transform: none; letter-spacing: 0.01em; font-size: calc(var(--u) * 1.15); }
.s8 .scene { display: block; position: relative; }
.s8 .review { padding: calc(var(--u) * 1.6) calc(var(--u) * 2); }
.s8 .review .title { font-size: calc(var(--u) * 1.6); max-width: 30ch; }
.s8 .review .results li { font-size: calc(var(--u) * 1.35); }
.s8 .review .foot { font-size: calc(var(--u) * 1.3); }
.s8 .scene .clawd { position: absolute; right: calc(var(--u) * 1.6); top: calc(var(--u) * 1.4); bottom: auto; width: calc(var(--u) * 7); }
/* 9 · tarjeta compacta: deja ver la foto */
.s9 .evidence.teach { left: calc(var(--u) * -4); right: auto; width: calc(var(--u) * 27); bottom: calc(var(--u) * -2); padding: calc(var(--u) * 1.4) calc(var(--u) * 1.8); }
.s9 .teach .title { font-size: calc(var(--u) * 1.6); }
.s9 .teach li { grid-template-columns: calc(var(--u) * 10) 1fr; font-size: calc(var(--u) * 1.3); padding-top: calc(var(--u) * 0.6); align-items: center; }
.s9 .teach li b { font-size: 1.35em; }
.s9 .teach ul { gap: calc(var(--u) * 0.5); margin-top: calc(var(--u) * 0.6); }
/* Escudos de las universidades de los casos */
.review, .caption-card { position: relative; }
.s8 .review { position: relative; }
.crest { position: absolute; top: calc(var(--u) * 1.2); right: calc(var(--u) * 1.4); height: calc(var(--u) * 6.4); width: auto; }
.s8 .review .title, .caption-card p:first-of-type { padding-right: calc(var(--u) * 6); }
.caption-card { position: absolute; }
.branch .pillb { padding-left: 0.8em; }
/* Ronda 8 */
.s8 .review { position: relative; overflow: visible; }
.s8 .crest { top: calc(var(--u) * 2.2); right: calc(var(--u) * 1.8); height: calc(var(--u) * 5.6); }
.s8 .razon--big p { font-size: calc(var(--u) * 2.35); max-width: none; }
.s8 .market { grid-template-columns: calc(var(--u) * 15) 1fr; padding: calc(var(--u) * 1.2) calc(var(--u) * 2); }
.s8 .market .m-claim { font-size: calc(var(--u) * 1.6); }
.s8 .market .m-quote { font-size: calc(var(--u) * 1.9); line-height: 1.24; }
.s8 .market .cite { display: block; font-size: calc(var(--u) * 1.05); margin-top: 0.35em; }
.s8 .razon--big p { font-size: calc(var(--u) * 2.2); }
.s8 .market .m-quote { font-size: calc(var(--u) * 1.8); }
.s8 .review { padding: calc(var(--u) * 1.1) calc(var(--u) * 1.6); }
.s8 .review .title { font-size: calc(var(--u) * 1.32); max-width: none; padding-right: calc(var(--u) * 6); }
.s8 .review .results li { font-size: calc(var(--u) * 1.18); }
.s8 .review .foot { font-size: calc(var(--u) * 1.12); }
.s8 .crest { height: calc(var(--u) * 4.6); top: calc(var(--u) * 1.6); }
.s8 .resp-l, .s8 .stage { align-items: start; }
/* Ronda 9 · 8: cita en dos líneas y tarjeta del caso más legible */
.s8 .market { grid-template-columns: calc(var(--u) * 13) 1fr; padding: calc(var(--u) * 1) calc(var(--u) * 1.8); }
.s8 .market .m-quote { font-size: calc(var(--u) * 1.5); }
.s8 .review { padding: calc(var(--u) * 1.4) calc(var(--u) * 1.8); }
.s8 .review .title { font-size: calc(var(--u) * 1.6); }
.s8 .review .results li { font-size: calc(var(--u) * 1.4); }
.s8 .review .foot { font-size: calc(var(--u) * 1.3); }
.s8 .crest { height: calc(var(--u) * 5.4); top: calc(var(--u) * 1.8); }
.s8 .market .m-quote { font-size: calc(var(--u) * 1.72); }

/* ───────── Bibliografía con aire ───────── */
.s12 .bib-head { display: flex; align-items: baseline; gap: calc(var(--u) * 2); padding-bottom: calc(var(--u) * 1); border-bottom: 2px solid var(--ink); }
.s12 .bib-head h2 { font-family: var(--serif); font-weight: 400; font-size: calc(var(--u) * 3.2); line-height: 1; }
.s12 .bib-head span { font-weight: 700; font-size: calc(var(--u) * 1.15); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ultra); }
.s12 .refs { margin-top: calc(var(--u) * 1.6); columns: 3; column-gap: calc(var(--u) * 3); column-rule: 1px solid #D6D6CE; }
.s12 .refs p { break-inside: avoid; font-size: calc(var(--u) * 0.94); line-height: 1.32; color: var(--ink-2); padding-left: 1.6em; text-indent: -1.6em; margin-bottom: calc(var(--u) * 0.85); }
.s12 .refs p b { color: var(--ink); font-weight: 700; }
.s12 .refs a { color: var(--ultra); text-decoration: none; border-bottom: 1px solid var(--ultra-soft); }
.js .s12 .refs p.r { transition-delay: calc(var(--i, 0) * 45ms + 200ms); transform: translateY(calc(var(--u) * 0.8)); }
@media (hover: hover) and (pointer: fine) { .s12 .refs a:hover { border-bottom-color: var(--ultra); } }
.s12 .refs p { font-size: calc(var(--u) * 0.9); margin-bottom: calc(var(--u) * 0.7); line-height: 1.3; } .s12 .refs { margin-top: calc(var(--u) * 1.2); } .s12 .stage { padding-top: calc(var(--u) * 2.4); }

/* ═════════ Celular (pantalla vertical) ═════════
   Cada diapositiva se lee de arriba abajo; la versión de escritorio no cambia. */




/* ═════════ Celular ═════════
   Se mantiene el rectángulo 16:9 de la presentación. En vertical se ve reducido y centrado;
   al girar el teléfono ocupa toda la pantalla. */
.rotate-hint { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  .slide { height: 100svh; }
  .rotate-hint {
    display: flex; align-items: center; gap: 8px;
    position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 11;
    padding: 8px 14px; border-radius: 999px;
    font: 600 13px/1.2 var(--sans); white-space: nowrap;
    background: rgba(26, 28, 32, 0.92); color: var(--chalk); border: 1px solid var(--night-3);
  }
  .rotate-hint svg { width: 16px; height: 16px; flex: none; }
  .nav { font-size: 14px; bottom: 16px; }
  .nav .count { min-width: 0; }
  .nav .count span { display: none; }
}
@media (orientation: portrait) and (pointer: coarse) {
  .rotate-hint { animation: hint-out 500ms ease 6s forwards; }
}
@keyframes hint-out { to { opacity: 0; visibility: hidden; } }

/* ───────── Ronda 12: rendimiento y franjas negras en el celular ───────── */

/* Cortina: se desliza hacia arriba (transform, más ligero que clip-path) */
.turn { clip-path: none; will-change: transform; }
.s8.wipe .turn { animation-name: turn-slide; }
@keyframes turn-slide {
  0%, 85% { transform: translateY(0); }
  100% { transform: translateY(-101%); }
}

@media (pointer: coarse) {
  /* Sin desenfoque al revelar: es lo que más cuesta en un teléfono */
  .js .r { filter: none !important; transition-property: opacity, transform !important; }
  .js .scene .photo { clip-path: none !important; transition: none !important; }
  .slide.is-in .neon { animation: none; }
}

@media (orientation: portrait) and (pointer: coarse) {
  /* Solo se ve el rectángulo 16:9; negro arriba y abajo */
  html, body { background: #000; }
  .slide {
    --bar: max(0px, calc((100svh - 56.25vw) / 2));
    padding-block: var(--bar);
    background-clip: content-box;
    background-origin: content-box;
  }
  .s11 .bg, .turn { top: var(--bar); bottom: var(--bar); }
}
@media (orientation: portrait) and (pointer: coarse) {
  /* Nada se dibuja fuera del rectángulo (ni la cortina al subir) */
  .slide { clip-path: inset(var(--bar) 0); }
}
.s5 .claim { font-size: calc(var(--u) * 3.6); }

/* ───────── Ronda 14 ───────── */

/* Neón de «código»: se enciende al entrar y vuelve a parpadear de vez en cuando */
.slide.is-in .neon {
  animation: neon-on 1100ms steps(1, end) 350ms both, neon-buzz 7s steps(1, end) 3s infinite;
}
@keyframes neon-buzz {
  0%, 88%, 100% { color: var(--neon-hot); }
  90% { color: #6b3a1c; text-shadow: none; }
  92% { color: var(--neon-hot); }
  94% { color: #7a4220; text-shadow: none; }
  96% { color: var(--neon-hot); }
}
@media (pointer: coarse) { .slide.is-in .neon { animation: neon-on 1100ms steps(1, end) 350ms both, neon-buzz 7s steps(1, end) 3s infinite; } }
@media (prefers-reduced-motion: reduce) { .slide.is-in .neon { animation: none !important; } }

/* 6 · curva de aprendizaje por pasos */
.s6 .claim { font-size: calc(var(--u) * 2.9); line-height: 1.16; }
.curve { position: relative; margin: 0; cursor: pointer; }
.curve > svg { display: block; width: 100%; height: auto; overflow: visible; }
.curve .grid line { stroke: var(--night-3); stroke-width: 1.5; stroke-dasharray: 4 6; }
.curve .axes line { stroke: var(--chalk-2); stroke-width: 2; }
.curve .ax { font-family: var(--sans); font-weight: 700; font-size: 17px; fill: var(--chalk-2); }
.curve .ph { font-family: var(--sans); font-weight: 800; font-size: 21px; fill: var(--night-3); transition: fill 400ms ease; }
.curve .seg { fill: none; stroke: var(--neon); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 900ms var(--ease-in-out); }
.curve .hit { opacity: 0; transition: opacity 500ms var(--ease-out); }
.curve .hit line { stroke: var(--neon); stroke-width: 2.5; }
.curve .hit circle { fill: #fff; filter: drop-shadow(0 0 6px rgba(255, 106, 19, 0.9)); }
.curve .hit text { font-family: var(--sans); font-weight: 800; font-size: 20px; fill: var(--neon-hot); }
.curve[data-step="1"] [data-s="1"], .curve[data-step="2"] [data-s="1"], .curve[data-step="2"] [data-s="2"],
.curve[data-step="3"] [data-s="1"], .curve[data-step="3"] [data-s="2"], .curve[data-step="3"] [data-s="3"],
.curve[data-step="4"] [data-s="1"], .curve[data-step="4"] [data-s="2"], .curve[data-step="4"] [data-s="3"], .curve[data-step="4"] [data-s="4"],
.curve[data-step="5"] [data-s], .curve[data-step="6"] [data-s] { stroke-dashoffset: 0; fill: var(--chalk); opacity: 1; }
.curve .seg[data-s] { fill: none; }
.curve[data-step="3"] .ph[data-s="3"] { fill: var(--neon-hot); }
.curve .card { position: absolute; border-radius: calc(var(--u) * 0.6); box-shadow: 0 calc(var(--u) * 0.8) calc(var(--u) * 2.4) rgba(0, 0, 0, 0.5); opacity: 0; transform: translateY(calc(var(--u) * 1)); transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out); pointer-events: none; }
.curve[data-step="6"] .card { opacity: 1; transform: none; }
.curve[data-step="6"] .card.ask { transition-delay: 350ms; }
.curve .card.ok { right: 2%; bottom: 33%; display: flex; align-items: center; gap: calc(var(--u) * 0.9); background: #fff; color: var(--ink); padding: calc(var(--u) * 0.8) calc(var(--u) * 1.3) calc(var(--u) * 0.8) calc(var(--u) * 0.9); }
.curve .card.ok svg { width: calc(var(--u) * 2.3); height: calc(var(--u) * 2.3); padding: calc(var(--u) * 0.45); border-radius: 50%; background: var(--ink); color: #fff; }
.curve .card.ok b { display: block; font-size: calc(var(--u) * 1.45); }
.curve .card.ok span { font-size: calc(var(--u) * 1); color: var(--ink-2); font-weight: 600; }
.curve .card.ask { right: 2%; bottom: 9%; background: var(--neon); color: var(--ink); padding: calc(var(--u) * 0.9) calc(var(--u) * 1.3); max-width: 46%; }
.curve .card.ask .who { font-size: calc(var(--u) * 0.95); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.curve .card.ask b { display: block; font-size: calc(var(--u) * 1.55); line-height: 1.15; margin-top: 0.2em; }
.curve .card.ask .dots { display: block; font-family: var(--serif); font-size: calc(var(--u) * 2.4); line-height: 0.6; margin-top: 0.2em; }
.curve figcaption { display: flex; justify-content: space-between; align-items: center; margin-top: calc(var(--u) * 0.8); }
.curve .concept { font-size: calc(var(--u) * 1.15); color: var(--chalk-2); letter-spacing: 0.02em; }
.curve .ctrls { display: flex; gap: calc(var(--u) * 0.6); }
.curve .ctrls button { font: 600 calc(var(--u) * 1.05) / 1 var(--sans); color: var(--chalk); background: var(--night-2); border: 1px solid var(--night-3); border-radius: 999px; padding: 0.55em 1em; cursor: pointer; transition: background-color 160ms ease, transform 140ms var(--ease-out); }
.curve .ctrls button:active { transform: scale(0.96); }
.curve .ctrls .c-n { color: var(--neon); font-variant-numeric: tabular-nums; margin-left: 0.3em; }
@media (hover: hover) and (pointer: fine) { .curve .ctrls button:hover { background: var(--night-3); } }
@media (prefers-reduced-motion: reduce) { .curve .seg, .curve .card, .curve .hit { transition-duration: 1ms; } }
@media print { .curve .seg { stroke-dashoffset: 0; } .curve .hit, .curve .card { opacity: 1; transform: none; } .curve .ph { fill: var(--chalk); } .curve .ctrls { display: none; } }
/* Parpadeo periódico suave: solo baja la intensidad (opacidad, muy ligero) */
@keyframes neon-buzz {
  0%, 88%, 100% { opacity: 1; }
  90% { opacity: 0.6; }
  92% { opacity: 1; }
  94% { opacity: 0.75; }
  96% { opacity: 1; }
}
.contra .stage > *, .resp .stage > *, .curve { min-width: 0; }
.curve > svg { max-width: 100%; }
.curve .card.ok { right: 1%; bottom: auto; top: 40%; max-width: 35%; }
.curve .card.ask { right: 1%; bottom: auto; top: 58%; max-width: 35%; }
.curve .card.ok b { font-size: calc(var(--u) * 1.3); }
.curve .card.ask b { font-size: calc(var(--u) * 1.4); }
.curve .card.ok { top: 34%; max-width: 31%; }
.curve .card.ask { top: 58%; max-width: 31%; }

/* ───────── Ronda 15: curva limpia, un solo trazo y tarjetas en fila ───────── */
.curve .line { fill: none; stroke: var(--neon); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; transition: stroke-dashoffset 1000ms var(--ease-in-out); }
.curve[data-step="3"] .ph[data-s="3"] { fill: var(--neon-hot); }
.curve[data-step="1"] .ph[data-s="1"],
.curve[data-step="2"] .ph[data-s="1"], .curve[data-step="2"] .ph[data-s="2"],
.curve[data-step="3"] .ph[data-s="1"], .curve[data-step="3"] .ph[data-s="2"],
.curve[data-step="4"] .ph[data-s="1"], .curve[data-step="4"] .ph[data-s="2"], .curve[data-step="4"] .ph[data-s="3"], .curve[data-step="4"] .ph[data-s="4"],
.curve[data-step="5"] .ph, .curve[data-step="6"] .ph { fill: var(--chalk); }
.curve .hit { opacity: 0; }
.curve[data-step="3"] .hit, .curve[data-step="4"] .hit, .curve[data-step="5"] .hit, .curve[data-step="6"] .hit { opacity: 1; transition-delay: 700ms; }

.curve .cards { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1); margin-top: calc(var(--u) * 0.6); }
.curve .cards .card { position: static; max-width: none; top: auto; right: auto; bottom: auto; }
.curve .cards .card.ok { display: flex; align-items: center; gap: calc(var(--u) * 0.9); padding: calc(var(--u) * 0.8) calc(var(--u) * 1.1); }
.curve .cards .card.ok b { font-size: calc(var(--u) * 1.25); line-height: 1.15; }
.curve .cards .card.ok span { font-size: calc(var(--u) * 0.95); }
.curve .cards .card.ok svg { flex: none; width: calc(var(--u) * 2.1); height: calc(var(--u) * 2.1); }
.curve .cards .card.ask { display: flex; flex-direction: column; justify-content: center; padding: calc(var(--u) * 0.8) calc(var(--u) * 1.1); }
.curve .cards .card.ask b { font-size: calc(var(--u) * 1.3); line-height: 1.15; }
.curve .cards .card.ask .who { font-size: calc(var(--u) * 0.9); }
.curve figcaption { margin-top: calc(var(--u) * 0.8); }
/* Ronda 16: el trazo lo anima el script fotograma a fotograma; punta redonda */
.curve .line { transition: none; }
.curve .head { fill: var(--neon); opacity: 0; }
.curve { cursor: default; }
.curve .cards .card.ok { opacity: 1; transform: none; }

/* ───────── Ronda 17: escudos como sello en la esquina de la tarjeta ───────── */
.crest, .s8 .crest {
  position: absolute;
  top: calc(var(--u) * -2.6);
  right: calc(var(--u) * -2.2);
  width: calc(var(--u) * 7.6);
  height: calc(var(--u) * 7.6);
  object-fit: contain;
  padding: calc(var(--u) * 1.1);
  background: #fff;
  border-radius: 50%;
  box-shadow:
    0 0 0 calc(var(--u) * 0.25) #fff,
    0 0 0 calc(var(--u) * 0.45) var(--ultra),
    0 calc(var(--u) * 0.6) calc(var(--u) * 1.6) rgba(14, 15, 17, 0.28);
  rotate: -8deg;
  z-index: 2;
}
.review .title, .s8 .review .title, .caption-card p:first-of-type { padding-right: calc(var(--u) * 5.5); }
/* Al aparecer, el sello «se estampa» */
.js .crest.r { opacity: 0; transform: scale(1.35); filter: none; transition: opacity 300ms ease, transform 450ms cubic-bezier(0.34, 1.4, 0.64, 1); transition-delay: 900ms; }
.js .slide.is-in .crest.r { opacity: 1; transform: none; }
.js .s8.wipe .crest.r { transition-delay: 6300ms; }
@media (prefers-reduced-motion: reduce) { .js .crest.r { transform: none; transition-duration: 1ms; } }
.s8 .crest { top: calc(var(--u) * -1.4); }
.crest, .s8 .crest { width: calc(var(--u) * 8.8); height: calc(var(--u) * 8.8); padding: calc(var(--u) * 0.55); }
.s8 .crest { top: calc(var(--u) * 0.2); }
.review .title, .s8 .review .title, .caption-card p:first-of-type { padding-right: calc(var(--u) * 6.6); }

/* PDF / impresión: curva completa y escena final visible */
@media print {
  .curve .line { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .curve .head { display: none; }
  .curve .hit, .curve .card, .curve .cards .card { opacity: 1 !important; transform: none !important; }
  .curve .ph { fill: var(--chalk) !important; }
  .js .crest.r { opacity: 1; transform: none; }
  .rotate-hint { display: none !important; }
  .slide { clip-path: none !important; padding: 0 !important; }
}
@media print {
  .neon, .slide.is-in .neon { animation: none !important; opacity: 1 !important; color: var(--neon-hot) !important; text-shadow: 0 0 0.04em #fff3e8, 0 0 0.16em var(--neon), 0 0 0.45em rgba(255, 106, 19, 0.75), 0 0 1.1em rgba(255, 80, 0, 0.45) !important; }
  .clawd--hop, .js .clawd--hop, .slide.is-in .clawd--hop { animation: none !important; opacity: 1 !important; transform: none !important; }
  .caret { animation: none !important; }
}

/* ───────── Ronda 18: caso de Ecuador en la diapositiva 10 ───────── */
.case-ec .inst { font-weight: 800; font-size: calc(var(--u) * 1.5); color: var(--ultra); margin-top: calc(var(--u) * 0.2); padding-right: calc(var(--u) * 6.6); }
.case-ec p:not(.inst):not(.res) { font-size: calc(var(--u) * 1.32); font-weight: 600; line-height: 1.3; margin-top: calc(var(--u) * 0.5); padding-right: calc(var(--u) * 6.6); }
.case-ec .acts { list-style: none; display: flex; flex-wrap: wrap; gap: calc(var(--u) * 0.5); margin-top: calc(var(--u) * 0.8); }
.case-ec .acts li { font-size: calc(var(--u) * 1.08); font-weight: 700; background: var(--ultra-soft); color: var(--ultra); padding: 0.35em 0.8em; border-radius: 999px; }
.case-ec .res { font-size: calc(var(--u) * 1.22); line-height: 1.32; margin-top: calc(var(--u) * 0.8); padding-top: calc(var(--u) * 0.7); border-top: 1px solid var(--paper-2); color: var(--ink); font-weight: 500; }
.case-ec .cite { display: block; font-size: calc(var(--u) * 1.05); margin-top: calc(var(--u) * 0.4); }
.s10 .scene { height: calc(var(--u) * 30); }

/* ───────── Ronda 20: cierre con guía de conclusión + cita ───────── */
.s11 .bg { inset: 0 0 0 52%; }
.s11 .stage { grid-template-columns: 0.56fr 0.44fr; gap: calc(var(--u) * 4); align-items: center; }
.s11 .callback { font-family: var(--serif-text); font-style: italic; font-size: calc(var(--u) * 1.6); line-height: 1.3; color: var(--chalk-2); max-width: 38ch; }
.s11 .postura { font-family: var(--sans); font-weight: 750; font-size: calc(var(--u) * 3.1); line-height: 1.12; letter-spacing: -0.02em; color: #fff; margin-top: calc(var(--u) * 1.4); }
.s11 .lead { font-size: calc(var(--u) * 1.45); color: var(--chalk-2); margin-top: calc(var(--u) * 2.2); font-weight: 500; }
.s11 .pillars { list-style: none; counter-reset: pl; display: grid; gap: calc(var(--u) * 0.8); margin-top: calc(var(--u) * 1); }
.s11 .pillars li { counter-increment: pl; display: flex; align-items: center; gap: calc(var(--u) * 1.2); font-size: calc(var(--u) * 1.95); font-weight: 750; color: var(--chalk); padding: calc(var(--u) * 0.85) calc(var(--u) * 1.3); border: 2px solid var(--ultra-on-dark); border-radius: 6px; }
.s11 .pillars li::before { content: counter(pl); font-family: var(--mono); font-size: 0.7em; width: 1.75em; height: 1.75em; border-radius: 50%; display: grid; place-items: center; background: var(--ultra); color: #fff; flex: none; }
.s11 .goal { display: flex; align-items: center; gap: calc(var(--u) * 1); margin-top: calc(var(--u) * 1.6); font-size: calc(var(--u) * 1.7); font-weight: 700; color: var(--chalk); }
.s11 .goal svg { width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); color: var(--neon); }
.s11 .goal b { background: var(--neon); color: var(--ink); padding: 0.2em 0.6em; border-radius: 4px; }
.s11 .quote-card { background: rgba(14, 15, 17, 0.82); border: 1px solid var(--night-3); border-radius: calc(var(--u) * 0.8); padding: calc(var(--u) * 2.2) calc(var(--u) * 2.4); box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0, 0, 0, 0.45); }
.s11 .quote-card blockquote { font-family: var(--serif); font-size: calc(var(--u) * 2.25); line-height: 1.18; color: #fff; }
.s11 .quote-card .cite { display: block; margin-top: calc(var(--u) * 1.2); font-size: calc(var(--u) * 1.15); color: var(--chalk-2); opacity: 1; }
.s11 .quote-card .bye { margin-top: calc(var(--u) * 1.8); }
.s11 .quote-card .bye span { font-size: calc(var(--u) * 2.4); }
.s11 .quote-card .clawd { width: calc(var(--u) * 4.4); }
.s11 .farewell { align-self: end; justify-self: end; display: flex; align-items: center; gap: calc(var(--u) * 1.4); padding: calc(var(--u) * 1.2) calc(var(--u) * 2); background: rgba(14, 15, 17, 0.78); border: 1px solid var(--night-3); border-radius: 999px; margin-bottom: calc(var(--u) * 1); }
.s11 .farewell span { font-family: var(--serif); font-style: italic; font-size: calc(var(--u) * 3.6); color: #fff; line-height: 1; }
.s11 .farewell .clawd { width: calc(var(--u) * 5); }
.s11 .postura { font-size: calc(var(--u) * 3.4); }
.s11 .stage { grid-template-columns: 0.62fr 0.38fr; }
.s11 .postura { font-size: calc(var(--u) * 3); margin-top: calc(var(--u) * 1); }
.s11 .lead { font-size: calc(var(--u) * 1.35); margin-top: calc(var(--u) * 1.6); }
.s11 .pillars { gap: calc(var(--u) * 0.6); margin-top: calc(var(--u) * 0.8); }
.s11 .pillars li { font-size: calc(var(--u) * 1.7); padding: calc(var(--u) * 0.65) calc(var(--u) * 1.2); }
.s11 .goal { margin-top: calc(var(--u) * 1.2); font-size: calc(var(--u) * 1.6); }
/* 11 · cita de cierre (Waring) */
.s11 .lead-in { font-weight: 800; font-size: calc(var(--u) * 1.3); letter-spacing: 0.08em; text-transform: uppercase; color: var(--neon); }
.s11 .closing-quote { font-family: var(--serif); font-size: calc(var(--u) * 3.1); line-height: 1.16; color: #fff; margin-top: calc(var(--u) * 1.4); }
.s11 .closing-quote .q { color: var(--neon); }
.s11 .close .cite { display: block; margin-top: calc(var(--u) * 1.8); font-size: calc(var(--u) * 1.35); color: var(--chalk-2); }

/* ───────── Ronda 22: cita del mercado en la 3; la 8 sin franja ───────── */
.s3 h2 { font-size: calc(var(--u) * 4.4); }
.s3 .market-q { font-size: calc(var(--u) * 1.75); margin-top: calc(var(--u) * 2); max-width: 40ch; color: var(--ink); padding-left: calc(var(--u) * 1.6); border-left: 3px solid var(--ultra); }
.s3 .market-q + .cite { display: block; margin-top: calc(var(--u) * 0.8); padding-left: calc(var(--u) * 1.6); }
.s3 .def { margin-top: calc(var(--u) * 2); }
.s3 .tools { margin-top: calc(var(--u) * 2); }
.s8 .stage { grid-template-rows: auto 1fr; }
.s8 .scene { height: auto; }
.s8 .review .title { font-size: calc(var(--u) * 1.7); }
.s8 .review .results li { font-size: calc(var(--u) * 1.45); }
.s8 .review .foot { font-size: calc(var(--u) * 1.35); }
.s8 .claim { font-size: calc(var(--u) * 2.3); }
.s8 .quote { font-size: calc(var(--u) * 1.6); }
.s3 .market-q { border-left: 0; padding-left: 0; }
.s3 .market-q + .cite { padding-left: 0; }
.s8 .stage { align-items: center; row-gap: calc(var(--u) * 2.4); padding-top: calc(var(--u) * 3.8); }
.s8 .razon--big p { font-size: calc(var(--u) * 2.4); }
.s8 .claim { font-size: calc(var(--u) * 2.7); }
.s8 .quote { font-size: calc(var(--u) * 1.75); }
.s8 .review { padding: calc(var(--u) * 1.8) calc(var(--u) * 2.2); }
.s8 .review .title { font-size: calc(var(--u) * 1.95); }
.s8 .review .results li { font-size: calc(var(--u) * 1.6); }
.s8 .review .foot { font-size: calc(var(--u) * 1.45); }