/* ------------------------------------------------------------------
     Línea gráfica Disrupt by Treid
     fondo #080808 · texto #F0F0EF · superficie #0F0F0F · borde blanco 6%
     radius 0 · display Bebas Neue · texto Barlow · rótulos Barlow Condensed
     Monocromo por definición: el único color del deck viene de las piezas.
     ------------------------------------------------------------------ */
  :root{
    --fondo:#080808;
    --superficie:#0f0f0f;
    --tinta:#f0f0ef;
    --mudo:#666666;
    --tenue:#9a9a98;
    --borde:rgba(255,255,255,.06);
    --borde-fuerte:rgba(255,255,255,.16);
    --disp:"Bebas Neue","Arial Narrow",sans-serif;
    --cond:"Barlow Condensed","Arial Narrow",sans-serif;
    --texto:"Barlow",-apple-system,"Helvetica Neue",Arial,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0;border-radius:0}
  html,body{height:100%;background:var(--fondo);color:var(--tinta);
    font-family:var(--texto);-webkit-font-smoothing:antialiased;overflow:hidden}

  #deck{position:relative;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center}

  .slide{
    container-type:size;
    position:absolute;width:min(100vw, calc(100vh * 16 / 9));height:min(100vh, calc(100vw * 9 / 16));
    background:var(--fondo);display:none;flex-direction:column;
    padding:4.4cqmin 5.2cqmin 3.2cqmin;overflow:hidden;
  }
  .slide.on{display:flex}

  /* ---------- tipografía Disrupt ---------- */
  .rotulo{font-family:var(--cond);font-size:1.4cqmin;letter-spacing:.3em;text-transform:uppercase;
    color:var(--mudo);font-weight:600}
  h1,h2{font-family:var(--disp);font-weight:400;letter-spacing:.012em;line-height:.92}
  h1{font-size:9.6cqmin}
  h2{font-size:5.6cqmin;max-width:26ch}
  .lead{font-size:1.95cqmin;line-height:1.52;color:var(--tenue);max-width:50ch;font-weight:400}
  .lead strong{font-weight:600;color:var(--tinta)}
  .big{font-family:var(--disp);font-size:21cqmin;line-height:.8;font-weight:400;letter-spacing:-.01em}

  .head{margin-bottom:3.4cqmin;flex:0 0 auto}
  .head .rotulo{margin-bottom:1.6cqmin;display:block}
  .body{flex:1 1 auto;display:flex;gap:4.4cqmin;min-height:0}
  .col{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1.9cqmin}

  .foot{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;
    padding-top:1.9cqmin;margin-top:2cqmin;border-top:1px solid var(--borde);
    font-family:var(--cond);font-size:1.25cqmin;color:#4a4a48;letter-spacing:.14em;text-transform:uppercase}
  .foot img{height:1.5cqmin;width:auto;opacity:.5}

  /* ---------- portada ---------- */
  .cover{padding:0;position:relative;justify-content:flex-end}
  .cover img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    opacity:.72}
  .cover .veil{position:absolute;inset:0;
    background:linear-gradient(80deg, rgba(8,8,8,.97) 24%, rgba(8,8,8,.62) 58%, rgba(8,8,8,.15) 100%)}
  .cover .marca{position:absolute;top:5cqmin;left:6cqmin}
  .cover .marca img{height:3cqmin;width:auto}
  .cover .inner{position:relative;padding:0 6cqmin 6cqmin;max-width:76%}
  .cover h1{font-size:11.5cqmin;margin:2.2cqmin 0 3.2cqmin}
  /* titular de dos líneas con un año gigante al costado: el año se dimensiona
     para que su altura de mayúscula cubra desde el tope de la línea 1 hasta la
     base de la línea 2 */
  .cover .tit-anio{display:flex;align-items:flex-end;gap:3.4cqmin;
    margin:2.2cqmin 0 3.2cqmin}
  .cover .tit-anio h1{margin:0;flex:0 0 auto}
  .cover .tit-anio .anio{font-family:var(--disp);font-weight:400;font-size:26.5cqmin;
    line-height:.72;color:var(--tinta);opacity:.26;letter-spacing:-.01em;
    flex:0 0 auto;position:relative;top:-.012em}
  .cover .sub{font-family:var(--cond);font-size:1.85cqmin;color:var(--tenue);font-weight:500;
    letter-spacing:.16em;text-transform:uppercase}

  /* ---------- tablas ---------- */
  table{width:100%;border-collapse:collapse;font-size:1.85cqmin}
  th{font-family:var(--cond);text-align:left;font-size:1.2cqmin;letter-spacing:.22em;text-transform:uppercase;
    color:var(--mudo);font-weight:600;padding:0 0 1.3cqmin;border-bottom:1px solid var(--borde-fuerte)}
  td{padding:1.5cqmin 0;border-bottom:1px solid var(--borde);vertical-align:top;color:var(--tenue)}
  td:first-child{color:var(--tinta);font-weight:500;padding-right:2.4cqmin}
  tr.destacada td{color:var(--tinta);font-weight:600}
  tr.destacada td.num:last-child{font-family:var(--disp);font-size:3cqmin;line-height:.9;font-weight:400}
  .nuestro{color:var(--tinta);font-weight:600}
  .suyo{color:#5a5a58}
  td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

  /* ---------- imágenes ---------- */
  .par{display:flex;gap:2.6cqmin;align-items:stretch;height:100%}
  .par figure{flex:1;min-width:0;display:flex;flex-direction:column;gap:1cqmin}
  .par img{width:100%;flex:1;min-height:0;object-fit:cover;object-position:center;
    border:1px solid var(--borde)}
  figcaption{font-family:var(--cond);font-size:1.2cqmin;color:var(--mudo);letter-spacing:.16em;
    text-transform:uppercase;font-weight:500}

  .rejilla{display:grid;grid-template-columns:repeat(5,1fr);gap:1.3cqmin;height:100%}
  .rejilla figure{display:flex;flex-direction:column;gap:.85cqmin;min-height:0}
  .rejilla img{width:100%;flex:1;min-height:0;object-fit:cover;border:1px solid var(--borde)}
  .rejilla figcaption{font-family:var(--disp);font-size:1.9cqmin;letter-spacing:.04em;
    text-transform:none;color:var(--tinta);font-weight:400;line-height:1}
  .rejilla figcaption span{display:block;font-family:var(--cond);font-size:1.15cqmin;color:var(--mudo);
    font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin-top:.5cqmin}

  /* ---------- fichas de dato ---------- */
  .fichas{display:flex;gap:2.2cqmin}
  .ficha{flex:1;border-top:1px solid var(--borde-fuerte);padding-top:1.5cqmin}
  .ficha .n{font-family:var(--disp);font-size:4.6cqmin;line-height:.86;color:var(--tinta);font-weight:400}
  .ficha .t{font-family:var(--cond);font-size:1.3cqmin;letter-spacing:.16em;text-transform:uppercase;
    color:var(--tinta);font-weight:600;margin:.8cqmin 0 .5cqmin}
  .ficha .d{font-size:1.45cqmin;color:var(--mudo);line-height:1.35}

  /* ---------- bandas ---------- */
  .bandas{display:flex;flex-direction:column;gap:1.1cqmin;justify-content:center;height:100%}
  .banda{padding:1.9cqmin 2.4cqmin;border-left:2px solid var(--tinta);background:var(--superficie)}
  .banda.b2{border-left-color:#4a4a48;background:rgba(255,255,255,.014)}
  .banda.b3{border-left-color:#262624;background:transparent}
  .banda .r{font-family:var(--cond);font-size:1.2cqmin;letter-spacing:.2em;text-transform:uppercase;
    color:var(--mudo);font-weight:600}
  .banda .k{font-size:1.8cqmin;margin-top:.7cqmin;color:var(--tenue);line-height:1.45}
  .banda.b1 .k{color:var(--tinta)}
  .banda.b1 .r{color:var(--tinta)}

  /* ---------- preguntas ---------- */
  ol.preg{list-style:none;counter-reset:p;display:flex;flex-direction:column;gap:1.3cqmin}
  ol.preg li{counter-increment:p;display:flex;gap:1.9cqmin;align-items:baseline;
    padding-bottom:1.3cqmin;border-bottom:1px solid var(--borde)}
  ol.preg li::before{content:counter(p,decimal-leading-zero);font-family:var(--disp);font-size:2.9cqmin;
    color:var(--mudo);min-width:3.4cqmin;line-height:1}
  ol.preg .q{font-size:1.9cqmin;color:var(--tinta);font-weight:600;line-height:1.3}
  ol.preg .w{font-size:1.45cqmin;color:var(--mudo);margin-top:.35cqmin;line-height:1.35}

  .cierre{margin-top:2cqmin;font-family:var(--disp);font-size:3.4cqmin;color:var(--tinta);
    line-height:1.02;letter-spacing:.01em;max-width:24ch}

  /* ---------- esquemas en vector ---------- */
  svg.esq{width:100%;height:auto;display:block}
  svg.esq .traz{fill:none;stroke:var(--tinta);stroke-width:1.4}
  svg.esq .traz-tenue{fill:none;stroke:#3a3a38;stroke-width:1.4}
  svg.esq .relleno{fill:var(--tinta)}
  svg.esq .relleno-tenue{fill:#2a2a28}
  svg.esq text{font-family:"Barlow Condensed","Arial Narrow",sans-serif;
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;fill:var(--mudo);font-weight:600}
  svg.esq text.dato{font-family:"Bebas Neue",sans-serif;font-size:24px;letter-spacing:.02em;
    fill:var(--tinta);text-transform:none;font-weight:400}
  svg.esq text.viva{fill:var(--tinta)}

  .ficha-tec{display:flex;gap:2.6cqmin;padding-top:1.4cqmin;margin-top:1.4cqmin;
    border-top:1px solid var(--borde)}
  .ficha-tec div{flex:1}
  .ficha-tec .e{font-family:var(--cond);font-size:1.1cqmin;letter-spacing:.2em;text-transform:uppercase;
    color:var(--mudo);font-weight:600;display:block;margin-bottom:.35cqmin}
  .ficha-tec .v{font-size:1.5cqmin;color:var(--tenue);line-height:1.3}

  /* ---------- mockup de pantalla de teléfono ---------- */
  .fonos{display:flex;gap:2.6cqmin;align-items:stretch;justify-content:center;
    width:100%;height:100%;padding:.5cqmin 0}
  .fono{flex:0 1 auto;max-width:27cqmin;display:flex;flex-direction:column;
    align-items:center;min-height:0;min-width:0}
  /* un .fono que contiene un .iphone no limita el ancho: la altura manda y el
     ancho lo calcula el aspect-ratio del teléfono */
  .fono:has(.iphone){max-width:none}
  .fono .marco{flex:1;display:flex;flex-direction:column;min-height:0;
    border:1px solid var(--borde-fuerte);background:var(--superficie);padding:.9cqmin}
  .fono .tope{display:flex;justify-content:space-between;align-items:center;
    padding-bottom:.7cqmin;margin-bottom:.9cqmin;border-bottom:1px solid var(--borde);
    font-family:var(--cond);font-size:1cqmin;letter-spacing:.18em;text-transform:uppercase;
    color:var(--mudo);font-weight:600}
  .fono .tope b{color:var(--tinta);font-weight:600}
  .fono .pantalla{flex:1;display:flex;flex-direction:column;gap:.7cqmin;min-height:0;overflow:hidden}
  .fono figcaption{font-family:var(--cond);font-size:1.05cqmin;letter-spacing:.2em;
    text-transform:uppercase;color:var(--mudo);margin-top:.9cqmin;text-align:center}

  /* burbujas de conversación */
  .burbuja{font-size:1.15cqmin;line-height:1.35;color:var(--tenue);
    background:rgba(255,255,255,.05);padding:.7cqmin .8cqmin;max-width:86%}
  .burbuja b{color:var(--tinta);font-weight:600}
  .burbuja.propia{align-self:flex-end;background:rgba(255,255,255,.11);color:var(--tinta)}

  /* filas de ranking */
  .rank{display:flex;align-items:baseline;gap:.7cqmin;padding:.5cqmin 0;
    border-bottom:1px solid var(--borde)}
  .rank .p{font-family:var(--disp);font-size:1.9cqmin;color:var(--mudo);
    flex:0 0 2.2cqmin;line-height:1}
  .rank .nm{flex:1;font-size:1.15cqmin;color:var(--tenue);line-height:1.2}
  .rank .v{font-family:var(--disp);font-size:1.7cqmin;color:var(--tinta);
    font-variant-numeric:tabular-nums;line-height:1}
  .rank.yo{background:rgba(255,255,255,.07);padding-left:.5cqmin;padding-right:.5cqmin}
  .rank.yo .p,.rank.yo .nm{color:var(--tinta)}

  /* barra de progreso dentro de la pantalla */
  .prog{height:2px;background:rgba(255,255,255,.12);margin-top:.2cqmin}
  .prog i{display:block;height:100%;background:var(--tinta)}

  /* ---------- meme ----------
     Formato real de meme: bloque de texto sobre fondo claro y la imagen debajo.
     El fondo blanco es deliberado, es una pieza y se muestra como se va a ver. */
  .memes{display:flex;gap:2.4cqmin;height:100%;align-items:stretch}
  .memes figure{flex:1;min-width:0;display:flex;flex-direction:column;gap:1cqmin}
  .meme{flex:1;min-height:0;display:flex;flex-direction:column;background:#fff;overflow:hidden}
  .meme .txt{flex:0 0 auto;padding:1.15cqmin 1.3cqmin;color:#0d0d0d;font-family:var(--texto);
    font-size:1.42cqmin;line-height:1.28;font-weight:600}
  .meme .txt i{display:block;font-style:normal;color:#6a6a6a}
  .meme img{width:100%;flex:1;min-height:0;object-fit:cover;display:block}

  /* ---------- mockup de dispositivo ----------
     Excepción deliberada al radius 0: un teléfono es una pieza que se fotografía,
     no un elemento de la interfaz del deck. Mismo criterio que el color. */
  /* aspect-ratio del CUERPO del teléfono (71 × 147 mm en un iPhone Pro),
     no el de la pantalla: el bisel lo hace más ancho de lo que sugiere 19.5:9 */
  .iphone{position:relative;flex:0 0 auto;width:26cqmin;height:auto;
    aspect-ratio:71/147;
    background:#050505;border:.42cqmin solid #17171a;border-radius:2.6cqmin;
    /* el spread negativo mantiene la sombra debajo del teléfono. Con blur
       amplio y sin spread, la sombra del teléfono de la derecha se pintaba
       encima del de la izquierda (el segundo se pinta después) y dejaba una
       banda oscura sobre su borde derecho. */
    box-shadow:0 0 0 .16cqmin rgba(255,255,255,.13),
               0 1.4cqmin 2.8cqmin -1.2cqmin rgba(0,0,0,.75);
    padding:.42cqmin;display:flex;flex-direction:column;overflow:hidden}
  .iphone .isla{position:absolute;top:1.05cqmin;left:50%;transform:translateX(-50%);
    width:6.2cqmin;height:1.45cqmin;background:#000;border-radius:1cqmin;z-index:6}
  .iphone .app{flex:1;border-radius:2.25cqmin;overflow:hidden;display:flex;
    flex-direction:column;min-height:0;position:relative}

  /* ---------- interfaz WhatsApp ---------- */
  .wa{flex:1;display:flex;flex-direction:column;min-height:0;background:#0b141a}
  .wa .top{background:#202c33;padding:3.1cqmin .8cqmin .65cqmin;display:flex;
    align-items:center;gap:.6cqmin;flex:0 0 auto}
  .wa .top .ava{width:2.5cqmin;height:2.5cqmin;border-radius:50%;flex:0 0 auto;
    background:linear-gradient(150deg,#6d5ce0,#4a3bb8);display:flex;align-items:center;
    justify-content:center;font-family:var(--disp);font-size:1.4cqmin;color:#fff}
  .wa .top .id{min-width:0;line-height:1.15}
  .wa .top .id b{display:block;font-size:1.15cqmin;color:#e9edef;font-weight:600}
  .wa .top .id span{font-size:.85cqmin;color:#8696a0}
  /* justify-content:flex-end deja la conversación pegada abajo y recorta por
     arriba, igual que un chat real recién abierto */
  .wa .chat{flex:1;min-height:0;padding:.8cqmin .65cqmin;display:flex;
    flex-direction:column;justify-content:flex-end;gap:.42cqmin;overflow:hidden;
    background:#0b141a url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g fill='none' stroke='%23ffffff' stroke-opacity='.02' stroke-width='1'><circle cx='10' cy='10' r='3'/><circle cx='30' cy='26' r='4'/></g></svg>")}
  .wa .dia{align-self:center;flex:0 0 auto;background:#182229;color:#8696a0;
    font-size:.72cqmin;letter-spacing:.1em;text-transform:uppercase;
    padding:.25cqmin .55cqmin;border-radius:.5cqmin;margin:.15cqmin 0}
  .wa .msg{max-width:84%;flex:0 0 auto;padding:.42cqmin .58cqmin .3cqmin;font-size:.94cqmin;
    line-height:1.32;border-radius:.75cqmin;position:relative}
  .wa .msg.in{background:#202c33;color:#e9edef;align-self:flex-start;border-top-left-radius:.1cqmin}
  .wa .msg.out{background:#005c4b;color:#e9edef;align-self:flex-end;border-top-right-radius:.1cqmin}
  .wa .msg b{color:#fff;font-weight:700}
  .wa .msg .h{display:block;font-size:.72cqmin;color:rgba(233,237,239,.45);
    text-align:right;margin-top:.15cqmin;letter-spacing:.02em}
  .wa .msg.out .h::after{content:" ✓✓";color:#53bdeb}
  .wa .barra{flex:0 0 auto;background:#0b141a;padding:.55cqmin .7cqmin 1cqmin;display:flex;gap:.5cqmin;align-items:center}
  .wa .barra .campo{flex:1;background:#202c33;border-radius:1.2cqmin;padding:.45cqmin .7cqmin;
    font-size:.95cqmin;color:#8696a0}
  .wa .barra .env{width:2cqmin;height:2cqmin;border-radius:50%;background:#00a884;flex:0 0 auto}

  /* ---------- interfaz gamificada / ficha de peleador ---------- */
  .gapp{flex:1;display:flex;flex-direction:column;min-height:0;position:relative;background:#07070a}
  .gapp .telon{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3}
  .gapp .capa{position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(7,7,10,.35) 0%,rgba(7,7,10,.9) 55%,#07070a 100%)}
  .gapp .cont{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;
    min-height:0;padding:3.1cqmin .75cqmin .8cqmin}
  .gapp .gtop{display:flex;justify-content:space-between;align-items:center;
    font-family:var(--cond);font-size:.85cqmin;letter-spacing:.18em;text-transform:uppercase;
    color:#8a7a52;font-weight:600;margin-bottom:.5cqmin}
  .gapp .gtop b{color:#e8c87a}
  .gapp .retrato{position:relative;width:100%;aspect-ratio:1;overflow:hidden;
    border:1px solid rgba(232,200,122,.3)}
  .gapp .retrato img{width:100%;height:100%;object-fit:cover;display:block}
  .gapp .retrato .cinta{position:absolute;left:0;bottom:0;right:0;
    background:linear-gradient(180deg,transparent,rgba(7,7,10,.95));padding:1.4cqmin .6cqmin .5cqmin}
  .gapp .retrato .cinta .nom{font-family:var(--disp);font-size:2.3cqmin;color:#fff;line-height:.95}
  .gapp .retrato .cinta .clb{font-family:var(--cond);font-size:.85cqmin;letter-spacing:.2em;
    text-transform:uppercase;color:#e8c87a;font-weight:600}
  .gapp .retrato .nivel{position:absolute;top:.45cqmin;right:.45cqmin;
    background:#e8c87a;color:#07070a;font-family:var(--disp);font-size:1.5cqmin;
    line-height:1;padding:.35cqmin .5cqmin .2cqmin}
  .gapp .st{display:flex;justify-content:space-between;align-items:baseline;
    padding:.42cqmin 0;border-bottom:1px solid rgba(255,255,255,.07)}
  .gapp .st .e{font-family:var(--cond);font-size:.82cqmin;letter-spacing:.16em;
    text-transform:uppercase;color:#8696a0;font-weight:600}
  .gapp .st .v{font-family:var(--disp);font-size:1.45cqmin;color:#fff;
    font-variant-numeric:tabular-nums;line-height:1}
  .gapp .st .v.oro{color:#e8c87a}
  .gapp .medidor{margin-top:auto;padding-top:.6cqmin}
  .gapp .medidor .cab{display:flex;justify-content:space-between;
    font-family:var(--cond);font-size:.8cqmin;letter-spacing:.16em;text-transform:uppercase;
    color:#8696a0;font-weight:600;margin-bottom:.3cqmin}
  .gapp .medidor .cab b{color:#e8c87a}
  .gapp .medidor .riel{height:.5cqmin;background:rgba(255,255,255,.1)}
  .gapp .medidor .riel i{display:block;height:100%;
    background:linear-gradient(90deg,#a8873f,#e8c87a)}

  /* ---------- mockup de reel / video corto ----------
     Un deck estático no reproduce video: esto muestra el fotograma
     representativo con la interfaz de reel encima, para dejar claro que
     el entregable real es video, no la imagen fija. Va dentro de .app,
     igual que .wa y .gapp. */
  .reel{flex:1;position:relative;display:flex;flex-direction:column;
    min-height:0;overflow:hidden;background:#050505}
  .reel .cuadro{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .reel .capa-r{position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 62%,rgba(0,0,0,.86) 100%)}
  .reel .barras{position:absolute;top:1cqmin;left:1cqmin;right:1cqmin;
    display:flex;gap:.5cqmin;z-index:3}
  .reel .barras i{flex:1;height:.35cqmin;background:rgba(255,255,255,.32)}
  .reel .barras i.vista{background:#fff}
  .reel .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:8cqmin;height:8cqmin;border-radius:50%;z-index:3;
    background:rgba(0,0,0,.34);border:.18cqmin solid rgba(255,255,255,.85);
    display:flex;align-items:center;justify-content:center}
  .reel .play::after{content:'';border-style:solid;
    border-width:1.6cqmin 0 1.6cqmin 2.6cqmin;border-color:transparent transparent transparent #fff;
    margin-left:.5cqmin}
  .reel .pie-r{position:absolute;left:1.1cqmin;right:1.1cqmin;bottom:1.3cqmin;z-index:3}
  .reel .pie-r .cta{font-family:var(--cond);font-size:.95cqmin;letter-spacing:.14em;
    text-transform:uppercase;color:#fff;font-weight:600;opacity:.85;margin-bottom:.5cqmin}
  .reel .pie-r .cap{font-size:1.15cqmin;line-height:1.32;color:#fff;font-weight:600}

  /* ---------- precarga de fuentes ----------
     Chrome descarga las @font-face solo cuando las necesita para pintar. En
     headless con --print-to-pdf eso llega tarde y el PDF sale con el fallback
     (Arial Narrow en vez de Bebas), lo que cambia el titular entero porque
     Bebas solo tiene mayúsculas. Este bloque las usa en un elemento invisible
     para forzar la descarga en el primer paint. No se ve ni se imprime. */
  #precarga-fuentes{position:fixed;left:-9999px;top:-9999px;width:0;height:0;
    overflow:hidden;pointer-events:none;opacity:0}
  #precarga-fuentes b{font-family:var(--disp);font-weight:400}
  #precarga-fuentes i{font-family:var(--cond)}
  #precarga-fuentes i.w6{font-weight:600}
  #precarga-fuentes i.w7{font-weight:700}
  #precarga-fuentes i.w8{font-weight:800}
  #precarga-fuentes s{font-family:var(--texto)}
  #precarga-fuentes s.w4{font-weight:400}
  #precarga-fuentes s.w5{font-weight:500}
  #precarga-fuentes s.w6{font-weight:600}
  #precarga-fuentes s.w7{font-weight:700}

  /* ---------- interfaz ---------- */
  #barra{position:fixed;left:0;bottom:0;height:2px;background:var(--tinta);width:0;
    transition:width .3s ease;z-index:50;opacity:.7}
  #num{position:fixed;right:2.2vmin;bottom:1.7vmin;font-family:var(--cond);font-size:1.25vmin;
    color:#3f3f3d;letter-spacing:.2em;z-index:50;font-variant-numeric:tabular-nums}
  #notas{position:fixed;left:0;right:0;bottom:0;background:#111110;border-top:1px solid var(--borde-fuerte);
    padding:2.3vmin 3.4vmin;font-size:1.7vmin;line-height:1.5;color:var(--tenue);
    display:none;z-index:60;max-height:34vh;overflow:auto}
  #notas.on{display:block}
  #notas b{font-family:var(--cond);color:var(--tinta);display:block;font-size:1.2vmin;letter-spacing:.24em;
    text-transform:uppercase;margin-bottom:.9vmin;font-weight:600}
  #ayuda{position:fixed;left:2.2vmin;bottom:1.7vmin;font-family:var(--cond);font-size:1.2vmin;
    color:#2e2e2c;letter-spacing:.16em;text-transform:uppercase;z-index:50}

  @media print{
    @page{size:1600px 900px;margin:0}
    html,body{overflow:visible;height:auto}
    #deck{display:block;height:auto}
    .slide{display:flex !important;position:relative;width:100%;height:900px;
      page-break-after:always;break-after:page}
    .slide:last-child{page-break-after:auto;break-after:auto}
    #barra,#num,#notas,#ayuda{display:none !important}
  }

  /* ---------- dato de tercero, citado como señal de categoría ---------- */
  .cita-dato{display:flex;gap:1.6cqmin;align-items:baseline;padding:1.2cqmin 1.6cqmin;
    background:rgba(255,255,255,.028);border-left:2px solid var(--tinta);margin-top:.4cqmin}
  .cita-dato .n{font-family:var(--disp);font-size:3.4cqmin;line-height:.9;color:var(--tinta);flex:0 0 auto}
  .cita-dato .t{font-size:1.5cqmin;line-height:1.35;color:var(--tenue)}
  .cita-dato .t em{color:var(--tinta);font-style:normal;font-weight:600}
  .cita-dato .f{display:block;font-family:var(--cond);font-size:1.05cqmin;letter-spacing:.14em;
    text-transform:uppercase;color:var(--mudo);margin-top:.4cqmin}