/*!
 * DPGA · Gráficos animados y control del movimiento
 * (c) 2026 L.D.G. Luis E. Maldonado Gil - CodeLibri
 * aula.codelibri.com.mx - Todos los derechos reservados.
 * ref CL-DPGA-U12-13-2026-057D
 */
/* ============================================================
   DPGA · Unidad 1 — Antecedentes y Técnicas de la Animación
   Presentación HTML. Navegación: ← → · Espacio · M (índice) · F (pantalla completa)
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0}

:root{
  /* unidad proporcional a un lienzo 16:9 — 1u ≈ 1% del ancho del escenario */
  --u: min(1vw, 1.7778vh);

  --bg:#0a0a0c;
  --bg2:#131318;
  --panel:#f5f0e6;
  --ink:#f4f1ea;
  --dim:#9c968c;
  --gold:#b3925f;
  --gold-soft:#8a7047;
  --rose:#c9738a;
  --line:rgba(244,241,234,.13);

  --serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
  --sans:'Segoe UI Variable Display','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:'Cascadia Mono',Consolas,'Courier New',monospace;
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* grano sutil de fondo, evoca película */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:900;opacity:.045;
  background-image:radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);
  background-size:3px 3px;
}

/* ---------- escenario ---------- */
#stage{position:fixed;inset:0}

.slide{
  position:absolute;inset:0;
  padding:calc(5*var(--u)) calc(6.5*var(--u)) calc(6*var(--u));
  display:flex;flex-direction:column;justify-content:center;
  opacity:0;visibility:hidden;
  transform:translateY(calc(1.2*var(--u)));
  transition:opacity .42s ease, transform .42s ease, visibility 0s .42s;
}
.slide.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .42s ease, transform .42s ease}

.wrap{width:100%;max-width:calc(100*var(--u));margin:0 auto}

/* ---------- tipografía ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:calc(1.05*var(--u));
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin:0 0 calc(1.6*var(--u));
}
h1{font-family:var(--serif);font-weight:400;font-size:calc(5.4*var(--u));line-height:1.06;margin:0;letter-spacing:-.015em}
h2{font-family:var(--serif);font-weight:400;font-size:calc(4.2*var(--u));line-height:1.08;margin:0;letter-spacing:-.012em}
h3{font-family:var(--serif);font-weight:400;font-size:calc(3.1*var(--u));line-height:1.12;margin:0}
p{margin:0 0 calc(1.2*var(--u));font-size:calc(1.55*var(--u));line-height:1.5;color:#ded9d0;max-width:62ch}
.lead{font-size:calc(1.95*var(--u));line-height:1.5;color:var(--ink)}
.dim{color:var(--dim)}
strong{color:#fff;font-weight:600}

/* ---------- portada ---------- */
.cover{justify-content:center;align-items:flex-start}
.cover .rule{width:calc(14*var(--u));height:2px;background:var(--gold);margin:calc(3*var(--u)) 0}
.cover .sub{font-size:calc(1.9*var(--u));color:var(--dim);max-width:60ch}
.cover .who{margin-top:calc(5*var(--u));font-family:var(--mono);font-size:calc(1.15*var(--u));letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.cover .who b{color:var(--ink);font-weight:600}

/* ---------- divisor de sección ---------- */
.section{align-items:center;text-align:center;background:
   radial-gradient(120% 90% at 50% 40%, rgba(179,146,95,.14), transparent 62%)}
.section .wrap{display:flex;flex-direction:column;align-items:center}
.section h2{font-size:calc(5.2*var(--u));max-width:22ch}
.section .num{
  font-family:var(--serif);font-size:calc(11*var(--u));line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--gold-soft);opacity:.55;margin-bottom:calc(-1*var(--u))
}
.section .kicker{margin-top:calc(2.4*var(--u));font-family:var(--mono);font-size:calc(1.15*var(--u));letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* ---------- rejilla dos columnas ---------- */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:calc(5*var(--u));align-items:center}
.cols.wide-left{grid-template-columns:1.15fr .85fr}
.cols.wide-right{grid-template-columns:.9fr 1.1fr}

/* ---------- panel para grabados / ilustraciones de fondo claro ---------- */
.plate{
  background:var(--panel);border-radius:calc(.7*var(--u));
  padding:calc(2*var(--u));display:flex;align-items:center;justify-content:center;
  box-shadow:0 calc(1.4*var(--u)) calc(4*var(--u)) rgba(0,0,0,.5);
}
.plate img{width:100%;height:auto;display:block;max-height:calc(38*var(--u));object-fit:contain}
.plate.tight{padding:calc(1*var(--u))}
.plate-row{display:grid;gap:calc(1.8*var(--u))}
.plate-row.two{grid-template-columns:1fr 1fr;align-items:start}
.plate-row.two .plate img{height:calc(22*var(--u));max-height:none;object-fit:contain}
figure{margin:0;display:block}
figcaption{margin-top:calc(.9*var(--u));font-family:var(--mono);font-size:calc(.95*var(--u));letter-spacing:.1em;text-transform:uppercase;color:var(--dim);line-height:1.4}

.photo{border-radius:calc(.6*var(--u));overflow:hidden;box-shadow:0 calc(1.4*var(--u)) calc(4*var(--u)) rgba(0,0,0,.5)}
.photo img{width:100%;display:block;max-height:calc(40*var(--u));object-fit:cover}
.plate-row.two .photo img{height:calc(27*var(--u));max-height:none}

