/* ============================================================================
   AFP Capital · añadidos de proyecto sobre el canon Disrupt
   Solo lo que el sistema no cubre: el acento tomado de la marca del producto,
   la portada sin KV, la lámina del problema, los canales, los clusters y el
   juego Mesón 2027 completo.
   ============================================================================ */

/* ---------- acento ----------
   No es un color inventado: es el morado del propio logo de GEMS. Uno solo,
   y aterriza únicamente donde el canon lo permite. */
body[data-acento="gems"]{--acento:#7B63DE;--acento-tenue:rgba(123,99,222,.15)}

/* ---------- logos ---------- */
.marcas-portada{position:absolute;top:5cqmin;left:6cqmin;z-index:1;
  display:flex;align-items:center;gap:2.6cqmin}
.marcas-portada .sep{width:1px;height:3.2cqmin;background:var(--borde-fuerte)}
.marcas-portada .m-gems{height:3.6cqmin;width:auto}
.marcas-portada .m-cliente{height:2.6cqmin;width:auto;filter:brightness(0) invert(1);opacity:.9}
.cover.sin-kv{background:var(--fondo)}

.marcas-cierre{display:flex;align-items:center;gap:2.6cqmin;margin-top:auto;
  padding-top:2.6cqmin;border-top:1px solid var(--borde)}
.marcas-cierre .sep{width:1px;height:3cqmin;background:var(--borde-fuerte)}
.marcas-cierre .m-gems{height:3.4cqmin;width:auto}
.marcas-cierre .m-cliente{height:2.4cqmin;width:auto;filter:brightness(0) invert(1);opacity:.9}
.remate-col{justify-content:center}
.frase-final{font-family:var(--disp);font-size:4.4cqmin;line-height:1.06;color:var(--tinta);
  letter-spacing:.02em;max-width:20ch}

/* ---------- lámina del problema ---------- */
.slide.males{justify-content:center;padding:0 7cqmin}
.slide.males .rotulo{display:block;margin-bottom:4.4cqmin}
.tres-males{display:flex;flex-direction:column}
.mal{display:grid;grid-template-columns:5cqmin 1fr 34ch;align-items:baseline;gap:2.6cqmin;
  padding:3.4cqmin 0;border-top:1px solid var(--borde)}
.mal:last-child{border-bottom:1px solid var(--borde)}
.mal .n{font-family:var(--cond);font-size:1.3cqmin;letter-spacing:.22em;color:var(--mudo);font-weight:600}
.mal .t{font-family:var(--disp);font-size:6.2cqmin;line-height:.94;color:var(--tinta);letter-spacing:.015em}
.mal .g{font-size:1.55cqmin;line-height:1.45;color:var(--mudo)}

/* ---------- banda de cita al pie de una lámina ---------- */
.banda-cuna{flex:0 0 auto;border-left:2px solid var(--acento);background:var(--superficie);
  padding:2cqmin 2.6cqmin;display:flex;flex-direction:column;gap:.9cqmin}
.banda-cuna p{font-family:var(--disp);font-size:3.4cqmin;line-height:1.06;color:var(--tinta);
  letter-spacing:.015em}
.banda-cuna .quien{font-family:var(--cond);font-size:1.15cqmin;letter-spacing:.24em;
  text-transform:uppercase;color:var(--mudo);font-weight:600}

/* ---------- canales ---------- */
.canales{display:flex;gap:2.6cqmin;flex-wrap:wrap;padding-bottom:.6cqmin}
.canal{display:flex;flex-direction:column;align-items:center;gap:.9cqmin;width:7cqmin}
.canal img,.canal svg{width:3cqmin;height:3cqmin;display:block}
.canal img{filter:brightness(0) invert(1);opacity:.88}
.canal svg .tz{fill:none;stroke:var(--tinta);stroke-width:1.6;opacity:.88}
.canal span{font-family:var(--cond);font-size:1.05cqmin;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mudo);font-weight:600;text-align:center}

/* ---------- clusters ---------- */
.clusters{display:flex;flex-direction:column;gap:2.2cqmin}
.cl .ct{font-family:var(--cond);font-size:1.15cqmin;letter-spacing:.24em;text-transform:uppercase;
  color:var(--acento);font-weight:600;padding-bottom:.9cqmin;margin-bottom:.9cqmin;
  border-bottom:1px solid var(--borde-fuerte)}
.cf{display:grid;grid-template-columns:14ch 1fr;gap:1.6cqmin;align-items:baseline;
  padding:.75cqmin 0;border-bottom:1px solid var(--borde)}
.cf b{font-size:1.6cqmin;color:var(--tinta);font-weight:600}
.cf span{font-size:1.45cqmin;color:var(--mudo);line-height:1.35}

/* ---------- utilidades de layout ---------- */
.body.apilada{flex-direction:column;gap:2.6cqmin}
.body.apilada .fila-cols{flex:1 1 auto;display:flex;gap:4.4cqmin;min-height:0}
.medio.chico{flex:0 0 auto;margin-top:auto;width:100%}
.medio.chico>.hueco{min-height:19cqmin;width:100%;aspect-ratio:auto;
  justify-content:flex-start;padding:1.8cqmin 1.8cqmin 1.6cqmin}
.medio.chico .brief{position:static;order:3;margin-top:1.2cqmin;font-size:1.05cqmin}

/* la cadena de frases que cierra la lámina de mecanismos */
ul.cadena{list-style:none;display:flex;flex-direction:column;gap:1cqmin;
  padding-bottom:.6cqmin;border-bottom:1px solid var(--borde)}
