/*!
 * DPGA · Antecedentes y técnicas 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-U1-2026-5BB8
 */
/* ============================================================
   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}
/* Cuando el archivo no esta —la version publicada no lo lleva— el hueco
   explica por que en vez de quedarse en negro. */
#lb .lb-box .sinvideo{position:absolute;inset:0;margin:0;max-width:none;display:flex;
  align-items:center;justify-content:center;padding:calc(4*var(--u));background:#101014}
#lb .lb-box .sinvideo span{max-width:calc(46*var(--u));font-size:calc(1.5*var(--u));
  line-height:1.65;color:#d8d4cc;text-align:left}
#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}}




























/* 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 · Unidad 1 (registro editorial)
   Papel cálido, tinta oscura y dorado profundo para conservar
   el carácter de grabado antiguo también en claro.
   ════════════════════════════════════════════════════════════ */
html[data-theme="light"]{
  --bg:#f4f1e8;
  --bg2:#fffdf7;
  --ink:#171510;
  --dim:#6b6458;
  --gold:#8a6b34;
  --gold-soft:#b39a6c;
  --rose:#a8465f;
  --line:rgba(23,21,16,.16);
}
html[data-theme="light"] body::after{opacity:.03}
html[data-theme="light"] p{color:#3c3830}
html[data-theme="light"] strong{color:#000}
html[data-theme="light"] .plate{box-shadow:0 1px 3px rgba(23,21,16,.14)}
html[data-theme="light"] .photo img{filter:none}
html[data-theme="light"] .note{background:rgba(138,107,52,.10);color:#4a4438}
html[data-theme="light"] .vbox{background:#e9e4d7}
html[data-theme="light"] .facade .play{border-color:var(--gold)}
html[data-theme="light"] #chrome{background:linear-gradient(0deg,rgba(244,241,232,.96),rgba(244,241,232,0))}
html[data-theme="light"] #menu{background:rgba(244,241,232,.97)}
html[data-theme="light"] #lb{background:rgba(23,21,16,.92)}
html[data-theme="light"] #lb .lb-cap{color:#e8e4da}
html[data-theme="light"] .section .num{opacity:.3}
html[data-theme="light"] #hud button{border-color:var(--line)}

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