/* ---------- insignia de año ---------- */
.badge{
  display:inline-flex;align-items:baseline;gap:calc(.7*var(--u));
  font-family:var(--serif);font-size:calc(3.4*var(--u));color:var(--gold);line-height:1
}
.badge small{font-family:var(--mono);font-size:calc(1*var(--u));letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

/* ---------- fichas TÉCNICA / LENGUAJE / DISCURSO ---------- */
.ficha{display:grid;gap:calc(1.4*var(--u));margin-top:calc(1.7*var(--u))}
.ficha .item{border-left:2px solid var(--gold-soft);padding-left:calc(1.4*var(--u))}
.ficha .lab{
  font-family:var(--mono);font-size:calc(.9*var(--u));letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:calc(.4*var(--u))
}
.ficha .txt{font-size:calc(1.36*var(--u));line-height:1.46;color:#ded9d0;margin:0;max-width:52ch}

/* ---------- video ---------- */
.vbox{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:calc(.6*var(--u));overflow:hidden;
      box-shadow:0 calc(1.6*var(--u)) calc(4.5*var(--u)) rgba(0,0,0,.6)}
.vbox iframe,.vbox video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}

.facade{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;background:#000;display:block}
.facade img{width:100%;height:100%;object-fit:cover;display:block;opacity:.72;transition:opacity .3s ease, transform .5s ease}
.facade:hover img,.facade:focus-visible img{opacity:.95;transform:scale(1.02)}
.facade .play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:calc(6.5*var(--u));height:calc(6.5*var(--u));border-radius:50%;
  background:rgba(10,10,12,.55);border:1.5px solid var(--ink);
  display:grid;place-items:center;transition:background .25s ease,border-color .25s ease
}
.facade .play::after{
  content:'';border-style:solid;border-width:calc(1.05*var(--u)) 0 calc(1.05*var(--u)) calc(1.8*var(--u));
  border-color:transparent transparent transparent var(--ink);margin-left:calc(.45*var(--u))
}
.facade:hover .play,.facade:focus-visible .play{background:var(--gold);border-color:var(--gold)}
.facade:hover .play::after,.facade:focus-visible .play::after{border-left-color:#0a0a0c}
.facade:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.vmeta{display:flex;justify-content:space-between;align-items:baseline;gap:calc(1.4*var(--u));margin-top:calc(.9*var(--u))}
.vmeta .t{font-size:calc(1.15*var(--u));color:#ded9d0;line-height:1.35}
.vmeta .s{font-family:var(--mono);font-size:calc(.9*var(--u));letter-spacing:.08em;color:var(--dim);white-space:nowrap}
.vmeta a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--line)}
.vmeta a:hover{color:var(--gold);border-color:var(--gold)}

/* rejilla de videos */
.vgrid{display:grid;gap:calc(2.4*var(--u));margin-top:calc(2.4*var(--u));margin-inline:auto}
.vgrid.g1{grid-template-columns:minmax(0,calc(50*var(--u)));justify-content:center}
.vgrid.g2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:calc(88*var(--u))}
.vgrid.g4{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(1.6*var(--u));max-width:calc(53*var(--u))}
.vgrid.g4 .vmeta{margin-top:calc(.6*var(--u));flex-direction:column;gap:calc(.15*var(--u))}
.vgrid.g4 .vmeta .t{font-size:calc(.98*var(--u))}
.vgrid.g4 .vmeta .s{font-size:calc(.8*var(--u))}

/* ---------- reproductor a pantalla grande ---------- */
#lb{position:fixed;inset:0;z-index:960;background:rgba(6,6,8,.94);backdrop-filter:blur(6px);
    display:none;align-items:center;justify-content:center;flex-direction:column;gap:calc(1.4*var(--u));
    padding:calc(4*var(--u))}
#lb.open{display:flex}
#lb .lb-box{width:min(calc(88*var(--u)), 88vw);aspect-ratio:16/9;max-height:76vh;background:#000;
            border-radius:calc(.6*var(--u));overflow:hidden;position:relative;
            box-shadow:0 calc(2*var(--u)) calc(6*var(--u)) rgba(0,0,0,.7)}
#lb .lb-box iframe,#lb .lb-box video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
#lb .lb-cap{display:flex;gap:calc(2*var(--u));align-items:baseline;justify-content:space-between;
            width:min(calc(88*var(--u)),88vw);font-size:calc(1.2*var(--u));color:#ded9d0}
#lb .lb-cap .s{font-family:var(--mono);font-size:calc(.92*var(--u));letter-spacing:.1em;color:var(--dim);white-space:nowrap}
#lb .lb-cap a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--line)}
#lb .lb-cap a:hover{color:var(--gold);border-color:var(--gold)}
#lbClose{position:absolute;top:calc(2.4*var(--u));right:calc(3*var(--u));background:none;border:0;
         color:var(--dim);font-family:var(--mono);font-size:calc(1*var(--u));letter-spacing:.14em;cursor:pointer}
#lbClose:hover{color:var(--gold)}

/* ---------- actividad ---------- */
.task{counter-reset:t;display:grid;gap:calc(1.5*var(--u));margin-top:calc(2.6*var(--u));max-width:calc(70*var(--u))}
.task li{list-style:none;counter-increment:t;display:flex;gap:calc(1.6*var(--u));align-items:baseline;
         border-bottom:1px solid var(--line);padding-bottom:calc(1.4*var(--u));font-size:calc(1.9*var(--u))}
.task li::before{content:counter(t,decimal-leading-zero);font-family:var(--mono);font-size:calc(1.1*var(--u));color:var(--gold);letter-spacing:.1em}