ul.cadena li{font-size:1.65cqmin;line-height:1.4;color:var(--tenue);
  padding-left:1.6cqmin;border-left:1px solid var(--borde)}
ul.cadena li b{color:var(--tinta);font-weight:600}
ul.cadena li.remate{border-left-color:var(--acento);color:var(--tinta)}

/* tabla de mecanismos: primera celda con nombre y bajada */
table.mec td:first-child b{display:block;font-family:var(--disp);font-size:2.3cqmin;
  font-weight:400;letter-spacing:.03em;line-height:1;color:var(--tinta)}
table.mec td:first-child span{display:block;font-size:1.35cqmin;color:var(--mudo);
  line-height:1.3;margin-top:.5cqmin}
table.mec td{font-size:1.6cqmin;vertical-align:top}

/* brief de producción dentro de un hueco de espera */
.hueco .brief{position:absolute;left:1.4cqmin;right:1.4cqmin;bottom:1.4cqmin;
  font-size:1.15cqmin;line-height:1.4;color:var(--mudo);text-align:left;
  border-top:1px solid var(--borde);padding-top:1cqmin;margin:0}
.hueco .brief b{color:var(--tenue);font-weight:600}

/* ============================================================================
   ¿QUIÉN QUIERE SER EL MEJOR ASESOR? · versión previsional
   Cinco preguntas en escalera, veinte segundos, tres comodines, un sillón.
   Monocromo Disrupt con un solo acento. Las placas hexagonales evocan el
   formato sin copiar su gráfica.
   ============================================================================ */
.slide.juego{padding:3cqmin 3.6cqmin 6.6cqmin;flex-direction:column}
.juego-fila{flex:1 1 auto;display:flex;gap:2.6cqmin;min-height:0}
.juego-fila .juego-caja{flex:1 1 auto;min-width:0;display:flex}

.qm{position:relative;flex:1 1 auto;display:flex;flex-direction:column;gap:1.1cqmin;min-height:0;min-width:0}
.qm-top{flex:0 0 auto;display:flex;justify-content:space-between;align-items:flex-end;gap:2cqmin;
  padding-bottom:1cqmin;border-bottom:1px solid var(--borde-fuerte)}
.qm-marca{font-family:var(--disp);font-size:3cqmin;line-height:1;color:var(--tinta);letter-spacing:.04em}
.qm-marca span{display:block;font-family:var(--cond);font-size:1.05cqmin;letter-spacing:.24em;
  text-transform:uppercase;color:var(--mudo);font-weight:600;margin-top:.5cqmin}
.qm-hud{display:flex;gap:2.8cqmin;align-items:flex-end}
.qm-stat{display:flex;flex-direction:column;gap:.3cqmin;align-items:flex-end}
.qm-stat .e{font-family:var(--cond);font-size:1cqmin;letter-spacing:.2em;text-transform:uppercase;color:var(--mudo);font-weight:600}
.qm-stat .v{font-family:var(--disp);font-size:2.8cqmin;line-height:1;color:var(--tinta);font-variant-numeric:tabular-nums;min-width:4cqmin;text-align:right}
.qm-stat .v.viva{color:var(--acento)}

.qm-main{flex:1 1 auto;display:flex;gap:2.2cqmin;min-height:0}
.qm-escena{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1.6cqmin;min-height:0}
.qm-lado{flex:0 0 17cqmin;display:flex;flex-direction:column;gap:1.2cqmin;min-height:0;
  border-left:1px solid var(--borde);padding-left:1.6cqmin}


.qm-host{font-family:var(--cond);font-size:1.6cqmin;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acento);font-weight:600;min-height:2cqmin;line-height:1.4}
.qm-host::before{content:'Presentador · ';color:var(--mudo)}

/* placa hexagonal: un envoltorio con el borde y adentro el relleno, ambos recortados */
.hex{position:relative;clip-path:polygon(2.2cqmin 0,calc(100% - 2.2cqmin) 0,100% 50%,calc(100% - 2.2cqmin) 100%,2.2cqmin 100%,0 50%);
  background:var(--borde-fuerte);padding:1px}
.hex>.in{clip-path:inherit;background:var(--superficie);display:flex;align-items:center;justify-content:center;
  min-height:100%;height:100%;padding:1.2cqmin 3.2cqmin;box-sizing:border-box}
.qm-preg{flex:0 0 auto;margin-top:auto}
.qm-preg>.in{font-size:2.6cqmin;line-height:1.35;color:var(--tinta);text-align:center;min-height:12cqmin}

.qm-ops{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:8.6cqmin;
  gap:1.6cqmin 1.8cqmin;min-height:0}
.qm-op{position:relative;display:flex;align-items:center;gap:1.1cqmin;text-align:left;cursor:pointer;
  clip-path:polygon(2.2cqmin 0,calc(100% - 2.2cqmin) 0,100% 50%,calc(100% - 2.2cqmin) 100%,2.2cqmin 100%,0 50%);
  background:var(--superficie);border:0;padding:.9cqmin 3cqmin;font-family:var(--texto);color:var(--tenue);
  font-size:1.9cqmin;line-height:1.3;min-height:0;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--borde-fuerte);transition:background .12s ease,color .12s ease}
