/*!
 * DPGA · Los doce principios de la animación
 * (c) 2026 L.D.G. Luis E. Maldonado Gil - CodeLibri
 * aula.codelibri.com.mx - Todos los derechos reservados.
 * ref CL-DPGA-U14-2026-06CF
 */
/* ============================================================
   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)}
/* Una dirección web no es prosa: en mono se distingue de la frase que la
   rodea y se copia sin dudar dónde empieza y dónde acaba. */
.biblio .ref .url{font-family:var(--mono);font-size:calc(1.2*var(--u));color:var(--gold)}

/* ---------- 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}}
















/* ════════════════════════════════════════════════════════════
   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}

/* ════════════════════════════════════════════════════════════
   UNIDAD 1.4 · banco de demostración de los principios
   Cada principio se compara consigo mismo: la misma acción sin
   aplicarlo y aplicándolo. Todo se dibuja con formas y CSS.
   ════════════════════════════════════════════════════════════ */

.demo{display:grid;gap:calc(1.1*var(--u));margin-top:calc(1.2*var(--u))}
.carril{
  position:relative;border:1px solid var(--line);border-radius:calc(.8*var(--u));
  background:rgba(255,255,255,.022);overflow:hidden;
}
.carril .etq{
  position:absolute;top:calc(.6*var(--u));left:calc(.9*var(--u));z-index:3;
  font-family:var(--mono);font-size:calc(.92*var(--u));letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);pointer-events:none
}
.carril[data-v="b"] .etq{color:var(--gold)}
.carril .suelo{
  position:absolute;left:0;right:0;bottom:calc(1.4*var(--u));height:1px;
  background:var(--line)
}
.ob{
  position:absolute;left:0;bottom:calc(1.4*var(--u));display:block;
  width:calc(2.7*var(--u));height:calc(2.7*var(--u));border-radius:50%;
  background:var(--dim);will-change:transform;transform-origin:50% 100%
}
.carril[data-v="b"] .ob{background:var(--gold)}
.ob.o2{width:calc(1.3*var(--u));height:calc(1.3*var(--u));background:var(--rose);opacity:.9}
.ob.cuadro{border-radius:calc(.4*var(--u));transform-origin:50% 100%}
.traza{position:absolute;inset:0;pointer-events:none}
.traza i{
  position:absolute;width:calc(.42*var(--u));height:calc(.42*var(--u));border-radius:50%;
  background:var(--dim);opacity:.4;transform:translate(-50%,50%)
}
.carril[data-v="b"] .traza i{background:var(--gold);opacity:.45}

/* tira de fotogramas para acción directa y pose a pose */
.tira14{display:grid;grid-template-columns:repeat(9,1fr);gap:calc(.32*var(--u));margin-top:calc(.7*var(--u))}
.tira14 .cd{
  position:relative;height:calc(4.2*var(--u));border:1px solid var(--line);
  border-radius:calc(.3*var(--u));background:rgba(255,255,255,.02);
  opacity:.2;transition:opacity .2s ease
}
.tira14 .cd.on{opacity:1}
.tira14 .cd.clave{border-color:var(--gold)}
.tira14 .cd i{
  position:absolute;bottom:calc(.4*var(--u));left:50%;width:calc(1.1*var(--u));height:calc(1.1*var(--u));
  margin-left:calc(-.55*var(--u));border-radius:50%;background:var(--dim)
}
.tira14 .cd.clave i{background:var(--gold)}

/* escena estática para puesta en escena, volumen y atractivo */
.escena{
  position:relative;height:calc(13*var(--u));border:1px solid var(--line);
  border-radius:calc(.8*var(--u));background:rgba(255,255,255,.022);overflow:hidden
}
.escena .fig{
  position:absolute;transition:opacity .4s ease, filter .4s ease, transform .4s ease
}
.escena .fig.apagada{opacity:.22;filter:grayscale(1)}
.pares{display:grid;grid-template-columns:1fr 1fr;gap:calc(1.2*var(--u));margin-top:calc(1.2*var(--u))}
.pares .p{position:relative}
.pares .p > .cap{
  font-family:var(--mono);font-size:calc(.92*var(--u));letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);margin-bottom:calc(.5*var(--u));display:block
}
.pares .p.si > .cap{color:var(--gold)}