/* ---------- línea del tiempo ---------- */
.tl{display:grid;grid-template-columns:repeat(6,1fr);gap:calc(1.4*var(--u));margin-top:calc(3*var(--u))}
.tl .cell{border-top:1px solid var(--line);padding-top:calc(1.2*var(--u))}
.tl .y{font-family:var(--serif);font-size:calc(2.5*var(--u));color:var(--gold);line-height:1}
.tl .n{font-size:calc(1.12*var(--u));color:#ded9d0;margin-top:calc(.5*var(--u));line-height:1.35}
.tl .w{font-family:var(--mono);font-size:calc(.85*var(--u));color:var(--dim);letter-spacing:.08em;margin-top:calc(.4*var(--u))}

/* ---------- cita ---------- */
.quote{
  border-left:2px solid var(--rose);padding-left:calc(2*var(--u));margin:calc(2*var(--u)) 0 0;
  font-family:var(--serif);font-size:calc(1.55*var(--u));line-height:1.55;color:#e7e2d9;font-style:italic;max-width:48ch
}
.quote cite{display:block;margin-top:calc(1*var(--u));font-family:var(--mono);font-style:normal;
            font-size:calc(.88*var(--u));letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

/* ---------- nota al pie / corrección ---------- */
.note{
  margin-top:calc(1.5*var(--u));padding:calc(1*var(--u)) calc(1.3*var(--u));
  background:rgba(179,146,95,.09);border-left:2px solid var(--gold);border-radius:0 calc(.4*var(--u)) calc(.4*var(--u)) 0;
  font-size:calc(1.06*var(--u));line-height:1.42;color:#cfc9bf;max-width:58ch
}
.note b{color:var(--gold);font-weight:600}

/* ---------- bibliografía ---------- */
.biblio{display:grid;gap:calc(1.6*var(--u));margin-top:calc(2.6*var(--u));max-width:calc(78*var(--u))}
.biblio .row{display:grid;grid-template-columns:calc(9*var(--u)) 1fr;gap:calc(2*var(--u));
             border-bottom:1px solid var(--line);padding-bottom:calc(1.4*var(--u))}
.biblio .yr{font-family:var(--serif);font-size:calc(1.9*var(--u));color:var(--gold)}
.biblio .ref{font-size:calc(1.42*var(--u));line-height:1.45;color:#ded9d0}
.biblio .ref i{color:var(--ink)}

/* ---------- cierre ---------- */
.end{align-items:center;text-align:center}
.end .wrap{display:flex;flex-direction:column;align-items:center}
.end h1{font-size:calc(9*var(--u));letter-spacing:.02em}

/* ---------- barra de estado ---------- */
#chrome{position:fixed;left:0;right:0;bottom:0;z-index:800;pointer-events:none}
#bar{height:2px;background:rgba(244,241,234,.1)}
#bar i{display:block;height:100%;background:var(--gold);width:0;transition:width .42s ease}
#hud{display:flex;justify-content:space-between;align-items:center;
     padding:calc(1.1*var(--u)) calc(2.4*var(--u));
     font-family:var(--mono);font-size:calc(.92*var(--u));letter-spacing:.12em;color:var(--dim)}
#hud .r{pointer-events:auto;display:flex;gap:calc(1.6*var(--u))}
#hud button{background:none;border:0;color:var(--dim);font:inherit;letter-spacing:inherit;cursor:pointer;padding:0}
#hud button:hover{color:var(--gold)}
#hud button[disabled]{opacity:.3;cursor:default}
#hud button[disabled]:hover{color:var(--dim)}
#sect{max-width:50vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}

/* ---------- índice ---------- */
#menu{position:fixed;inset:0;z-index:950;background:rgba(8,8,10,.97);backdrop-filter:blur(10px);
      padding:calc(5*var(--u)) calc(6*var(--u));overflow-y:auto;display:none}
#menu.open{display:block}
#menu h2{margin-bottom:calc(3*var(--u))}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(26*var(--u)),1fr));gap:calc(2.4*var(--u)) calc(3*var(--u))}
.mgroup .gt{font-family:var(--mono);font-size:calc(.95*var(--u));letter-spacing:.2em;text-transform:uppercase;
            color:var(--gold);padding-bottom:calc(.8*var(--u));border-bottom:1px solid var(--line);margin-bottom:calc(1.1*var(--u))}
.mgroup a{display:flex;gap:calc(1.1*var(--u));align-items:baseline;text-decoration:none;color:#cfc9bf;
          font-size:calc(1.22*var(--u));padding:calc(.4*var(--u)) 0;line-height:1.3}
.mgroup a span{font-family:var(--mono);font-size:calc(.9*var(--u));color:var(--dim);min-width:calc(2.6*var(--u))}
.mgroup a:hover{color:var(--gold)}
.mgroup a.cur{color:var(--gold)}
.mgroup a.cur span{color:var(--gold)}
#menu .hint{margin-top:calc(3.5*var(--u));font-family:var(--mono);font-size:calc(.95*var(--u));color:var(--dim);letter-spacing:.1em}
#menu .hint kbd{background:rgba(244,241,234,.09);border:1px solid var(--line);border-radius:3px;padding:2px 6px;color:var(--ink);font-family:inherit}

/* ---------- pantallas angostas / verticales ---------- */
@media (max-aspect-ratio:1/1){
  :root{--u:min(1.9vw,1.7778vh)}
  .cols,.cols.wide-left,.cols.wide-right{grid-template-columns:1fr;gap:calc(3*var(--u))}
  .vgrid.g2,.vgrid.g4{grid-template-columns:1fr}
  .vgrid.g1{grid-template-columns:1fr}
  .tl{grid-template-columns:repeat(3,1fr)}
  .slide{padding:calc(7*var(--u)) calc(5*var(--u)) calc(9*var(--u));justify-content:flex-start;overflow-y:auto}
}
@media print{.slide{position:static;opacity:1;visibility:visible;page-break-after:always;min-height:100vh}#chrome,#menu{display:none}}

/* ============================================================
   MÓDULOS DE LAS UNIDADES 1.2 Y 1.3
   ============================================================ */

/* ---------- comparación a dos columnas ---------- */
.vs2{display:grid;grid-template-columns:1fr 1fr;gap:calc(2*var(--u));margin-top:calc(2*var(--u))}
.vs2 .card{border:1px solid var(--line);border-radius:calc(.9*var(--u));padding:calc(1.8*var(--u))}
.vs2 .card .tag{
  font-family:var(--mono);font-size:calc(.92*var(--u));letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:calc(.9*var(--u))
}
.vs2 .card.b .tag{color:var(--rose)}
.vs2 .card h4{font-size:calc(2*var(--u));font-weight:400;line-height:1.15;margin:0 0 calc(1*var(--u))}
.vs2 .card p{font-size:calc(1.18*var(--u));margin:0 0 calc(.8*var(--u))}
.vs2 .card .from{
  margin-top:calc(1.2*var(--u));padding-top:calc(1.1*var(--u));border-top:1px solid var(--line);
  font-size:calc(1.02*var(--u));color:var(--dim)
}
.vs2 .card .from b{color:var(--ink);font-weight:400}

/* ---------- iconos de fotograma clave ---------- */
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(1.5*var(--u));margin-top:calc(2.2*var(--u))}
.keys .k{border:1px solid var(--line);border-radius:calc(.9*var(--u));padding:calc(1.5*var(--u))}
.keys .k .top{display:flex;align-items:center;gap:calc(1*var(--u));margin-bottom:calc(.9*var(--u))}
.keys .k svg{width:calc(2.4*var(--u));height:calc(2.4*var(--u));flex:0 0 auto}
.keys .k b{font-family:var(--mono);font-size:calc(1.05*var(--u));font-weight:400;color:var(--ink);letter-spacing:.02em}
.keys .k p{font-size:calc(1.05*var(--u));margin:0;color:var(--dim)}
.keys .k .es{color:var(--gold);font-size:calc(.92*var(--u));font-family:var(--mono);display:block;margin-top:calc(.2*var(--u))}

/* ---------- banco de pruebas de interpolación ---------- */
.bench{margin-top:calc(1.8*var(--u))}
.bench .row{
  display:grid;grid-template-columns:calc(3*var(--u)) calc(15*var(--u)) 1fr;align-items:center;
  gap:calc(1.3*var(--u));padding:calc(.85*var(--u)) 0;border-bottom:1px solid var(--line)
}
.bench .row:last-child{border-bottom:none}
.bench .row svg{width:calc(2.1*var(--u));height:calc(2.1*var(--u))}
.bench .nm{font-family:var(--mono);font-size:calc(1.05*var(--u));color:var(--ink);line-height:1.3}
.bench .nm small{display:block;color:var(--dim);font-size:calc(.88*var(--u));letter-spacing:.02em}
.bench .track{
  position:relative;height:calc(2.6*var(--u));border-radius:999px;
  background:rgba(244,241,234,.04);border:1px solid var(--line)
}
.bench .dots{position:absolute;inset:0;pointer-events:none}
.bench .dots i{
  position:absolute;top:50%;width:calc(.4*var(--u));height:calc(.4*var(--u));
  margin-top:calc(-.2*var(--u));border-radius:50%;background:var(--dim);opacity:.5;
  transform:translateX(-50%)
}
.bench .ball{
  position:absolute;top:50%;left:calc(1*var(--u));width:calc(1.45*var(--u));height:calc(1.45*var(--u));
  margin-top:calc(-.725*var(--u));border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 calc(.28*var(--u)) rgba(179,146,95,.16);will-change:transform
}
.bench .row.hold .ball{background:var(--rose);box-shadow:0 0 0 calc(.28*var(--u)) rgba(201,115,138,.16)}
.ctl{display:flex;gap:calc(1*var(--u));align-items:center;margin-top:calc(1.6*var(--u));flex-wrap:wrap}
.ctl button{
  font-family:var(--mono);font-size:calc(1*var(--u));letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:calc(.5*var(--u));
  padding:calc(.6*var(--u)) calc(1.3*var(--u));cursor:pointer;transition:border-color .18s,color .18s
}
.ctl button:hover{border-color:var(--gold);color:var(--gold)}
.ctl button.on{border-color:var(--gold);color:var(--gold)}
.ctl .leg{font-size:calc(1*var(--u));color:var(--dim)}
.ctl .leg b{color:var(--ink);font-weight:400}

/* ---------- gráfico de valores y velocidad ---------- */
.gwrap{display:grid;grid-template-columns:1fr 1fr;gap:calc(2*var(--u));margin-top:calc(1.6*var(--u))}
.gcard{border:1px solid var(--line);border-radius:calc(.9*var(--u));padding:calc(1.4*var(--u))}
.gcard .gt{
  font-family:var(--mono);font-size:calc(.95*var(--u));letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-bottom:calc(.9*var(--u))
}
.gcard svg{width:100%;height:auto;display:block}
.gcard .cap{font-size:calc(1*var(--u));color:var(--dim);margin-top:calc(.9*var(--u))}
.gax{stroke:var(--line);stroke-width:1;fill:none}
.gcurve{stroke:var(--gold);stroke-width:2.4;fill:none;stroke-linecap:round}
.gcurve.b{stroke:var(--rose)}
.gref{stroke:var(--dim);stroke-width:1.2;fill:none;stroke-dasharray:4 4;opacity:.5}
.glab{fill:var(--dim);font-family:var(--mono);font-size:11px}

/* ---------- tira de fotogramas ---------- */
.tiras{display:grid;gap:calc(1.6*var(--u));margin-top:calc(2*var(--u))}
.tira{display:grid;grid-template-columns:calc(11*var(--u)) 1fr;gap:calc(1.2*var(--u));align-items:center}
.tira .tl-lab{
  font-family:var(--mono);font-size:calc(1.05*var(--u));color:var(--ink);
  letter-spacing:.06em;text-align:right
}
.tira[data-tira="hold"] .tl-lab{color:var(--rose)}
.tira .cells{display:grid;grid-template-columns:repeat(12,1fr);gap:calc(.35*var(--u))}
.tira .cel{
  position:relative;height:calc(3.4*var(--u));border:1px solid var(--line);
  border-radius:calc(.3*var(--u));background:rgba(244,241,234,.03);
  opacity:.28;transition:opacity .18s
}
.tira .cel.on{opacity:1}
.tira .cel i{
  position:absolute;top:50%;left:0;width:calc(.9*var(--u));height:calc(.9*var(--u));
  margin-top:calc(-.45*var(--u));margin-left:calc(-.45*var(--u));border-radius:50%;
  background:var(--gold);transition:left .12s linear
}
.tira[data-tira="hold"] .cel i{background:var(--rose)}

/* ---------- combinaciones híbridas ---------- */
.combo{display:grid;gap:calc(1.2*var(--u));margin-top:calc(1.8*var(--u))}
.combo .c{
  display:grid;grid-template-columns:calc(14*var(--u)) 1fr;gap:calc(1.4*var(--u));align-items:center;
  border:1px solid var(--line);border-radius:calc(.8*var(--u));padding:calc(1.1*var(--u)) calc(1.4*var(--u))
}
.combo .pair{display:flex;align-items:center;gap:calc(.6*var(--u))}
.combo .pair svg{width:calc(1.9*var(--u));height:calc(1.9*var(--u))}
.combo .pair em{font-family:var(--mono);font-size:calc(.95*var(--u));color:var(--dim);font-style:normal;letter-spacing:.06em}
.combo .c p{font-size:calc(1.12*var(--u));margin:0}
.combo .c p b{color:var(--gold);font-weight:400;font-family:var(--mono);font-size:calc(1*var(--u))}

@media (max-aspect-ratio:1/1){
  .vs2,.gwrap{grid-template-columns:1fr}
  .keys{grid-template-columns:1fr 1fr}
  
  .bench .row{grid-template-columns:calc(2.6*var(--u)) calc(12*var(--u)) 1fr}
  .combo .c{grid-template-columns:1fr}
}

/* ════════════════════════════════════════════════════════════
   REGISTRO VISUAL CONTEMPORÁNEO · Unidades 1.2 y 1.3
   La Unidad 1 trata antecedentes y usa un registro editorial.
   Estos temas tratan práctica actual, así que la forma cambia:
   sans geométrica, alto contraste, acento eléctrico.
   ════════════════════════════════════════════════════════════ */
:root{
  --bg:#0b0b0f;
  --bg2:#15151d;
  --ink:#f4f4f8;
  --dim:#8b8b9c;
  --gold:#c6f24e;          /* acento principal */
  --gold-soft:#7d9b28;
  --rose:#8b6bff;          /* acento secundario */
  --line:rgba(244,244,248,.11);
  --serif:'Segoe UI Variable Display','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
}

/* retícula tenue en lugar del grano de película */
body::after{
  opacity:.5!important;
  background-image:
    linear-gradient(rgba(244,244,248,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,244,248,.028) 1px, transparent 1px)!important;
  background-size:calc(4*var(--u)) calc(4*var(--u))!important;
}
body{
  background:
    radial-gradient(90% 60% at 12% -10%, rgba(139,107,255,.16), transparent 60%),
    radial-gradient(70% 55% at 100% 8%, rgba(198,242,78,.10), transparent 62%),
    var(--bg)!important;
}

h1,h2,h3{font-weight:700;letter-spacing:-.032em}
h1{font-size:calc(5.1*var(--u))}
h2{font-size:calc(3.9*var(--u))}
h3{font-size:calc(2.8*var(--u))}
p{color:#c9c9d6}
strong{color:var(--ink);font-weight:650}
.eyebrow{letter-spacing:.2em;font-weight:600}

.cover .rule{width:calc(9*var(--u));height:calc(.5*var(--u));border-radius:99px}
.section{background:radial-gradient(120% 90% at 50% 40%, rgba(198,242,78,.10), transparent 62%)!important}
.section .num{
  font-family:var(--serif)!important;font-weight:800!important;letter-spacing:-.05em!important;
  -webkit-text-stroke:calc(.14*var(--u)) var(--gold-soft)!important;opacity:.42!important
}
.note{
  background:rgba(198,242,78,.07)!important;border-left:none!important;
  border:1px solid rgba(198,242,78,.22)!important;border-radius:calc(.7*var(--u))!important;
  color:#c2c2d0!important
}
.quote{border-color:var(--gold)!important}
.badge{border-radius:99px}
#hud button:hover,#menu .mgroup a:hover{color:var(--gold)}
.facade .play{backdrop-filter:blur(2px)}

/* ---------- aplicaciones, con demostración animada ---------- */
.usos{
  display:grid;grid-template-columns:repeat(5,1fr);gap:calc(1*var(--u));
  margin-top:calc(2.2*var(--u))
}
.usos > article{
  position:relative;border:1px solid var(--line);border-radius:calc(.9*var(--u));
  padding:calc(.85*var(--u));background:linear-gradient(180deg,rgba(255,255,255,.028),transparent);
  display:flex;flex-direction:column;gap:calc(.5*var(--u));overflow:hidden
}
.usos > article::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:calc(.22*var(--u));
  background:linear-gradient(90deg,var(--gold),transparent);opacity:.55
}
.usos .box{
  height:calc(3.7*var(--u));border-radius:calc(.5*var(--u));
  background:rgba(11,11,15,.55);display:grid;place-items:center;color:var(--gold)
}
.usos .gl{width:78%;height:auto}
.usos .n{
  font-family:var(--mono);font-size:calc(.88*var(--u));color:var(--dim);letter-spacing:.12em
}
.usos b{
  display:block;font-size:calc(1.18*var(--u));font-weight:650;color:var(--ink);
  line-height:1.22;letter-spacing:-.01em
}
.usos span{display:block;font-size:calc(1*var(--u));color:var(--dim);line-height:1.3}

/* animación de los glifos: en reposo salvo en la diapositiva activa */
.usos .gl *{animation-play-state:paused}
.slide.is-active .usos .gl *{animation-play-state:running}
.gl .s1,.gl .s2{animation:glSlide 3.2s cubic-bezier(.22,.9,.3,1) infinite}
.gl .s2{animation-delay:.22s}
.gl .pz{transform-origin:center;animation:glPulse 2.6s ease-in-out infinite}
.gl .pd{transform-origin:center;animation:glPulse 2.6s ease-in-out infinite .3s}
.gl .b1,.gl .b2,.gl .b3{transform-origin:50% 100%;animation:glGrow 3s cubic-bezier(.3,.8,.3,1) infinite}
.gl .b2{animation-delay:.18s}.gl .b3{animation-delay:.36s}
.gl .e1,.gl .e2,.gl .e3,.gl .e4,.gl .e5{transform-origin:50% 100%;animation:glBounce 1.1s ease-in-out infinite}
.gl .e2{animation-delay:.12s}.gl .e3{animation-delay:.24s}
.gl .e4{animation-delay:.36s}.gl .e5{animation-delay:.48s}
.gl .ln{stroke-dasharray:60;animation:glDash 3s ease-in-out infinite}
.gl .ring{stroke-dasharray:57;animation:glDash2 3s cubic-bezier(.4,.1,.2,1) infinite}
.gl .rip{transform-origin:28px 16px;animation:glRipple 2.4s ease-out infinite}
.gl .cur{animation:glCursor 2.4s cubic-bezier(.3,.8,.3,1) infinite}
.gl .c1,.gl .c2,.gl .c3{animation:glSlide 3.4s cubic-bezier(.22,.9,.3,1) infinite}
.gl .c2{animation-delay:.16s}.gl .c3{animation-delay:.32s}
.gl .f1{animation:glFade 3s ease-in-out infinite}
.gl .f2{animation:glFade 3s ease-in-out infinite 1.5s}
.gl .k1,.gl .k2,.gl .k3{transform-origin:center;transform-box:fill-box;animation:glPop 2.2s ease-in-out infinite}
.gl .k2{animation-delay:.2s}.gl .k3{animation-delay:.4s}

@keyframes glSlide{0%,6%{transform:translateX(calc(-3*var(--u)));opacity:0}
  22%,74%{transform:none;opacity:1}92%,100%{transform:translateX(calc(1.4*var(--u)));opacity:0}}
@keyframes glPulse{0%,100%{transform:scale(.9);opacity:.55}50%{transform:scale(1);opacity:1}}
@keyframes glGrow{0%,100%{transform:scaleY(.18)}50%{transform:scaleY(1)}}
@keyframes glBounce{0%,100%{transform:scaleY(.2)}50%{transform:scaleY(1)}}
@keyframes glDash{0%{stroke-dashoffset:60}55%,100%{stroke-dashoffset:0}}
@keyframes glDash2{0%{stroke-dashoffset:57}60%,100%{stroke-dashoffset:8}}
@keyframes glRipple{0%{transform:scale(.35);opacity:1}80%,100%{transform:scale(1.5);opacity:0}}
@keyframes glCursor{0%,100%{transform:translate(9px,4px)}45%,60%{transform:translate(25px,13px)}}
@keyframes glFade{0%,42%{opacity:1}55%,100%{opacity:.18}}
@keyframes glPop{0%,100%{transform:scale(.82);opacity:.5}50%{transform:scale(1);opacity:1}}

/* ---------- duraciones y formatos ---------- */
.durs{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(.9*var(--u));margin-top:calc(1.5*var(--u))}
.durs .d{
  border:1px solid var(--line);border-radius:calc(.9*var(--u));padding:calc(1.05*var(--u));
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)
}
.durs .d .v{
  font-family:var(--mono);font-size:calc(2.05*var(--u));color:var(--gold);
  letter-spacing:-.03em;line-height:1;display:block
}
.durs .d .v small{font-size:calc(1.1*var(--u));color:var(--dim);letter-spacing:0}
.durs .d b{display:block;font-size:calc(1.18*var(--u));font-weight:650;margin-top:calc(.8*var(--u));color:var(--ink)}
.durs .d p{font-size:calc(1.02*var(--u));margin:calc(.3*var(--u)) 0 0;color:var(--dim);max-width:none}
.ratios{display:flex;gap:calc(1.2*var(--u));align-items:flex-end;margin-top:calc(1.3*var(--u));flex-wrap:wrap}
.ratios .r{text-align:center}
.ratios .r i{
  display:block;border:1.5px solid var(--gold);border-radius:calc(.35*var(--u));
  opacity:.75;margin:0 auto calc(.5*var(--u))
}
.ratios .r span{font-family:var(--mono);font-size:calc(.92*var(--u));color:var(--dim);letter-spacing:.08em}