.qm-op .k{flex:0 0 auto;font-family:var(--disp);font-size:2.7cqmin;line-height:1;color:var(--acento)}
.qm-op .tx{flex:1 1 auto;min-width:0}
.qm-op:hover:not(:disabled){color:var(--tinta);background:#151515}
.qm-op.sel{background:var(--acento-tenue);color:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--acento)}
.qm-op.ok{background:var(--acento);color:#0a0a0a}
.qm-op.ok .k{color:#0a0a0a}
.qm-op.mal{background:#1a1414;color:var(--mudo);box-shadow:inset 0 0 0 1px #3a2a2a}
.qm-op.apagada,.qm-op.fuera{opacity:.18}
.qm-op .pub{position:absolute;left:0;bottom:0;height:.45cqmin;width:0;background:var(--acento);opacity:.85;transition:width .5s ease}
.qm-op.con-pub .pub::after{content:attr(data-v);position:absolute;right:.4cqmin;bottom:.7cqmin;font-family:var(--cond);
  font-size:1cqmin;letter-spacing:.1em;color:var(--tinta)}

.qm-acciones{flex:0 0 auto;margin-top:auto;display:flex;gap:1.2cqmin;align-items:center;min-height:3.2cqmin}
.qm-reloj-riel{flex:1 1 auto;height:.5cqmin;background:rgba(255,255,255,.08);overflow:hidden}
.qm-reloj-riel i{display:block;height:100%;background:var(--tinta);transform-origin:left;transform:scaleX(1)}
.qm-reloj-riel i.viva{background:var(--acento)}
.qm-btn{font-family:var(--cond);font-size:1.15cqmin;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  padding:.9cqmin 1.8cqmin;border:1px solid var(--acento);background:var(--acento);color:#0a0a0a;cursor:pointer;flex:0 0 auto}
.qm-btn.ghost{background:transparent;color:var(--tenue);border-color:var(--borde-fuerte)}
.qm-btn.ghost:hover{color:var(--tinta);border-color:var(--tinta)}
.qm-btn[hidden]{display:none}

.qm-fb{flex:0 0 auto;border-left:2px solid var(--acento);background:var(--superficie);padding:.9cqmin 1.4cqmin}
.qm-fb b{display:block;font-family:var(--cond);font-size:1.05cqmin;letter-spacing:.24em;text-transform:uppercase;color:var(--acento);margin-bottom:.4cqmin}
.qm-fb p{font-size:1.6cqmin;line-height:1.4;color:var(--tinta);margin:0}
.qm-fb small{display:block;font-family:var(--cond);font-size:.95cqmin;letter-spacing:.14em;text-transform:uppercase;color:#4a4a48;margin-top:.5cqmin}

/* escalera */
.qm-tit{font-family:var(--cond);font-size:1cqmin;letter-spacing:.24em;text-transform:uppercase;color:var(--mudo);font-weight:600;
  padding-bottom:.6cqmin;border-bottom:1px solid var(--borde-fuerte)}
.qm-esc{display:flex;flex-direction:column;gap:.35cqmin}
.qm-pel{display:flex;align-items:baseline;gap:.7cqmin;padding:.55cqmin .6cqmin;border:1px solid transparent}
.qm-pel .k{font-family:var(--cond);font-size:1cqmin;letter-spacing:.14em;color:var(--mudo);flex:0 0 1.4cqmin}
.qm-pel .m{font-family:var(--disp);font-size:1.9cqmin;line-height:1;color:var(--tenue);font-variant-numeric:tabular-nums;flex:1}
.qm-pel .s{font-family:var(--cond);font-size:.85cqmin;letter-spacing:.16em;text-transform:uppercase;color:var(--mudo)}
.qm-pel.seguro{border-top:1px dashed var(--borde-fuerte);border-bottom:1px dashed var(--borde-fuerte)}
.qm-pel.hecho .m{color:var(--tinta)}
.qm-pel.aqui{background:var(--acento-tenue);border-color:var(--acento)}
.qm-pel.aqui .m,.qm-pel.aqui .k{color:var(--acento)}

.qm-com{display:flex;flex-direction:column;gap:.6cqmin}
.qm-cbtn{display:flex;justify-content:space-between;align-items:center;font-family:var(--cond);font-size:1.15cqmin;
  letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--tinta);background:transparent;
  border:1px solid var(--borde-fuerte);padding:.8cqmin 1cqmin;cursor:pointer}
.qm-cbtn small{font-family:var(--disp);font-size:1.4cqmin;color:var(--mudo);letter-spacing:0}
.qm-cbtn:hover:not(:disabled){border-color:var(--acento);color:var(--acento)}
.qm-cbtn.usado{opacity:.25;text-decoration:line-through;cursor:default}

.qm-rank{margin-top:auto;display:flex;flex-direction:column;min-height:0}
.qm-rank ol{list-style:none;margin:0;padding:0;overflow:hidden}
.qm-rank li{display:flex;align-items:baseline;gap:.6cqmin;padding:.45cqmin 0;border-bottom:1px solid var(--borde)}
.qm-rank li .p{font-family:var(--disp);font-size:1.4cqmin;color:var(--mudo);flex:0 0 1.8cqmin;line-height:1}
.qm-rank li .n{flex:1;font-family:var(--cond);font-size:1.05cqmin;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue);font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qm-rank li .n em{font-style:normal;color:#3d3d3b;font-size:.85cqmin;margin-left:.4cqmin}
.qm-rank li .v{font-family:var(--disp);font-size:1.35cqmin;color:var(--tinta);font-variant-numeric:tabular-nums}
.qm-rank li.nuevo{background:var(--acento-tenue)}
.qm-rank li.nuevo .p,.qm-rank li.nuevo .n{color:var(--acento)}

.qm-bot{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:2cqmin;padding-top:1cqmin;border-top:1px solid var(--borde)}
.qm-med{display:flex;gap:1.6cqmin}
.qm-medalla{display:flex;align-items:center;gap:.6cqmin}
.qm-medalla svg{width:2cqmin;height:2.2cqmin}
.qm-medalla polygon{fill:none;stroke:#2a2a2a;stroke-width:2.5}
.qm-medalla span{font-family:var(--cond);font-size:.95cqmin;letter-spacing:.16em;text-transform:uppercase;color:#3d3d3b;font-weight:600}
.qm-medalla[data-on="1"] polygon{stroke:var(--acento)}
.qm-medalla[data-on="1"] span{color:var(--tinta)}
.qm-medalla.destella polygon{animation:qm-destello .4s ease-out 2}
@keyframes qm-destello{0%,100%{stroke:var(--acento)}50%{stroke:var(--tinta)}}
.qm-legal{font-family:var(--cond);font-size:1cqmin;letter-spacing:.14em;text-transform:uppercase;color:#4a4a48;text-align:right}

.qm-capa{position:absolute;inset:0;z-index:8;background:rgba(8,8,8,.96);display:flex;align-items:center;justify-content:center}
.qm-capa[hidden]{display:none}
.qm-capa-in{max-width:62ch;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.8cqmin}
.qm-kicker{font-family:var(--cond);font-size:1.15cqmin;letter-spacing:.3em;text-transform:uppercase;color:var(--mudo);font-weight:600}
.qm-capa-in h3{font-family:var(--disp);font-size:7cqmin;line-height:.9;color:var(--tinta);font-weight:400;letter-spacing:.02em}
.qm-capa-in h3 em{font-style:normal;color:var(--acento)}
.qm-capa-in p{font-size:1.7cqmin;line-height:1.5;color:var(--tenue);max-width:52ch}
.qm-final{font-family:var(--disp);font-size:14cqmin;line-height:.82;color:var(--tinta);font-variant-numeric:tabular-nums}
.qm-marc{display:flex;gap:3cqmin}
.qm-marc div{display:flex;flex-direction:column;gap:.4cqmin}
.qm-marc .e{font-family:var(--cond);font-size:1cqmin;letter-spacing:.2em;text-transform:uppercase;color:var(--mudo);font-weight:600}
.qm-marc .v{font-family:var(--disp);font-size:2.4cqmin;line-height:1;color:var(--tinta)}
.qm-ini{display:flex;gap:1.1cqmin;align-items:center}
.qm-ini label{font-family:var(--cond);font-size:1.05cqmin;letter-spacing:.2em;text-transform:uppercase;color:var(--mudo);font-weight:600}
.qm-ini input{width:9cqmin;padding:1cqmin;background:var(--superficie);border:1px solid var(--borde-fuerte);color:var(--tinta);
  font-family:var(--disp);font-size:2.4cqmin;text-align:center;text-transform:uppercase;letter-spacing:.2em;outline:none}
.qm-ini input:focus{border-color:var(--acento)}
.qm-teclas{font-family:var(--cond);font-size:1.05cqmin;letter-spacing:.18em;text-transform:uppercase;color:#3d3d3b;font-weight:600}
@media print{.qm-capa#qm-start{display:flex !important}}

/* ============================================================================
   INTERFAZ GEMS
   Reproducción del portal del participante segun design-system/MASTER.md del
   repo treid-loyalty (v. 2026-04-21). Tokens, radios y etiquetas son los
   reales. Las tipografías del portal son Outfit y Work Sans; acá se aproximan
   con Barlow, que es la que va embebida en el deck y funciona sin internet.

   Es la única parte del deck que lleva color, y es a propósito: el deck es
   monocromo y el color viene de las piezas. La interfaz es una pieza.
   ============================================================================ */
.gems{
  --g-bg:#0a0a10; --g-c1:#12121a; --g-c2:#1a1a26; --g-c3:#242436; --g-bd:#2a2a3f;
  --g-fg:#f5f4f8; --g-fg2:#9aa0a6; --g-fg3:#5f6368;
  --g-brand:#8b5cf6; --g-txt:#a78bfa; --g-gold:#f59e0b; --g-cyan:#06b6d4; --g-eme:#10b981;
  flex:1;display:flex;flex-direction:column;min-height:0;background:var(--g-bg);
  font-family:var(--texto);letter-spacing:-.01em;padding:13.95cqmin 3.71cqmin 3.71cqmin;gap:3.27cqmin;
  overflow:hidden}

.gems .g-top{display:flex;justify-content:space-between;align-items:center;flex:0 0 auto}
.gems .g-top b{font-size:4.58cqmin;color:var(--g-fg);font-weight:600}
.gems .g-top span{font-size:3.71cqmin;color:var(--g-fg3)}
.gems .g-av{width:8.72cqmin;height:8.72cqmin;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(140deg,var(--g-brand),#ec4899)}

.gems .g-hero{flex:0 0 auto;padding:2.62cqmin 0 1.31cqmin}
.gems .g-eyebrow{display:block;font-size:3.4cqmin;color:var(--g-fg3);text-transform:uppercase;
  letter-spacing:.14em;font-weight:600}
.gems .g-saldo{font-size:17.44cqmin;line-height:1;color:var(--g-fg);font-weight:700;
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;margin:1.09cqmin 0}
.gems .g-sub{font-size:3.71cqmin;color:var(--g-txt);font-weight:600}

.gems .g-fila{display:flex;gap:2.62cqmin;flex:0 0 auto}
.gems .g-chip{flex:1;background:var(--g-c1);border:1px solid var(--g-bd);border-radius:6.1cqmin;
  padding:2.62cqmin 3.05cqmin;display:flex;flex-direction:column;gap:0.65cqmin;min-width:0}
.gems .g-chip b{font-size:6.98cqmin;line-height:1;color:var(--g-fg);font-weight:700;
  font-variant-numeric:tabular-nums}
.gems .g-chip b.cyan{color:var(--g-cyan)}
.gems .g-chip b.gold{color:var(--g-gold)}
.gems .g-chip span{font-size:3.14cqmin;color:var(--g-fg3);text-transform:uppercase;
  letter-spacing:.1em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.gems .g-card{background:var(--g-c1);border:1px solid var(--g-bd);border-radius:6.98cqmin;
  padding:3.27cqmin 3.49cqmin;flex:0 0 auto;display:flex;flex-direction:column;gap:1.74cqmin}
.gems .g-card.viva{background:linear-gradient(140deg,rgba(139,92,246,.18),rgba(139,92,246,.05));
  border-color:rgba(139,92,246,.45)}
.gems .g-tag{font-size:2.96cqmin;text-transform:uppercase;letter-spacing:.12em;font-weight:700;
  color:var(--g-txt);align-self:flex-start;background:rgba(139,92,246,.16);
  border-radius:99px;padding:0.78cqmin 2.18cqmin}
.gems .g-card-t{font-size:4.58cqmin;color:var(--g-fg);font-weight:600;line-height:1.25}
.gems .g-card-m{font-size:3.49cqmin;color:var(--g-fg2)}
.gems .g-riel{height:1.83cqmin;background:var(--g-c3);border-radius:99px;overflow:hidden}
.gems .g-riel i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--g-brand),#a78bfa)}
.gems .g-riel.cyan i{background:linear-gradient(90deg,#0891b2,var(--g-cyan))}

.gems .g-sec{font-size:3.27cqmin;text-transform:uppercase;letter-spacing:.16em;font-weight:700;
  color:var(--g-fg3);margin-top:1.53cqmin;flex:0 0 auto}

/* podio y liga */
.gems .g-podio{display:flex;align-items:flex-end;gap:2.18cqmin;flex:0 0 auto;padding:1.31cqmin 0}
.gems .g-pod{flex:1;display:flex;flex-direction:column;align-items:center;gap:1.31cqmin}
.gems .g-pod .c{width:9.59cqmin;height:9.59cqmin;border-radius:50%;
  background:linear-gradient(140deg,#3b3b52,#22223a);border:1px solid var(--g-bd)}
.gems .g-pod.p1 .c{width:12.64cqmin;height:12.64cqmin;border-color:var(--g-gold);
  background:linear-gradient(140deg,#5a4a22,#2a2410)}
.gems .g-pod .nm{font-size:3.05cqmin;color:var(--g-fg2);font-weight:600}
.gems .g-pod .pt{font-size:3.71cqmin;color:var(--g-fg);font-weight:700;font-variant-numeric:tabular-nums}
.gems .g-pod.p1 .pt{color:var(--g-gold)}
.gems .g-pod .base{width:100%;border-radius:2.18cqmin 2.18cqmin 0 0;background:var(--g-c2)}
.gems .g-pod.p1 .base{height:6.98cqmin}
.gems .g-pod.p2 .base{height:4.8cqmin}
.gems .g-pod.p3 .base{height:3.49cqmin}

.gems .g-lista{display:flex;flex-direction:column;gap:1.31cqmin;flex:0 0 auto;min-height:0}
.gems .g-fil{display:flex;align-items:center;gap:2.4cqmin;background:var(--g-c1);
  border:1px solid transparent;border-radius:3.92cqmin;padding:1.83cqmin 2.62cqmin}
.gems .g-fil .p{font-size:3.71cqmin;color:var(--g-fg3);font-weight:700;width:6.98cqmin;
  font-variant-numeric:tabular-nums}
.gems .g-fil .n{flex:1;font-size:3.84cqmin;color:var(--g-fg2);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gems .g-fil .v{font-size:3.84cqmin;color:var(--g-fg);font-weight:700;font-variant-numeric:tabular-nums}
.gems .g-fil.yo{background:rgba(139,92,246,.16);border-color:rgba(139,92,246,.5)}
.gems .g-fil.yo .n,.gems .g-fil.yo .p{color:var(--g-fg)}
.gems .g-corte{display:flex;align-items:center;gap:1.96cqmin;padding:0.65cqmin 0;flex:0 0 auto}
.gems .g-corte span{font-size:2.7cqmin;text-transform:uppercase;letter-spacing:.14em;font-weight:700;
  white-space:nowrap}
.gems .g-corte i{flex:1;height:1px}
.gems .g-corte.sube span{color:var(--g-eme)} .gems .g-corte.sube i{background:rgba(16,185,129,.35)}
.gems .g-corte.baja span{color:#ef4444} .gems .g-corte.baja i{background:rgba(239,68,68,.35)}

/* perfil e insignias */
.gems .g-perfil{display:flex;flex-direction:column;align-items:center;gap:1.53cqmin;
  flex:0 0 auto;padding:2.18cqmin 0 1.31cqmin}
.gems .g-perfil .av{width:18.31cqmin;height:18.31cqmin;border-radius:50%;
  background:linear-gradient(140deg,var(--g-brand),#ec4899);border:1px solid rgba(255,255,255,.16)}
.gems .g-perfil .nm{font-size:5.45cqmin;color:var(--g-fg);font-weight:700;letter-spacing:-.02em}
.gems .g-perfil .nv{font-size:3.4cqmin;color:var(--g-txt);font-weight:600}
.gems .g-insignias{display:grid;grid-template-columns:repeat(4,1fr);gap:2.18cqmin;flex:0 0 auto}
.gems .g-ins{aspect-ratio:1;background:var(--g-c1);border:1px solid var(--g-bd);border-radius:4.36cqmin;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.87cqmin;padding:0.87cqmin}
.gems .g-ins svg{width:6.54cqmin;height:6.98cqmin}
.gems .g-ins polygon{fill:none;stroke:var(--g-fg3);stroke-width:2.5}
.gems .g-ins em{font-style:normal;font-size:2.53cqmin;color:var(--g-fg3);text-align:center;
  line-height:1.1;font-weight:600}
.gems .g-ins.on{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.4)}
.gems .g-ins.on polygon{stroke:var(--g-gold)}
.gems .g-ins.on em{color:var(--g-gold)}

.gems .g-nav{margin-top:auto;flex:0 0 auto;display:flex;justify-content:space-around;
  padding:2.62cqmin 0 0.87cqmin;border-top:1px solid var(--g-bd)}
.gems .g-nav i{width:5.23cqmin;height:5.23cqmin;border-radius:1.53cqmin;background:var(--g-c3);display:block}
.gems .g-nav i.on{background:var(--g-txt)}

/* pie que aclara qué es lo que se está mostrando */
.pie-mock{font-family:var(--cond);font-size:1.05cqmin;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mudo);text-align:center;margin-top:1.2cqmin;font-weight:600}

/* bandas en fila, para las dos patas de la lámina de producto */
.bandas.par{flex-direction:row;height:auto;flex:0 0 auto;gap:2.2cqmin}
.bandas.par .banda{flex:1}
.body.apilada .fonos{flex:1 1 auto;min-height:0}
.fonos .fono-col{display:flex;flex-direction:column;align-items:center;min-height:0;flex:0 0 auto}
/* la pantalla del teléfono es su propio contenedor de consulta: así el mockup
   escala con el teléfono y no con la lámina, y se puede cambiar de tamaño sin
   volver a tocar ni una medida de la interfaz */
.iphone .app{container-type:size}

/* ============================================================================
   PANEL INTERNO (admin.gemsloyalty.com)
   Reproducción del panel de administración real, con contenido de AFP Capital.
   Es claro y de escritorio, al revés del portal del participante: son dos
   superficies distintas y esa diferencia es parte del argumento.
   ============================================================================ */
.navegador{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  border:1px solid var(--borde-fuerte);background:#fff;overflow:hidden;container-type:size}
.navegador .barra{flex:0 0 auto;display:flex;align-items:center;gap:1.42cqmin;
  background:#e9e9ee;border-bottom:1px solid #d5d5dd;padding:1.3cqmin 1.65cqmin}
.navegador .barra i{width:1.3cqmin;height:1.3cqmin;border-radius:50%;background:#c6c6cf;display:block}
.navegador .barra .url{flex:1;background:#fff;border-radius:99px;padding:0.83cqmin 1.89cqmin;
  font-family:var(--texto);font-size:1.89cqmin;color:#5a5a66;margin-left:1.18cqmin}
.adminui{flex:1 1 auto;min-height:0;display:flex;font-family:var(--texto);color:#16161d;
  letter-spacing:-.005em;background:#fff;overflow:hidden}

.adminui .a-side{flex:0 0 26%;min-width:0;background:#fbfbfd;border-right:1px solid #ececf2;
  padding:2.36cqmin 1.89cqmin;display:flex;flex-direction:column;gap:0.59cqmin;overflow:hidden}
.adminui .a-marca{font-size:2.36cqmin;font-weight:700;line-height:1.1}
.adminui .a-marca span{display:block;font-size:1.65cqmin;color:#8a8a96;font-weight:400}
.adminui .a-cuenta{border:1px solid #e2e2ea;border-radius:1.65cqmin;padding:1.18cqmin 1.42cqmin;
  margin:1.65cqmin 0 1.18cqmin;font-size:1.53cqmin;color:#8a8a96;line-height:1.3}
.adminui .a-cuenta b{display:block;font-size:2.12cqmin;color:#16161d;font-weight:600}
.adminui .a-gr{font-size:1.36cqmin;letter-spacing:.14em;text-transform:uppercase;color:#a0a0ac;
  font-weight:700;margin-top:1.65cqmin;margin-bottom:0.35cqmin}
.adminui .a-it{font-size:1.95cqmin;color:#4a4a58;padding:1cqmin 1.3cqmin;border-radius:1.18cqmin;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adminui .a-it.on{background:#f1ecfe;color:#6d28d9;font-weight:600}

.adminui .a-main{flex:1 1 auto;min-width:0;padding:2.83cqmin 3.07cqmin;display:flex;
  flex-direction:column;gap:1.42cqmin;overflow:hidden}
.adminui .a-top{display:flex;justify-content:space-between;align-items:flex-start;gap:2.36cqmin}
.adminui .a-top h4{font-size:3.78cqmin;font-weight:700;letter-spacing:-.02em;line-height:1}
.adminui .a-btn{background:#7c3aed;color:#fff;font-size:1.77cqmin;font-weight:600;
  border-radius:1.18cqmin;padding:1.18cqmin 1.89cqmin;white-space:nowrap;flex:0 0 auto}
.adminui .a-sub{font-size:1.77cqmin;color:#6b6b78;line-height:1.4;max-width:62ch}
.adminui .a-tab{width:100%;border-collapse:collapse;border:1px solid #ececf2;border-radius:1.65cqmin;
  overflow:hidden;margin-top:0.71cqmin}
.adminui .a-tab th{text-align:left;font-family:var(--texto);font-size:1.36cqmin;letter-spacing:.1em;
  text-transform:uppercase;color:#8a8a96;font-weight:600;padding:1.3cqmin 1.53cqmin;
  border-bottom:1px solid #ececf2;background:#fbfbfd}
.adminui .a-tab td{font-size:1.77cqmin;color:#3a3a46;padding:1.42cqmin 1.53cqmin;
  border-bottom:1px solid #f3f3f7;vertical-align:middle}
.adminui .a-tab tr:last-child td{border-bottom:0}
.adminui .a-tab td:first-child{color:#16161d;font-weight:600}
.adminui .a-tab td.num{text-align:right;font-variant-numeric:tabular-nums}
.adminui .pill{display:inline-block;font-size:1.42cqmin;font-weight:600;border-radius:99px;
  padding:0.41cqmin 1.18cqmin;white-space:nowrap}
.adminui .pill.ok{background:#e6f6ed;color:#0b7a43}
.adminui .pill.wr{background:#fdf3e0;color:#9a6a10}

/* lista de formatos de contenido */
.formatos{display:flex;flex-direction:column;gap:1.4cqmin}
.fmt{display:grid;grid-template-columns:3.4cqmin 1fr;gap:1.6cqmin;align-items:start;
  padding-bottom:1.4cqmin;border-bottom:1px solid var(--borde)}
.fmt:last-child{border-bottom:0;padding-bottom:0}
.fmt .k{font-family:var(--disp);font-size:2.6cqmin;line-height:1;color:var(--acento)}
.fmt b{display:block;font-family:var(--disp);font-size:2.4cqmin;font-weight:400;letter-spacing:.03em;
  color:var(--tinta);line-height:1;margin-bottom:.6cqmin}
.fmt span{font-size:1.5cqmin;color:var(--tenue);line-height:1.4}

/* ---------- casos concretos: qué pasa hoy ---------- */
.casos{display:flex;flex-direction:column;gap:1.6cqmin}
.caso{padding-left:1.8cqmin;border-left:1px solid var(--borde-fuerte)}
.caso .cuando{font-family:var(--cond);font-size:1.15cqmin;letter-spacing:.22em;text-transform:uppercase;
  color:var(--acento);font-weight:600;display:block;margin-bottom:.6cqmin}
.caso .que{font-size:1.7cqmin;line-height:1.4;color:var(--tinta)}
.caso .pasa{display:block;font-size:1.55cqmin;line-height:1.4;color:var(--mudo);margin-top:.5cqmin}

/* ---------- lámina de producto: logo grande y diagrama ---------- */
.gems-marca{display:flex;align-items:center;gap:2.2cqmin;padding-bottom:2cqmin;
  border-bottom:1px solid var(--borde);margin-bottom:.6cqmin}
.gems-marca img{height:5.4cqmin;width:auto}
.gems-marca .que{font-family:var(--cond);font-size:1.3cqmin;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mudo);font-weight:600;line-height:1.5}

/* ---------- cierre de una sola frase ---------- */
.slide.cierre-frase{justify-content:center;align-items:flex-start;padding:0 9cqmin}
.slide.cierre-frase .rotulo{display:block;margin-bottom:3.4cqmin}
.slide.cierre-frase .frase{font-family:var(--disp);font-size:8.6cqmin;line-height:1.02;
  color:var(--tinta);letter-spacing:.015em;max-width:22ch}
.slide.cierre-frase .frase em{font-style:normal;color:var(--acento)}
.slide.cierre-frase .sub-cierre{font-size:1.9cqmin;color:var(--tenue);margin-top:3cqmin;max-width:52ch;
  line-height:1.5}
.slide.cierre-frase .marcas-cierre{margin-top:5cqmin}

/* hueco pensado para llevar un prompt largo: la instrucción fluye bajo el
   rótulo en vez de anclarse al pie, y el recuadro ocupa todo lo disponible */
.medio.prompt>.hueco{justify-content:flex-start;padding:2cqmin 2.2cqmin;aspect-ratio:auto}
.medio.prompt .brief{position:static;order:3;margin-top:1.4cqmin;font-size:1.15cqmin;
  line-height:1.45;text-align:left;overflow:hidden}

/* ---------- dos características clave, con número ---------- */
.clave{display:grid;grid-template-columns:4cqmin 1fr;gap:2cqmin;align-items:start;
  padding-bottom:2.2cqmin;margin-bottom:2.2cqmin;border-bottom:1px solid var(--borde)}
.clave:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.clave .k{font-family:var(--disp);font-size:3.4cqmin;line-height:1;color:var(--acento)}
.clave>div>b{display:block;font-family:var(--disp);font-size:3cqmin;font-weight:400;letter-spacing:.03em;
  color:var(--tinta);line-height:1;margin-bottom:.9cqmin}
.clave>div>p{font-size:1.6cqmin;line-height:1.42;color:var(--tenue);margin-bottom:1.2cqmin;max-width:58ch}
.clave .canales{gap:2cqmin}
.clave .clusters{gap:1.6cqmin}

/* ---------- cabecera compacta, para la lámina del juego ---------- */
.head.compacta{margin-bottom:1.6cqmin}
.head.compacta h2{font-size:3.6cqmin;max-width:none}
.head.compacta .rotulo{margin-bottom:.9cqmin}
.slide.juego{padding:3cqmin 3.6cqmin 6.6cqmin;flex-direction:column}
.slide.juego .m27{flex:1 1 auto;height:auto;min-height:0}

/* ---------- las siete, en dos columnas ---------- */
.siete{display:grid;grid-template-columns:1fr 1fr;gap:1.4cqmin 4cqmin;align-content:start}
.uno{display:grid;grid-template-columns:3.2cqmin 1fr;gap:1.4cqmin;align-items:baseline;
  padding-bottom:1.3cqmin;border-bottom:1px solid var(--borde)}
.uno .k{font-family:var(--disp);font-size:2.2cqmin;line-height:1;color:var(--acento)}
.uno b{display:block;font-family:var(--disp);font-size:2.2cqmin;font-weight:400;letter-spacing:.03em;
  color:var(--tinta);line-height:1;margin-bottom:.5cqmin}
.uno span{font-size:1.4cqmin;color:var(--tenue);line-height:1.35;display:block}

/* la lámina del juego cede una columna para el teléfono de la racha */
.juego-fila{flex:1 1 auto;display:flex;gap:2.6cqmin;min-height:0}
.juego-fila .juego-caja{flex:1 1 auto;min-width:0;display:flex}
.slide.juego .m27-rank{flex:0 0 17cqmin;padding-left:1.6cqmin}

/* ---------- pantallas de producto integradas al deck ---------- */
.medio.pantalla{align-items:center;justify-content:center}
.medio.pantalla>.iphone{width:var(--fw,22cqmin);height:auto;flex:0 1 auto;min-height:0;max-height:100%}
.medio.pantalla>.navegador{flex:0 0 auto;width:100%;aspect-ratio:16/9;height:auto;max-height:100%}
.medio.pantalla figcaption{align-self:stretch}

/* imagen de pantalla que ya trae su propio marco de teléfono */
.medio.imagen{align-items:center;justify-content:center}
.medio.imagen>img{width:auto;height:100%;max-width:100%;max-height:100%;
  flex:0 1 auto;min-height:0;object-fit:contain;border:0;background:transparent}
.medio.imagen figcaption{align-self:stretch;text-align:left}

/* añadidos · ronda de cambios del docx */
.col.separada.sin-linea{border-left-color:transparent}

/* fondo fotográfico en las capas del juego, con velo para que el texto
   siga legible encima */
.qm-capa{overflow:hidden}
.qm-capa-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.4;z-index:0}
.qm-capa::after{content:'';position:absolute;inset:0;
  background:radial-gradient(60% 60% at 50% 50%,rgba(8,8,8,.55) 0%,rgba(8,8,8,.94) 100%);
  z-index:0}
.qm-capa-in{position:relative;z-index:1}

/* la lámina del diagrama: el teléfono se pega a la izquierda de su columna
   para quedar justo al final de las líneas que convergen */
.col.sin-linea .medio.imagen{align-items:flex-start}

/* la foto del estudio es vertical: va en columna, a la altura completa del
   juego y sin recorte. El ancho lo fija la propia proporción de la imagen. */
.juego-fila .juego-foto{flex:0 0 auto;min-height:0;margin:0;display:block}
.juego-fila .juego-foto img{height:100%;width:auto;display:block;
  border:1px solid var(--borde);background:var(--superficie)}

/* un medio vertical dentro de una columna: que la figura mida lo que mide el
   video, para que el rótulo VIDEO caiga sobre la imagen y no al costado. */
.col .medio[data-ar="9/16"]{width:-moz-fit-content;width:fit-content;margin-inline:auto;max-width:100%}

/* El botón que abre el juego es la única acción de toda la lámina, y con el
   tamaño estándar pasaba desapercibido proyectado. Late, y abajo una marca
   con flecha dice explícitamente que hay que pincharlo. El acento es fijo en
   este deck, así que el halo va con su valor literal. */
.qm-btn.llamada{font-size:2.1cqmin;letter-spacing:.24em;padding:1.7cqmin 4cqmin;
  position:relative;animation:qm-latido 1.9s ease-in-out infinite}
.qm-btn.llamada:hover{animation:none;box-shadow:0 0 4cqmin rgba(123,99,222,.95);
  transform:scale(1.03)}
@keyframes qm-latido{
  0%,100%{box-shadow:0 0 0 0 rgba(123,99,222,.5),0 0 2.2cqmin rgba(123,99,222,.3);
    transform:scale(1)}
  50%{box-shadow:0 0 0 1.3cqmin rgba(123,99,222,0),0 0 4.5cqmin rgba(123,99,222,.7);
    transform:scale(1.035)}
}
.qm-pincha{margin-top:-.7cqmin;font-family:var(--cond);font-size:1.35cqmin;
  letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:var(--acento);
  display:flex;align-items:center;gap:.8cqmin;animation:qm-parpadeo 1.9s ease-in-out infinite}
.qm-pincha::before{content:'';width:0;height:0;
  border-left:.55cqmin solid transparent;border-right:.55cqmin solid transparent;
  border-bottom:.85cqmin solid var(--acento)}
@keyframes qm-parpadeo{0%,100%{opacity:1}50%{opacity:.25}}

/* si alguien pidió menos animación, se respeta: queda el halo fijo */
@media (prefers-reduced-motion:reduce){
  .qm-btn.llamada{animation:none;box-shadow:0 0 3cqmin rgba(123,99,222,.6)}
  .qm-pincha{animation:none}
}