/* ficha del principio */
.pnum{
  font-family:var(--mono);font-size:calc(1.05*var(--u));letter-spacing:.16em;
  color:var(--gold);display:block;margin-bottom:calc(.5*var(--u))
}
.pen{
  font-family:var(--mono);font-size:calc(1.15*var(--u));color:var(--dim);
  letter-spacing:.02em;display:block;margin-top:calc(.4*var(--u))
}
.docegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(.8*var(--u));margin-top:calc(1.8*var(--u))}
.docegrid div{
  border:1px solid var(--line);border-radius:calc(.7*var(--u));padding:calc(.9*var(--u)) calc(1*var(--u));
  display:grid;grid-template-columns:calc(2.2*var(--u)) 1fr;gap:calc(.6*var(--u));align-items:baseline
}
.docegrid b{font-family:var(--mono);font-size:calc(.95*var(--u));color:var(--gold);font-weight:400}
.docegrid span{font-size:calc(1.16*var(--u));color:var(--ink);line-height:1.25}
.docegrid em{display:block;font-style:normal;font-size:calc(.92*var(--u));color:var(--dim);font-family:var(--mono)}

@media (max-aspect-ratio:1/1){
  .docegrid{grid-template-columns:1fr 1fr}
  .pares{grid-template-columns:1fr}
  .tira14{grid-template-columns:repeat(5,1fr)}
}

/* ---------- el principio en un ejemplo animado ----------
   Va detrás de cada principio. La demostración de la lámina anterior
   se dibuja con formas y CSS; aquí el mismo principio se ve sobre una
   figura animada de verdad, y la explicación ya se dio, así que la
   imagen manda y el texto se reduce a qué hay que mirar.

   La medida no es un capricho: el escenario mide 100u de ancho por
   56.25 de alto y la lámina se come 13 de relleno lateral y 11 de
   vertical, así que quedan 87 x 45.25. El rótulo, el título y el pie
   ocupan unas 15 con el crédito, y estos GIF son tiras de 2.155:1 — a 60u
   de ancho caen en 27.8 de alto y el conjunto cabe con holgura. Más
   grande se veía mejor, pero el pie invadía la barra de estado. */
.ejemplo{margin-top:calc(1.4*var(--u));max-width:calc(60*var(--u))}
.ejemplo figure{margin:0}
/* Los GIF traen su propio fondo gris oscuro, a un paso del de la
   lámina: basta un filete para separarlos, sin panel ni relleno. */
.ejemplo img{
  display:block;width:100%;height:auto;
  border:1px solid var(--line);border-radius:calc(.7*var(--u));background:var(--bg2)
}
/* El figcaption general de la presentación es un rótulo: mono, versalitas
   y muy espaciado. Aquí es una frase que se lee, así que hay que deshacer
   las tres cosas —heredarlas dejaba el pie entero en mayúsculas—. */
.ejemplo figcaption{
  margin-top:calc(.9*var(--u));font-family:var(--sans);font-size:calc(1.06*var(--u));
  letter-spacing:normal;text-transform:none;color:#c2c2d0;line-height:1.4;max-width:64ch
}
.ejemplo figcaption b{
  font-family:var(--mono);font-size:calc(.9*var(--u));letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);font-weight:400;margin-right:calc(.8*var(--u))
}
/* La procedencia va pegada a la imagen, no al pie de la lámina: es de
   la imagen y de nadie más. */
.ejemplo .fuente{
  display:block;margin-top:calc(.5*var(--u));
  font-family:var(--mono);font-size:calc(.82*var(--u));color:var(--dim);letter-spacing:.02em
}

/* En vertical sobra alto y falta ancho: el GIF ocupa todo lo que hay. */
@media (max-aspect-ratio:1/1){
  .ejemplo{max-width:100%}
}















/* 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 */