/* ---------- flujo de producción ---------- */
.flow{display:grid;grid-template-columns:repeat(7,1fr);gap:calc(.6*var(--u));margin-top:calc(1.9*var(--u))}
.flow .st{position:relative;padding-top:calc(2.2*var(--u))}
.flow .st::before{
  content:'';position:absolute;top:calc(.75*var(--u));left:0;right:0;height:2px;background:var(--line)
}
.flow .st::after{
  content:'';position:absolute;top:calc(.2*var(--u));left:0;width:calc(1.1*var(--u));height:calc(1.1*var(--u));
  border-radius:50%;background:var(--bg);border:2px solid var(--line)
}
.flow .st.key::after{border-color:var(--gold);background:var(--gold)}
.flow .st.key b{color:var(--gold)}
.flow .st b{display:block;font-size:calc(1.16*var(--u));font-weight:650;color:var(--ink);line-height:1.2}
.flow .st span{display:block;font-size:calc(.95*var(--u));color:var(--dim);margin-top:calc(.35*var(--u));line-height:1.35}

@media (max-aspect-ratio:1/1){
  .usos{grid-template-columns:repeat(2,1fr)}
  .durs{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:1fr 1fr}
  .flow .st::before,.flow .st::after{display:none}
}

/* densidad de la actividad y los graficos */
.s-taller .task li{font-size:calc(1.12*var(--u));margin-bottom:calc(.62*var(--u))}
.s-taller .biblio .row{padding:calc(.55*var(--u)) 0}
.s-taller .biblio .ref,.s-taller .biblio .yr{font-size:calc(1.02*var(--u))}
.s-graph .gcard{padding:calc(1*var(--u))}
.s-graph .gcard .cap{font-size:calc(.92*var(--u));margin-top:calc(.6*var(--u))}
.s-bench .bench .row{padding:calc(.6*var(--u)) 0}
.vgrid.g3{grid-template-columns:repeat(3,1fr);max-width:88%;margin-left:auto;margin-right:auto}
.vgrid.g3 .vmeta .t{font-size:calc(1.05*var(--u))}
.vgrid.g3 .vmeta .s{font-size:calc(.9*var(--u))}
@media (max-aspect-ratio:1/1){.vgrid.g3{grid-template-columns:1fr}}




























/* CL-MEJORAS-INICIO */

/* ════════════════════════════════════════════════════════════
   REVELADO PROGRESIVO  ·  módulo compartido
   La barra espaciadora descubre los elementos de la diapositiva
   uno por uno. Las flechas siguen saltando de lámina completa.

   Los elementos se ocultan ANTES del primer pintado y solo se
   les añade la transición después, para que nunca se vea el
   parpadeo de aparecer y desaparecer.
   ════════════════════════════════════════════════════════════ */
.clf{opacity:0!important;transform:translateY(calc(.6 * var(--u, 10px)))}
.clf-t{transition:opacity .3s ease, transform .3s cubic-bezier(.22,.9,.3,1)}
@media (prefers-reduced-motion:reduce){.clf-t{transition:none}}

/* Durante el montaje se suprime TODA transición del documento. Sin esto,
   los elementos que ya traen una transición propia —los botones de los
   selectores, por ejemplo— se ven desvanecerse al cargar la página. */
body.clf-montando *{transition:none!important;animation-duration:0s!important}

/* indicador discreto de cuántos elementos quedan */
#clf-hint{
  position:fixed;left:50%;bottom:calc(52px + 10px);transform:translateX(-50%);
  z-index:60;display:flex;gap:5px;align-items:center;pointer-events:none;
  opacity:0;transition:opacity .25s ease
}
#clf-hint.on{opacity:.8}
#clf-hint i{
  width:6px;height:6px;border-radius:50%;display:block;
  background:currentColor;opacity:.26;transition:opacity .2s ease,transform .2s ease
}
#clf-hint i.done{opacity:1;transform:scale(1.25)}

/* ════════════════════════════════════════════════════════════
   MODO CLARO · Unidades 1.2 y 1.3 (registro contemporáneo)
   El lima eléctrico es ilegible sobre blanco, así que en claro
   baja a oliva y el violeta asume el papel de acento vivo.
   ════════════════════════════════════════════════════════════ */
html[data-theme="light"]{
  --bg:#f2f3f6;
  --bg2:#ffffff;
  --ink:#11111a;
  --dim:#5d5d70;
  --gold:#5c7a0e;
  --gold-soft:#93b23f;
  --rose:#5b3fd6;
  --line:rgba(17,17,26,.13);
}
html[data-theme="light"] body{
  background:
    radial-gradient(90% 60% at 12% -10%, rgba(91,63,214,.10), transparent 60%),
    radial-gradient(70% 55% at 100% 8%, rgba(92,122,14,.09), transparent 62%),
    var(--bg)!important;
}
html[data-theme="light"] body::after{
  background-image:
    linear-gradient(rgba(17,17,26,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,17,26,.045) 1px, transparent 1px)!important
}
html[data-theme="light"] p{color:#3a3a48}
html[data-theme="light"] strong{color:#000}
html[data-theme="light"] .note{background:rgba(92,122,14,.09)!important;border-color:rgba(92,122,14,.28)!important;color:#41414f!important}
html[data-theme="light"] .section{background:radial-gradient(120% 90% at 50% 40%, rgba(92,122,14,.10), transparent 62%)!important}
html[data-theme="light"] .usos > article{background:linear-gradient(180deg,rgba(17,17,26,.035),transparent)}
html[data-theme="light"] .usos .box{background:rgba(17,17,26,.05)}
html[data-theme="light"] .durs .d,
html[data-theme="light"] .vs2 .card{background:linear-gradient(180deg,rgba(17,17,26,.03),transparent)}
html[data-theme="light"] .bench .track{background:rgba(17,17,26,.05)}
html[data-theme="light"] .bench .ball{box-shadow:0 0 0 calc(.28*var(--u)) rgba(92,122,14,.18)}
html[data-theme="light"] .tira .cel{background:rgba(17,17,26,.035)}
html[data-theme="light"] .flow .st::after{background:var(--bg)}
html[data-theme="light"] .flow .st.key::after{background:var(--gold)}
html[data-theme="light"] .vbox{background:#e6e7ec}
html[data-theme="light"] #chrome{background:linear-gradient(0deg,rgba(242,243,246,.96),rgba(242,243,246,0))}
html[data-theme="light"] #menu{background:rgba(242,243,246,.97)}
html[data-theme="light"] #lb{background:rgba(11,11,15,.93)}
html[data-theme="light"] #lb .lb-cap{color:#e8e8ee}
html[data-theme="light"] #hud button{border-color:var(--line)}
html[data-theme="light"] .section .num{opacity:.32}

/* ════════════════════════════════════════════════════════════
   AYUDA DE USO  ·  módulo compartido
   Vive en el cromo, nunca en la diapositiva: un botón en el HUD
   que abre el panel, y un aviso breve la primera vez que se abre
   la presentación en ese navegador.

   Los colores se toman de los tokens de cada presentación. Cada
   cadena de reserva prueba primero los nombres en inglés de las
   presentaciones antiguas y después los que usa el esqueleto del
   estándar, en español: sin eso, un mazo nuevo caía al #12161f de
   reserva con el color heredado, y en modo claro salía texto negro
   sobre panel negro.
   ════════════════════════════════════════════════════════════ */
#clf-ayuda-btn.clf-suelto{
  position:fixed;right:14px;bottom:58px;z-index:900;
  width:30px;height:30px;border-radius:50%;font-size:14px;line-height:1;
  background:var(--surface,var(--fondo-2,var(--bg-2,var(--bg2,transparent))));
  color:inherit;opacity:.55;
  border:1px solid var(--line,var(--linea,var(--line-soft,rgba(127,127,127,.4))))
}
#clf-ayuda-btn.clf-suelto:hover{opacity:1}

#clf-ayuda{
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;
  background:rgba(7,10,16,.55);opacity:0;transition:opacity .18s ease
}
/* Imprescindible: el atributo hidden no puede con un display de autor, y
   sin esta regla la capa se queda encima de la lámina, invisible, robando
   cada clic de los módulos interactivos. */
#clf-ayuda[hidden]{display:none}
#clf-ayuda.on{opacity:1}
@media (prefers-reduced-motion:reduce){#clf-ayuda{transition:none}}

#clf-ayuda .clf-panel{
  position:relative;width:min(520px,100%);max-height:88vh;overflow:auto;
  padding:26px 28px 24px;border-radius:10px;
  background:var(--surface,var(--fondo-2,var(--bg-2,var(--bg2,var(--bg,var(--fondo,#12161f))))));
  color:var(--txt,var(--texto,inherit));
  border:1px solid var(--line,var(--linea,var(--line-soft,var(--linea-suave,rgba(127,127,127,.35)))));
  box-shadow:0 12px 40px rgba(0,0,0,.28);
  font-family:var(--sans,system-ui,"Segoe UI",Arial,sans-serif);
  font-size:14px;line-height:1.5;text-align:left
}
#clf-ayuda h2{
  font-size:17px;line-height:1.25;margin:0 0 4px;font-weight:700;
  color:var(--txt,var(--texto,inherit));letter-spacing:0
}
#clf-ayuda .clf-sub{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--accent,var(--acento,var(--gold,currentColor)));margin:0 0 14px
}
#clf-ayuda dl{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:0;align-items:baseline}
#clf-ayuda dt{white-space:nowrap;display:flex;gap:4px}
#clf-ayuda dd{margin:0;color:var(--txt-2,var(--texto-2,var(--dim,inherit)))}
#clf-ayuda .clf-pie{
  margin:16px 0 0;padding-top:14px;font-size:12.5px;
  border-top:1px solid var(--line-soft,var(--linea-suave,var(--line,var(--linea,rgba(127,127,127,.25)))));
  color:var(--txt-3,var(--texto-3,var(--dim,inherit)))
}
#clf-ayuda .clf-cerrar{
  position:absolute;top:10px;right:12px;font-size:20px;line-height:1;
  padding:4px 6px;opacity:.5;background:none;border:0;color:inherit;cursor:pointer
}
#clf-ayuda .clf-cerrar:hover{opacity:1}

#clf-ayuda kbd,#clf-onboard kbd{
  font-family:var(--mono,ui-monospace,Consolas,monospace);font-size:11.5px;
  padding:2px 6px;border-radius:4px;white-space:nowrap;
  border:1px solid var(--line,var(--linea,var(--line-soft,rgba(127,127,127,.45))));
  background:var(--surface-2,var(--fondo-3,var(--bg-2,var(--bg2,transparent))));
  color:var(--txt,var(--texto,inherit))
}

/* aviso de la primera visita */
#clf-onboard{
  position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(8px);
  z-index:900;width:min(430px,calc(100vw - 32px));
  padding:14px 16px;border-radius:9px;
  background:var(--surface,var(--fondo-2,var(--bg-2,var(--bg2,var(--bg,var(--fondo,#12161f))))));
  color:var(--txt,var(--texto,inherit));
  border:1px solid var(--line,var(--linea,var(--line-soft,var(--linea-suave,rgba(127,127,127,.35)))));
  box-shadow:0 8px 28px rgba(0,0,0,.22);
  font-family:var(--sans,system-ui,"Segoe UI",Arial,sans-serif);
  font-size:13px;line-height:1.45;
  opacity:0;transition:opacity .3s ease,transform .3s ease
}
#clf-onboard.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:reduce){#clf-onboard{transition:none}}
#clf-onboard p{margin:0 0 4px}
#clf-onboard p:last-of-type{margin:0}
#clf-onboard .clf-acciones{display:flex;gap:14px;align-items:center;margin-top:12px}
#clf-onboard button{
  font:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0
}
#clf-onboard .clf-ok{
  padding:5px 12px;border-radius:5px;font-weight:600;font-size:12.5px;
  background:var(--accent,var(--acento,var(--gold,currentColor)));
  color:var(--onaccent,var(--bg,var(--fondo,#fff)))
}
#clf-onboard .clf-todo{font-size:12.5px;opacity:.7;text-decoration:underline}
#clf-onboard .clf-todo:hover{opacity:1}

/* fuera del sitio autorizado no se pinta nada del cromo añadido */
.cl-lock #clf-ayuda-btn,.cl-lock #clf-ayuda,.cl-lock #clf-onboard,.cl-lock #clf-hint{display:none!important}
@media print{#clf-ayuda-btn,#clf-ayuda,#clf-onboard{display:none!important}}

/* CL-MEJORAS-FIN */