/* DecentMsg dentro de fanz100 — capa de MAQUETA (1-oct-2026).
   Piel de DecentMsg = la del botón y la ficha que ya viven en la portada:
   blanco + teal #14b8a6/#0d9488. Todo con prefijo dmx- para no pisar el CSS real. */
:root{
  --dmx-teal:#14b8a6;
  --dmx-teal-2:#0d9488;
  --dmx-ink:#5eead4;
  --dmx-ph:#07120f;
  --dmx-tile:rgba(20,184,166,.16);
  --dmx-name:#ffffff;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --dmx-ink:#0f766e;
    --dmx-ph:#eefaf7;
    --dmx-tile:rgba(13,148,136,.16);
    --dmx-name:#0b2522;
  }
}
:root[data-theme="light"]{
  --dmx-ink:#0f766e;
  --dmx-ph:#eefaf7;
  --dmx-tile:rgba(13,148,136,.16);
  --dmx-name:#0b2522;
}

/* ── tarjeta DecentMsg: como las de fanz con foto; la «foto» es el icono de la app
   (cuadrado blanco con el rombo, el mismo del botón flotante) sobre un fondo oscuro
   con el resplandor verde del rombo. Fondo oscuro en los dos temas: hace de foto. ── */
.card.dmx-card{border-color:rgba(0,182,151,.38)}
.card.dmx-card:hover{border-color:#00b697}
.card.dmx-card .pic{
  background-color:#0a1513;background-image:none;
}
.dmx-glow{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(closest-side at 50% 44%, rgba(0,182,151,.42), rgba(0,182,151,.10) 62%, transparent 100%),
    linear-gradient(165deg, #0f2a25 0%, #0a1513 70%);
}
.dmx-logo{
  position:absolute;z-index:1;left:50%;top:44%;
  width:40%;aspect-ratio:1/1;transform:translate(-50%,-50%);
  background:#fff;border-radius:23%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.6);
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.dmx-logo img{width:72%;height:72%;display:block}
.dmx-logo.sm{width:30%}
/* mosaicos (?m=1 … 7): el patrón lo pinta dmx.js; aquí sólo la capa y el texto */
.dmx-mos{position:absolute;inset:0;z-index:0;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.card.dmx-card:hover .dmx-mos{transform:scale(1.04)}
/* 7: nombre del grupo en el centro de la foto; el tamaño (--dmx-fs) va en función del
   ancho de la foto, así encaja igual en el muro, el carril y el móvil */
.card.dmx-card.dmx-m7 .pic{container-type:inline-size}
.dmx-midname{
  position:absolute;z-index:1;left:8%;right:8%;top:50%;transform:translateY(-50%);
  text-align:center;font-family:var(--font-display);font-weight:700;
  font-size:var(--dmx-fs, 9cqw);line-height:1.12;letter-spacing:.2px;color:#fff;
  text-wrap:balance;overflow-wrap:anywhere;
  text-shadow:0 2px 16px rgba(0,0,0,.8), 0 1px 3px rgba(0,0,0,.7);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.card.dmx-card.dmx-m6 .pname{color:#0b2522;text-shadow:none}
.card.dmx-card.dmx-m6{border-color:rgba(0,182,151,.55)}
.card.dmx-card:hover .dmx-logo,.card.dmx-card.active .dmx-logo{transform:translate(-50%,-50%) scale(1.05)}
/* placa de fotos y vídeos: la misma placa opaca que los miembros */
.card .mbadge.dmx-mbadge{gap:5px}
.card .mbadge.dmx-mbadge svg{color:#34d399}
.card .mbadge.dmx-mbadge .dmx-sep{display:inline-block;width:1px;height:12px;background:rgba(255,255,255,.22);margin:0 4px}
/* botón de la tarjeta: «DecentMsg» en el verde de DecentMsg (el de Telegram sigue como está) */
.card.dmx-card .join.dmx-join{background:#10b981;color:#03241a}
/* abajo en el centro (2-oct): como «Unirse» de los grupos de Telegram, que va arriba en el centro,
   pero abajo; arriba a la izquierda está la placa de fotos y vídeos. Sale desde abajo al aparecer */
.card.dmx-card .join.dmx-join{left:0;right:0;top:auto;bottom:12px;margin:0 auto;width:fit-content;transform:translateY(8px)}
.card.dmx-card:hover .join.dmx-join{transform:none}
.card.dmx-card .join.dmx-join:hover{background:#34d399}
.card.dmx-card.active .join.dmx-join{background:#34d399;box-shadow:0 9px 30px -3px rgba(16,185,129,.55);transform:none}
/* cards sin rótulo de foto en el carril: el icono algo menor */
.rail-scroll .dmx-logo{width:38%}

/* ── 6-oct · el nombre más legible sobre el mosaico (?tj=1 … 5; comparativa tarjetas.html).
   La tarjeta no cambia: sólo lo que separa el nombre de los rombos. .dmx-lgo va entre el mosaico y el nombre ── */
.dmx-lgo{position:absolute;inset:0;z-index:0;pointer-events:none}
/* 1 · halo más grande y más oscuro: los rombos del centro se apagan, los de los bordes siguen vivos */
.dmx-lg1 .dmx-lgo,.dmx-lg5 .dmx-lgo{background:radial-gradient(88% 50% at 50% 50%, rgba(10,21,19,.96) 0%, rgba(10,21,19,.84) 45%, rgba(10,21,19,.4) 78%, rgba(10,21,19,0) 100%)}
/* 2 · sombra marcada: un contorno oscuro fino y una sombra amplia en las propias letras */
.dmx-lg2 .dmx-midname,.dmx-lg5 .dmx-midname{
  text-shadow:0 0 1px #050a09, 1px 1px 0 rgba(5,10,9,.9), -1px -1px 0 rgba(5,10,9,.9), 1px -1px 0 rgba(5,10,9,.9), -1px 1px 0 rgba(5,10,9,.9),
    0 2px 6px rgba(0,0,0,.95), 0 0 22px rgba(0,0,0,.9)}
/* 3 · franja oscura suave a lo ancho, a la altura del nombre */
.dmx-lg3 .dmx-lgo{background:linear-gradient(to bottom, rgba(10,21,19,0) 20%, rgba(10,21,19,.9) 35%, rgba(10,21,19,.9) 65%, rgba(10,21,19,0) 80%)}
/* 6 … 10 · la 5 con el mosaico difuminado (en cqw: el mismo efecto en el muro, el móvil y el carril).
   Se amplía un poco para que el borde difuminado no deje ver el fondo de la tarjeta */
.dmx-lg6 .dmx-mos{filter:blur(.6cqw);transform:scale(1.04)}
.dmx-lg7 .dmx-mos{filter:blur(1.4cqw);transform:scale(1.06)}
.dmx-lg8 .dmx-mos{filter:blur(2.6cqw);transform:scale(1.1)}
.card.dmx-card.dmx-lg6:hover .dmx-mos{transform:scale(1.08)}
.card.dmx-card.dmx-lg7:hover .dmx-mos{transform:scale(1.1)}
.card.dmx-card.dmx-lg8:hover .dmx-mos{transform:scale(1.14)}
.dmx-lgb{position:absolute;inset:0;z-index:0;pointer-events:none;-webkit-backdrop-filter:blur(2cqw);backdrop-filter:blur(2cqw)}
.dmx-lg9 .dmx-lgb{-webkit-mask-image:radial-gradient(70% 46% at 50% 50%, #000 40%, transparent 100%);mask-image:radial-gradient(70% 46% at 50% 50%, #000 40%, transparent 100%)}
.dmx-lg10 .dmx-lgb{-webkit-mask-image:linear-gradient(to bottom, transparent 18%, #000 34%, #000 66%, transparent 82%);mask-image:linear-gradient(to bottom, transparent 18%, #000 34%, #000 66%, transparent 82%)}
/* 4 · placa oscura pegada a las letras, como la de fotos y vídeos (cada línea con la suya) */
.dmx-lg4 .dmx-midname{line-height:1.42;text-shadow:none;font-size:calc(var(--dmx-fs, 9cqw) * .84);overflow-wrap:normal;word-break:break-word}
.dmx-lg4 .dmx-midname > span{background:rgba(8,9,11,.8);padding:.06em .34em;border-radius:.24em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;box-shadow:0 2px 10px rgba(0,0,0,.35)}

/* ── B · carril propio ── */
.rail.dmx-rail{border-color:rgba(20,184,166,.35)}
.dmx-rail .rail-head h3{display:inline-flex;align-items:center;gap:9px}
.dmx-rail .rail-head h3 i{color:var(--dmx-ink)}
.dmx-h3i{width:24px;height:24px;border-radius:7px;background:#fff;padding:2px;display:block}
.dmx-rail-sub{font-size:12.5px;color:var(--muted);font-weight:600}
@media (max-width:640px){ .dmx-rail-sub{flex-basis:100%;font-size:11.5px} }

/* ── C · tercera vista bajo el selector ── */
.dmx-viewrow{display:flex;justify-content:center;padding:0 18px 18px;margin-top:-4px}
.dmx-viewbtn{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.2px;
  color:var(--dmx-ink);background:var(--surface);
  border:1.5px solid rgba(20,184,166,.5);border-radius:99px;padding:6px 8px 6px 6px;
  transition:background .2s,color .2s,border-color .2s,box-shadow .2s;
}
.dmx-viewbtn img{width:26px;height:26px;border-radius:8px;background:#fff;padding:2px;display:block}
.dmx-viewbtn .dmx-vcount{
  font-family:var(--font-body);font-size:12px;font-weight:800;
  background:rgba(20,184,166,.16);color:var(--dmx-ink);border-radius:99px;padding:3px 9px;
}
.dmx-viewbtn:hover{border-color:var(--dmx-teal);box-shadow:0 0 0 4px rgba(20,184,166,.12)}
.dmx-viewbtn.on{
  background:linear-gradient(135deg,var(--dmx-teal),var(--dmx-teal-2));color:#fff;border-color:transparent;
  box-shadow:0 10px 30px -10px rgba(20,184,166,.7);
}
.dmx-viewbtn.on .dmx-vcount{background:rgba(255,255,255,.22);color:#fff}
.dmx-viewbtn:focus-visible,.dmx-cta:focus-visible,.dmx-opt:focus-visible,.dmx-link:focus-visible,.dmx-x:focus-visible{outline:2px solid var(--dmx-teal);outline-offset:3px}
.fzsw.dmx-off .fzsw-knob{transform:translateX(23px);background:var(--faint);box-shadow:none}
.fzsw.dmx-off .fzsw-track{border-color:var(--line)}
@media (max-width:640px){ .fzsw.dmx-off .fzsw-knob{transform:translateX(18px)} }
#stage .novedad-notice.dmx-notice{color:var(--dmx-ink)}

/* ── G · interruptor mostrar / ocultar ── */
.dmx-toggle{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:13.5px;letter-spacing:.2px;
  color:var(--muted);background:var(--surface);
  border:1.5px solid var(--line);border-radius:99px;padding:6px 14px 6px 6px;
  transition:color .2s,border-color .2s,box-shadow .2s;
}
.dmx-toggle img{width:26px;height:26px;border-radius:8px;background:#fff;padding:2px;display:block;opacity:.55;transition:opacity .2s}
.dmx-toggle:hover{border-color:rgba(20,184,166,.6)}
.dmx-toggle.on{color:var(--text);border-color:rgba(20,184,166,.6);box-shadow:0 8px 26px -14px rgba(20,184,166,.8)}
.dmx-toggle.on img{opacity:1}
.dmx-sw{position:relative;width:38px;height:22px;border-radius:99px;background:var(--surface-3);flex:none;transition:background .2s}
.dmx-sw i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4);transition:transform .2s}
.dmx-toggle.on .dmx-sw{background:var(--dmx-teal)}
.dmx-toggle.on .dmx-sw i{transform:translateX(16px)}
.dmx-tstate{font-family:var(--font-body);font-size:12px;font-weight:700;color:var(--faint);min-width:52px;text-align:left}
.dmx-toggle.on .dmx-tstate{color:var(--dmx-ink)}
.dmx-toggle:focus-visible{outline:2px solid var(--dmx-teal);outline-offset:3px}
.dmx-toggle{white-space:nowrap}
@media (max-width:640px){ .dmx-toggle{font-size:12.5px} .dmx-tpre{display:none} }

/* ── G · diseños del interruptor con la piel de fanz100 (?t=2 … 7) ──
   Sólo tokens de fanz: --teal, --teal-ink, --teal-soft, --surface, --line… */
.dmx-dia{fill:currentColor;flex:none}
.dmx-t2:focus-visible,.dmx-t3:focus-visible,.dmx-t4:focus-visible,.dmx-t5 button:focus-visible,.dmx-t6:focus-visible,.dmx-t7:focus-visible{outline:2px solid var(--teal-ink);outline-offset:3px}

/* 2 · el actual con piel de fanz */
.dmx-t2{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;white-space:nowrap;
  font-family:var(--font-body);font-weight:700;font-size:13.5px;color:var(--muted);
  background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:7px 14px 7px 13px;
  box-shadow:0 4px 16px -8px rgba(0,0,0,.4);
  transition:color .2s,border-color .2s;
}
.dmx-t2 .dmx-dia{width:16px;height:16px;color:var(--faint);transition:color .2s}
.dmx-t2:hover{border-color:var(--muted)}
.dmx-t2.on{color:var(--text);border-color:var(--teal-border)}
.dmx-t2.on .dmx-dia{color:var(--teal-ink)}
.dmx-t2 .dmx-sw{background:var(--surface-3);width:36px;height:20px}
.dmx-t2 .dmx-sw i{width:14px;height:14px;background:var(--faint);box-shadow:none}
.dmx-t2.on .dmx-sw{background:var(--teal-soft);box-shadow:inset 0 0 0 1px var(--teal-border)}
.dmx-t2.on .dmx-sw i{transform:translateX(16px);background:var(--teal);box-shadow:0 0 10px var(--teal-glow)}
.dmx-t2 .dmx-tstate{color:var(--faint);min-width:50px}
.dmx-t2.on .dmx-tstate{color:var(--teal-ink)}

/* 3 · gemelo del selector Destacados / Novedades */
.dmx-t3{
  display:inline-grid;grid-template-columns:auto auto;column-gap:14px;align-items:center;justify-items:center;
  background:none;border:none;cursor:pointer;padding:2px 6px;
}
.dmx-t3-l{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-family:var(--font-display);font-weight:900;font-size:1.05rem;color:rgba(18,216,210,.42);
  transition:color .3s,text-shadow .3s;
}
.dmx-t3-l .dmx-dia{width:15px;height:15px}
.dmx-t3:hover .dmx-t3-l{color:rgba(18,216,210,.7)}
.dmx-t3.on .dmx-t3-l{color:var(--teal);text-shadow:0 0 14px rgba(18,216,210,.55),0 0 42px var(--teal-glow)}
.dmx-t3-track{position:relative;width:64px;height:32px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface-2);transition:border-color .3s}
.dmx-t3-track i{position:absolute;top:3.5px;left:4px;width:22px;height:22px;border-radius:50%;background:var(--faint);transition:transform .32s cubic-bezier(.2,.7,.2,1),background .3s,box-shadow .3s}
.dmx-t3.on .dmx-t3-track{border-color:var(--teal-border)}
.dmx-t3.on .dmx-t3-track i{transform:translateX(31px);background:var(--teal);box-shadow:0 4px 22px -2px var(--teal-glow)}
.dmx-t3-c{grid-column:1 / -1;margin-top:5px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
:root:not([data-theme="dark"]) .dmx-t3-l{color:rgba(10,155,150,.55)}
:root:not([data-theme="dark"]) .dmx-t3.on .dmx-t3-l{color:var(--teal-ink);text-shadow:none}

/* 4 · chip de filtro, como las banderas de país */
.dmx-t4{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap;
  background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:7px 14px;
  font-family:var(--font-body);font-size:13px;font-weight:650;color:var(--muted);
  transition:border-color .2s,color .2s,background .2s;
}
.dmx-t4 .dmx-dia{width:15px;height:15px}
.dmx-t4 b{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.dmx-t4 .dmx-ic{width:15px;height:15px;flex:none}
.dmx-t4:hover{border-color:var(--muted);color:var(--text)}
.dmx-t4.on{border-color:var(--teal-ink);color:var(--teal-ink);background:var(--teal-soft)}
.dmx-t4.on b{color:var(--teal-ink)}

/* 5 · segmentado */
.dmx-t5{
  display:inline-flex;gap:2px;padding:3px;
  background:var(--surface);border:1px solid var(--line);border-radius:99px;
  box-shadow:0 4px 16px -8px rgba(0,0,0,.4);
}
.dmx-t5 button{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;cursor:pointer;
  border:1px solid transparent;background:none;border-radius:99px;padding:6px 15px;
  font-family:var(--font-body);font-size:13px;font-weight:650;color:var(--muted);
  transition:background .2s,color .2s,border-color .2s;
}
/* cada mitad con el color de su marca: azul Telegram (el del botón de fanz) y verde DecentMsg
   (el de decentmsg.com y su icono); apagada, el mismo color tenue, como Destacados / Novedades */
:root{
  --dmx-tg:#2aabee; --dmx-tg-line:rgba(42,171,238,.6); --dmx-tg-soft:rgba(42,171,238,.13); --dmx-tg-dim:rgba(42,171,238,.62);
  --dmx-gr:#10b981; --dmx-gr-ink:#6ee7b7; --dmx-gr-line:rgba(16,185,129,.65); --dmx-gr-soft:rgba(16,185,129,.14); --dmx-gr-dim:rgba(110,231,183,.6);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --dmx-tg:#1c83e8; --dmx-tg-line:rgba(28,131,232,.55); --dmx-tg-soft:rgba(28,131,232,.09); --dmx-tg-dim:rgba(28,131,232,.55);
    --dmx-gr-ink:#059669; --dmx-gr-line:rgba(5,150,105,.55); --dmx-gr-soft:rgba(16,185,129,.10); --dmx-gr-dim:rgba(5,150,105,.55);
  }
}
:root[data-theme="light"]{
  --dmx-tg:#1c83e8; --dmx-tg-line:rgba(28,131,232,.55); --dmx-tg-soft:rgba(28,131,232,.09); --dmx-tg-dim:rgba(28,131,232,.55);
  --dmx-gr-ink:#059669; --dmx-gr-line:rgba(5,150,105,.55); --dmx-gr-soft:rgba(16,185,129,.10); --dmx-gr-dim:rgba(5,150,105,.55);
}
.dmx-t5 button .dmx-dia{width:14px;height:14px;color:var(--dmx-gr)}
.dmx-t5 button .dmx-tgi{width:15px;height:15px;flex:none;fill:currentColor;margin-left:-1px}
.dmx-t5 .dmx-t5-tg{color:var(--dmx-tg-dim)}
.dmx-t5 .dmx-t5-dm{color:var(--dmx-gr-dim)}
.dmx-t5 .dmx-t5-dm .dmx-dia{opacity:.6}
.dmx-t5 .dmx-t5-tg:hover{color:var(--dmx-tg)}
.dmx-t5 .dmx-t5-dm:hover{color:var(--dmx-gr-ink)}
.dmx-t5 .dmx-t5-tg.on{background:var(--dmx-tg-soft);border-color:var(--dmx-tg-line);color:var(--dmx-tg)}
.dmx-t5 .dmx-t5-dm.on{background:var(--dmx-gr-soft);border-color:var(--dmx-gr-line);color:var(--dmx-gr-ink)}
.dmx-t5 .dmx-t5-dm.on .dmx-dia{opacity:1}
.dmx-t5 button:focus-visible{outline-color:currentColor}

/* 6 · PC: dentro de la barra de Tamaño; en móvil esa barra no existe y queda el actual */
.dmx-t6{
  display:inline-flex;align-items:center;gap:11px;cursor:pointer;height:40px;white-space:nowrap;
  background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:0 16px;
  box-shadow:0 4px 16px -8px rgba(0,0,0,.4);font-family:var(--font-body);
  transition:border-color .2s;
}
.dmx-t6:hover{border-color:var(--teal-ink)}
.sizebar .dmx-t6 .dmx-dia{width:15px;height:15px;color:var(--muted)}
.sizebar .dmx-t6.on .dmx-dia{color:var(--teal-ink)}
.dmx-t6-sw{position:relative;width:34px;height:18px;border-radius:99px;background:var(--surface-3)}
.dmx-t6-sw i{position:absolute;top:0;left:0;width:18px;height:18px;border-radius:50%;background:var(--faint);border:2.5px solid var(--surface);box-shadow:0 1px 6px rgba(0,0,0,.45);transition:transform .2s,background .2s}
.dmx-t6.on .dmx-t6-sw i{transform:translateX(16px);background:var(--teal-ink)}
@media (min-width:641px){ .dmx-viewrow.dmx-ts-6{display:none} }

/* 7 · línea discreta con la letra de los contadores */
.dmx-viewrow.dmx-ts-7{margin-top:-10px;padding-bottom:12px}
.dmx-t7{
  display:inline-flex;align-items:center;gap:9px;background:none;border:none;cursor:pointer;padding:4px 8px;
  font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
  transition:color .2s;
}
.dmx-t7 .dmx-dia{width:12px;height:12px}
.dmx-t7 b{font-weight:700}
.dmx-t7:hover{color:var(--text)}
.dmx-t7.on{color:var(--muted)}
.dmx-t7.on .dmx-dia,.dmx-t7.on b{color:var(--teal-ink)}
.dmx-t7-sw{position:relative;width:26px;height:14px;border-radius:99px;background:var(--surface-3)}
.dmx-t7-sw i{position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:var(--faint);transition:transform .2s,background .2s}
.dmx-t7.on .dmx-t7-sw{background:var(--teal-soft);box-shadow:inset 0 0 0 1px var(--teal-border)}
.dmx-t7.on .dmx-t7-sw i{transform:translateX(12px);background:var(--teal)}

@media (max-width:640px){
  .dmx-t3-l{font-size:.9rem}
  .dmx-t3-track{width:54px;height:28px}
  .dmx-t3-track i{width:19px;height:19px;top:3px;left:3.5px}
  .dmx-t3.on .dmx-t3-track i{transform:translateX(25px)}
  .dmx-t3-c{font-size:9.5px;letter-spacing:.14em}
  .dmx-t5 button{font-size:12.5px;padding:6px 12px}
  .dmx-t2{font-size:12.5px}
  .dmx-t7{letter-spacing:.12em}
}

/* ── D · sello «También en DecentMsg» sobre la foto del grupo de Telegram ── */
.dmx-also{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  background:#fff;color:var(--dmx-teal-2);
  border-radius:8px;padding:4px 10px 4px 5px;
  font-size:12px;font-weight:800;letter-spacing:.2px;
  box-shadow:0 2px 12px rgba(0,0,0,.35);
}
.dmx-also img{width:18px;height:18px;border-radius:5px;display:block}
/* abajo a la derecha (2-oct): va dentro del pie de la tarjeta. El nombre a todo el ancho y, en la
   última fila, la fecha a la izquierda y el sello a la derecha. Si la tarjeta es tan estrecha que no
   caben los dos (carrusel, parejas, columnas pequeñas), el sello baja a su propia fila */
.card.dmx-has .pic{container-type:inline-size}
.card.dmx-has .cfoot{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:center}
.card.dmx-has .pname{grid-column:1 / -1;grid-row:1}
.card.dmx-has .pdate{grid-column:1;grid-row:2}
.card.dmx-has .dmx-also{grid-column:2;grid-row:2;justify-self:end}
@container (max-width:300px){
  .card.dmx-has .dmx-also{grid-column:1 / -1;grid-row:3;margin-top:5px}
}
/* tan estrecha que ni en su fila cabe entero (carrusel «Los más populares» en móvil): rombo + «Respaldado» */
@container (max-width:200px){
  .card.dmx-has .dmx-also-en{display:none}
}
.rail-scroll .dmx-also{font-size:11px;padding:3px 8px 3px 4px}
.rail-scroll .dmx-also img{width:16px;height:16px}
.card.dmx-has{border-color:rgba(20,184,166,.45)}

/* ── F · bloque nuevo dentro de la ficha del botón de siempre ── */
.dmx-gate{
  margin:0 0 16px;padding:14px 14px 12px;border-radius:14px;
  background:#f0fdfa;border:1px solid #ccfbf1;text-align:left;
}
.dmx-gate-h{font-weight:800;font-size:15px;color:#0f172a;line-height:1.3}
.dmx-gate-s{font-size:13px;color:#475569;margin-top:2px;font-variant-numeric:tabular-nums}
.dmx-gate-cta{
  display:block;width:100%;margin-top:11px;padding:10px 12px;border-radius:11px;cursor:pointer;
  background:#fff;border:1.5px solid var(--dmx-teal);color:var(--dmx-teal-2);
  font:inherit;font-weight:800;font-size:14px;text-align:center;
}
.dmx-gate-cta:hover{background:#ccfbf1}

/* ── ventana de unión y de elección (misma piel que la ficha real del botón) ── */
.dmx-ov{
  position:fixed;inset:0;z-index:100001;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(8,12,16,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .18s ease;
}
.dmx-ov.in{opacity:1}
/* cerrada: fuera del todo (con display:flex, el [hidden] solo dejaba una capa invisible que se comía los clics) */
.dmx-ov[hidden]{display:none}
.dmx-modal{
  width:100%;max-width:390px;background:#fff;color:#0f172a;border-radius:22px;overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
  transform:translateY(12px) scale(.98);transition:transform .22s ease;
  font-family:var(--font-body);
}
.dmx-ov.in .dmx-modal{transform:none}
.dmx-top{
  position:relative;text-align:center;color:#fff;padding:26px 24px 22px;
  background:linear-gradient(135deg,var(--dmx-teal),var(--dmx-teal-2));
}
.dmx-badge{
  width:62px;height:62px;border-radius:16px;background:#fff;margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.dmx-badge img{width:44px;height:44px;display:block}
.dmx-kick{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.dmx-name{
  font-family:var(--font-display);font-weight:700;font-size:22px;line-height:1.2;margin-top:4px;
  text-wrap:balance;overflow-wrap:anywhere;
}
.dmx-meta{font-size:13px;font-weight:600;opacity:.92;margin-top:6px;font-variant-numeric:tabular-nums}
.dmx-x{
  position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.2);border:none;color:#fff;font-size:22px;line-height:1;
}
.dmx-x:hover{background:rgba(255,255,255,.32)}
.dmx-body{padding:20px 22px 20px;text-align:center}
.dmx-claim{font-size:16px;line-height:1.45;color:#334155;font-weight:600;max-width:300px;margin:0 auto 18px;text-wrap:balance}
.dmx-cta{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:14px;border-radius:14px;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--dmx-teal),var(--dmx-teal-2));color:#fff;
  font:inherit;font-weight:800;font-size:15.5px;
}
.dmx-cta img{width:22px;height:22px;border-radius:6px;background:#fff;padding:1px}
.dmx-cta:hover{filter:brightness(1.06)}
.dmx-sub{font-size:13.5px;color:#475569;margin-top:12px;line-height:1.45}
.dmx-link{background:none;border:none;padding:0;font:inherit;font-weight:800;color:var(--dmx-teal-2);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.dmx-warn{
  text-align:left;font-size:14px;line-height:1.45;color:#7c2d12;
  background:#fff7ed;border:1px solid #fed7aa;border-radius:12px;padding:11px 13px;margin:0 0 14px;
}
.dmx-note{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:13px;font-size:12.5px;font-weight:700;color:#0f766e}
.dmx-win{width:13px;height:13px;fill:currentColor}

/* aviso «Abriendo DecentMsg…»: misma forma, texto y botones que el de «Unirme» de la Guía,
   con los colores de la portada y el verde de DecentMsg en el botón principal */
.dmx-gmodal{
  width:100%;max-width:460px;padding:26px;border-radius:16px;
  background:var(--surface,#141619);color:var(--text,#f2f4f5);border:1px solid var(--line,#26292e);
  box-shadow:0 24px 80px rgba(0,0,0,.6);font-family:var(--font-body);
  transform:translateY(10px) scale(.98);transition:transform .18s ease;
}
.dmx-ov.in .dmx-gmodal{transform:none}
.dmx-gmodal:focus,.dmx-modal:focus{outline:none}
.dmx-gmodal h3{font-size:17.5px;font-weight:800;margin-bottom:8px;line-height:1.3}
.dmx-gbody{color:var(--muted,#9aa3a8);font-size:14px;line-height:1.6}
.dmx-gbody b{color:var(--text,#f2f4f5)}
.dmx-gacts{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.dmx-gbtn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;
  padding:11px 16px;border-radius:12px;border:1px solid transparent;cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:700;transition:border-color .2s,color .2s,transform .2s,box-shadow .2s;
}
.dmx-gbtn.ghost{background:var(--surface-2,#1b1e22);border-color:var(--line,#26292e);color:var(--text,#f2f4f5)}
.dmx-gbtn.ghost:hover{border-color:#10b981;color:var(--dmx-gr-ink)}
.dmx-gbtn.primary{background:linear-gradient(135deg,#34d399,#10b981);color:#03241a;box-shadow:0 4px 20px rgba(16,185,129,.3)}
.dmx-gbtn.primary:hover{transform:translateY(-1px);box-shadow:0 7px 28px rgba(16,185,129,.45)}
.dmx-gbtn:focus-visible{outline:2px solid #10b981;outline-offset:2px}
@media (prefers-reduced-motion: reduce){ .dmx-gmodal,.dmx-gbtn{transition:none} }

/* avisos cortos (?a=1 … 5): poco texto, la descarga del sistema del visitante delante */
.dmx-gm1,.dmx-gm2,.dmx-gm3,.dmx-gm4,.dmx-gm5{max-width:380px;padding:22px}
.dmx-ghead{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.dmx-ghead.center{justify-content:center;margin-bottom:12px}
.dmx-ghead h3{margin:0;overflow-wrap:anywhere}
.dmx-gmodal h3.center{text-align:center;margin-bottom:16px}
.dmx-gicon{width:42px;height:42px;flex:none;border-radius:11px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.dmx-gicon img{width:72%;height:72%;display:block}
.dmx-ghead.center .dmx-gicon{width:54px;height:54px;border-radius:14px}
.dmx-gtt{min-width:0}
.dmx-gline{color:var(--muted,#9aa3a8);font-size:14px;line-height:1.5;margin:0 0 4px}
.dmx-gline.sm{font-size:13px;margin:2px 0 0}
.dmx-gmodal > .dmx-gbtn,.dmx-gsteps .dmx-gbtn{width:100%;margin-top:12px;padding:12px 16px;font-size:14.5px}
.dmx-gmodal > .dmx-gbtn + .dmx-gbtn{margin-top:10px}
.dmx-gbtn .dmx-os{width:18px;height:18px;fill:currentColor;flex:none}
.dmx-gbtn.wide{width:100%}
.dmx-osnote{margin-top:12px;font-size:13.5px;line-height:1.45;color:var(--text,#f2f4f5)}
.dmx-gacts.tight{margin-top:10px}
.dmx-glinks{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:14px;font-size:12.5px;color:var(--faint,#5c6469)}
.dmx-glinks button{background:none;border:none;padding:2px;cursor:pointer;font:inherit;font-weight:600;color:var(--muted,#9aa3a8)}
.dmx-glinks button:hover{color:var(--dmx-gr-ink);text-decoration:underline;text-underline-offset:2px}
.dmx-gmore{margin-top:14px;padding-top:12px;border-top:1px solid var(--line,#26292e);text-align:center;font-size:13px;color:var(--muted,#9aa3a8)}
.dmx-gmore a{color:var(--dmx-gr-ink);font-weight:700;text-decoration:none}
.dmx-gmore a:hover{text-decoration:underline;text-underline-offset:2px}
.dmx-gmore a:focus-visible{outline:2px solid #10b981;outline-offset:2px;border-radius:3px}
/* 2 · pasos numerados (son un orden real: primero probar, después descargar) */
.dmx-gsteps{list-style:none;display:grid;gap:14px;margin:12px 0 0;padding:0}
.dmx-gsteps li{display:grid;grid-template-columns:26px 1fr;gap:10px;font-size:14px;line-height:1.45;color:var(--muted,#9aa3a8)}
.dmx-gsteps b{color:var(--text,#f2f4f5)}
.dmx-gn{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;background:rgba(16,185,129,.16);color:var(--dmx-gr-ink)}
.dmx-gmini{display:block;margin-top:8px;background:none;border:1px solid var(--line,#26292e);border-radius:99px;padding:5px 12px;font:inherit;font-size:12.5px;font-weight:700;color:var(--text,#f2f4f5);cursor:pointer}
.dmx-gmini:hover{border-color:#10b981;color:var(--dmx-gr-ink)}
/* 3 · miniatura del grupo (su mosaico) y «entrando» */
.dmx-gthumb{width:58px;height:58px;flex:none;border-radius:12px;border:1px solid rgba(16,185,129,.4);background-size:auto,auto,40px 40px !important}
.dmx-gkick{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--dmx-gr-ink);margin-bottom:3px}
.dmx-gspin{width:12px;height:12px;border-radius:50%;border:2px solid rgba(16,185,129,.3);border-top-color:#10b981;animation:dmxspin .8s linear infinite;flex:none}
@keyframes dmxspin{to{transform:rotate(360deg)}}
/* 5 · «Abriendo DecentMsg…»: el nombre de la app en verde (✅ 6-oct), como en «Necesitas DecentMsg» */
.dmx-gdm{font-style:normal;color:var(--dmx-gr-ink)}
/* 5 · barra de espera de 2,5 s antes de ofrecer la descarga */
.dmx-gbar{height:4px;border-radius:99px;background:var(--surface-2,#1b1e22);overflow:hidden;margin-top:6px}
.dmx-gbar i{display:block;height:100%;width:100%;background:#10b981;transform-origin:left;animation:dmxbar 2.5s linear forwards}
@keyframes dmxbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){ .dmx-gspin,.dmx-gbar i{animation:none} }

/* ── el grupo dentro de «Necesitas DecentMsg» (6-oct, ?n=1 … 5): su mosaico y sus fotos y vídeos
   para que el nombre se lea como «el grupo que acabas de tocar» ── */
.dmx-nst{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:12.5px;font-weight:700;color:var(--muted,#9aa3a8);font-variant-numeric:tabular-nums}
.dmx-nst > span{display:inline-flex;align-items:center;gap:5px}
.dmx-nst svg{width:14px;height:14px;flex:none;color:#34d399}
.dmx-nthumb{display:block;flex:none;width:48px;height:48px;border-radius:10px;border:1px solid rgba(16,185,129,.45)}
.dmx-nthumb.lg{width:58px;height:58px;border-radius:12px}
.dmx-nname{font-size:15.5px;font-weight:800;line-height:1.25;color:var(--text,#f2f4f5);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 1 · fila del grupo */
.dmx-nrow{display:flex;align-items:center;gap:12px;margin:4px 0 12px;padding:10px 12px 10px 10px;border-radius:12px;
  background:var(--surface-2,#1b1e22);border:1px solid var(--line,#26292e)}
.dmx-ntt{min-width:0;display:grid;gap:4px}
/* 2 · la tarjeta en pequeño, a sangre arriba de la ventana */
.dmx-gmodal.dmx-n2{overflow:hidden}
.dmx-nban{position:relative;height:136px;margin:-22px -22px 16px;container-type:inline-size;border-bottom:1px solid rgba(16,185,129,.38)}
.dmx-nban-mos{position:absolute;inset:0;display:block}
.dmx-nban-name{
  position:absolute;z-index:1;left:8%;right:8%;top:calc(50% + 12px);transform:translateY(-50%);
  text-align:center;font-family:var(--font-display);font-weight:700;
  font-size:min(calc(var(--dmx-fs, 9cqw) * .9), 34px);line-height:1.12;letter-spacing:.2px;color:#fff;
  text-wrap:balance;overflow-wrap:anywhere;
  text-shadow:0 2px 16px rgba(0,0,0,.8), 0 1px 3px rgba(0,0,0,.7);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
/* la placa de fotos y vídeos de la tarjeta, igual que en el muro */
.dmx-nplaca{position:absolute;z-index:2;top:10px;left:10px;display:inline-flex;align-items:center;gap:5px;
  background:rgba(8,9,11,.86);border-radius:8px;padding:4px 9px;font-size:12.5px;font-weight:800;color:#fff;letter-spacing:.3px;
  box-shadow:0 2px 10px rgba(0,0,0,.35);font-variant-numeric:tabular-nums}
.dmx-nplaca svg{width:13px;height:13px;flex:none;color:#34d399}
.dmx-nplaca i{display:inline-block;width:1px;height:12px;background:rgba(255,255,255,.22);margin:0 4px}
/* 2a · 2b · 2c (✅ 6-oct: la 2 con el grupo más discreto y «Necesitas DecentMsg» más visible): franja más baja,
   mosaico apagado, nombre más pequeño y sin la placa; el aviso, más grande y con la primera frase en blanco */
.dmx-n2l .dmx-nban::after{content:"";position:absolute;inset:0;background:rgba(10,21,19,.55)}
.dmx-n2l .dmx-nban-name{z-index:2;top:50%;color:rgba(255,255,255,.86);font-size:min(calc(var(--dmx-fs, 9cqw) * .55), 20px);
  text-shadow:0 1px 8px rgba(0,0,0,.7)}
.dmx-n2l .dmx-ghead{margin-bottom:12px}
.dmx-n2l .dmx-gicon{width:50px;height:50px;border-radius:13px}
.dmx-n2l h3{font-size:21px;line-height:1.2}
.dmx-n2l h3 em{font-style:normal;color:var(--dmx-gr-ink)}
.dmx-n2l .dmx-gline{font-size:14.5px}
.dmx-n2l .dmx-gline b{color:var(--text,#f2f4f5)}
/* ✅ 6-oct: en móvil, «Descárgalo gratis y vuelve a tocarlo.» en su propia línea, punto y aparte */
@media (max-width:640px){ .dmx-n2l .dmx-gline b{display:block;margin-bottom:2px;text-wrap:balance} }
/* 2a · franja baja */
.dmx-n2a .dmx-nban{height:84px;margin-bottom:18px}
/* 2b · el icono de la app monta sobre la franja; todo centrado */
.dmx-n2b{text-align:center}
.dmx-n2b .dmx-nban{height:92px;margin-bottom:0}
.dmx-n2b .dmx-nban-name{top:34px}
.dmx-n2b-ic{position:relative;z-index:3;display:flex;justify-content:center;margin:-30px 0 12px}
.dmx-n2b-ic .dmx-gicon{width:60px;height:60px;border-radius:16px;box-shadow:0 0 0 4px var(--surface,#141619),0 8px 24px rgba(0,0,0,.45)}
.dmx-n2b h3{margin:0 0 8px}
/* 2c · franja fina: el nombre en una línea, a la izquierda */
.dmx-n2c .dmx-nban{height:50px;margin-bottom:18px}
.dmx-n2c .dmx-nban-name{left:16px;right:16px;text-align:left;font-size:15px;-webkit-line-clamp:1;text-wrap:nowrap;white-space:nowrap;text-overflow:ellipsis;display:block}
/* 3 · etiqueta dentro de la frase */
.dmx-nchip{display:inline-flex;align-items:center;gap:6px;vertical-align:-5px;max-width:100%;
  padding:2px 9px 2px 3px;border-radius:8px;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.45);
  color:var(--text,#f2f4f5);font-weight:800;line-height:1.35}
.dmx-nchip > .notranslate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.dmx-nchip-mos{display:block;flex:none;width:20px;height:20px;border-radius:5px}
/* 4 · el grupo como título y lo que hace falta debajo */
.dmx-n4 .dmx-ghead{margin-bottom:14px}
.dmx-n4 .dmx-gtt{display:grid;gap:5px}
.dmx-n4 .dmx-gtt h3{font-size:19px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dmx-nneed{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:12px;background:rgba(16,185,129,.10);border:1px solid rgba(16,185,129,.35)}
.dmx-nneed .dmx-gicon{width:32px;height:32px;border-radius:8px;box-shadow:none}
.dmx-nneed p{margin:0;font-size:13.5px;line-height:1.45;color:var(--muted,#9aa3a8)}
.dmx-nneed b{color:var(--text,#f2f4f5)}
/* 5 · centrado: foto redonda con la app en la esquina */
.dmx-n5{text-align:center}
.dmx-nav{position:relative;width:84px;height:84px;margin:4px auto 12px}
.dmx-nav-mos{display:block;width:100%;height:100%;border-radius:50%;border:2px solid rgba(16,185,129,.55);box-shadow:0 8px 26px rgba(0,0,0,.45)}
.dmx-nav-app{position:absolute;right:-4px;bottom:-4px;width:32px;height:32px;border-radius:9px;background:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px var(--surface,#141619)}
.dmx-nav-app img{width:72%;height:72%;display:block}
.dmx-gmodal h3.dmx-nav-name{font-size:20px;line-height:1.2;margin:0 0 6px;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dmx-nav-st .dmx-nst{justify-content:center}
.dmx-gline.dmx-nav-l{margin:14px 0 0}
.dmx-nav-l b{color:var(--text,#f2f4f5)}

/* elección Telegram / DecentMsg (D) */
.dmx-chead{display:flex;align-items:center;gap:12px;padding:18px 54px 14px 18px;position:relative}
.dmx-cph{width:58px;height:58px;border-radius:14px;object-fit:cover;flex:none;background:#e2e8f0}
.dmx-ckick{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#64748b}
.dmx-cname{font-family:var(--font-display);font-weight:700;font-size:19px;line-height:1.2;color:#0f172a;overflow-wrap:anywhere}
.dmx-x.dark{background:#f1f5f9;color:#334155}
.dmx-x.dark:hover{background:#e2e8f0}
.dmx-opts{display:flex;flex-direction:column;gap:10px;padding:0 16px 18px}
.dmx-opt{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  background:#fff;border:1.5px solid #e2e8f0;border-radius:14px;padding:12px 12px;font:inherit;color:#0f172a;
  transition:border-color .2s,background .2s;
}
.dmx-opt:hover{border-color:#94a3b8}
.dmx-opt.dm{border-color:var(--dmx-teal);background:#f0fdfa}
.dmx-opt.dm:hover{background:#ccfbf1}
.dmx-oi{width:42px;height:42px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center}
.dmx-oi.tg{background:linear-gradient(135deg,#3fb0f5,#1c83e8);color:#fff}
.dmx-oi.tg svg{width:22px;height:22px;fill:currentColor}
.dmx-oi.dm{background:#fff;border:1.5px solid #99f6e4}
.dmx-oi.dm img{width:30px;height:30px}
.dmx-ot{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.dmx-ot b{font-size:15.5px}
.dmx-ot small{font-size:12.5px;color:#64748b;font-weight:600;font-variant-numeric:tabular-nums}
.dmx-ot em{font-style:normal;font-size:12.5px;color:#0f766e;font-weight:700;margin-top:2px}
.dmx-oa{font-size:22px;color:#94a3b8;flex:none}

/* aviso de maqueta */
.dmx-toast{
  position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom, 0px));z-index:100002;
  transform:translate(-50%,16px);opacity:0;pointer-events:none;
  max-width:min(92vw,520px);
  background:rgba(14,16,19,.95);color:#f2f4f5;border:1px solid rgba(20,184,166,.45);
  border-radius:99px;padding:10px 18px;font-size:13.5px;font-weight:600;text-align:center;
  box-shadow:0 12px 34px rgba(0,0,0,.45);
  transition:opacity .22s ease,transform .22s ease;
}
.dmx-toast.in{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion: reduce){
  .dmx-ov,.dmx-modal,.dmx-toast{transition:none}
}

/* ── REAL (fanz100.html): diálogo «¿Abrir DecentMsg?» de los navegadores Chromium ──
   Va pegado arriba, como el de Opera / Chrome / Edge, por encima del aviso de la web. */
.dmx-bdlg{
  position:fixed;top:8px;left:50%;z-index:100003;width:min(452px,calc(100vw - 24px));
  transform:translate(-50%,-6px);opacity:0;transition:opacity .14s ease,transform .14s ease;
  padding:20px 22px 18px;border-radius:12px;
  background:#2d2e31;color:#e8eaed;border:1px solid #3c4043;
  box-shadow:0 12px 34px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.35);
  font:13px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
}
.dmx-bdlg.in{opacity:1;transform:translate(-50%,0)}
.dmx-bdlg[hidden]{display:none}
.dmx-bdlg-t{font-size:15px;font-weight:600;margin-bottom:10px}
.dmx-bdlg-s{color:#bdc1c6;margin-bottom:14px}
.dmx-bdlg-c{display:flex;gap:10px;align-items:flex-start;color:#e8eaed;cursor:pointer;margin-bottom:18px}
.dmx-bdlg-c input{margin:2px 0 0;width:15px;height:15px;accent-color:#8ab4f8;flex:none}
.dmx-bdlg-a{display:flex;justify-content:flex-end;gap:8px}
.dmx-bdlg-a button{
  font:inherit;font-weight:500;padding:7px 16px;border-radius:999px;cursor:pointer;
  background:transparent;color:#8ab4f8;border:1px solid #5f6368;
}
.dmx-bdlg-a button.ok{background:#8ab4f8;color:#062e6f;border-color:#8ab4f8}
.dmx-bdlg-a button:focus-visible{outline:2px solid #8ab4f8;outline-offset:2px}

/* ── Un solo control para Destacados / Novedades y DecentMsg (?s=1 … 5, comparativa 2-oct) ──
   Misma función que los dos de ahora; sin brillo y en una fila. Colores: teal Destacados,
   magenta Novedades (los de fanz) y verde DecentMsg; nada más. */
.sortbar.dmx-sel{padding:0 16px 18px}
.dmx-sel button:not(.fzsw-lbl){font-family:var(--font-body);cursor:pointer;-webkit-tap-highlight-color:transparent}
.dmx-sel button:focus-visible{outline:2px solid var(--teal-ink);outline-offset:3px}
.dmx-sel .dmx-dia{width:13px;height:13px;flex:none}
.dmx-s-n{font-family:var(--font-body);font-size:12px;font-weight:600;color:var(--faint);margin-left:7px}
.dmx-s-chk{width:13px;height:13px;flex:none}
.dmx-s-sw{position:relative;flex:none;width:34px;height:20px;border-radius:99px;background:var(--surface-3);transition:background .2s}
.dmx-s-sw i{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s}
.dmx-s-sw.on{background:var(--dmx-gr)}
.dmx-s-sw.on i{transform:translateX(14px)}
.dmx-s-sw.sm{width:26px;height:15px}
.dmx-s-sw.sm i{top:2px;left:2px;width:11px;height:11px}
.dmx-s-sw.sm.on i{transform:translateX(11px)}

/* 1 · pestañas de texto y un chip */
.dmx-s1{display:flex;align-items:center;justify-content:center;gap:20px}
.dmx-s1-tab{
  position:relative;background:none;border:0;padding:6px 0 9px;white-space:nowrap;
  font-family:var(--font-display)!important;font-weight:700;font-size:16px;color:var(--muted);transition:color .2s;
}
.dmx-s1-tab:hover{color:var(--text)}
.dmx-s1-tab.on.dest{color:var(--teal-ink)}
.dmx-s1-tab.on.nov{color:var(--magenta-ink)}
.dmx-s1-tab::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:currentColor;
  transform:scaleX(0);transition:transform .25s ease;
}
.dmx-s1-tab.on::after{transform:scaleX(1)}
.dmx-s1-sep{flex:none;width:1px;height:20px;background:var(--line)}
.dmx-s1-dm{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;white-space:nowrap;
  border:1px solid var(--line);background:none;color:var(--muted);font-size:13px;font-weight:650;
  transition:color .2s,border-color .2s,background .2s;
}
.dmx-s1-dm .dmx-dia{color:var(--faint)}
.dmx-s1-dm:hover{color:var(--text)}
.dmx-s1-dm.on{color:var(--dmx-gr-ink);border-color:var(--dmx-gr-line);background:var(--dmx-gr-soft)}
.dmx-s1-dm.on .dmx-dia{color:var(--dmx-gr)}

/* 2 · un segmentado y el rombo solo */
.dmx-s2{display:flex;align-items:center;justify-content:center;gap:8px}
.dmx-s2-seg{display:inline-flex;gap:2px;padding:3px;background:var(--surface);border:1px solid var(--line);border-radius:99px}
.dmx-s2-seg button{
  border:1px solid transparent;background:none;border-radius:99px;padding:7px 18px;white-space:nowrap;
  font-size:13.5px;font-weight:650;color:var(--muted);transition:color .2s,background .2s,border-color .2s;
}
.dmx-s2-seg button:hover{color:var(--text)}
.dmx-s2-seg button.on.dest{background:var(--teal-soft);border-color:var(--teal-border);color:var(--teal-ink)}
.dmx-s2-seg button.on.nov{background:var(--magenta-soft);border-color:rgba(255,46,196,.45);color:var(--magenta-ink)}
.dmx-s2-dm{
  position:relative;flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);color:var(--faint);transition:color .2s,background .2s,border-color .2s;
}
.dmx-s2-dm .dmx-dia{width:16px;height:16px}
.dmx-s2-dm::after{   /* apagado: rombo tachado */
  content:"";position:absolute;width:22px;height:2px;border-radius:2px;background:currentColor;
  transform:rotate(-45deg);box-shadow:0 0 0 2px var(--surface);
}
.dmx-s2-dm.on{background:var(--dmx-gr-soft);border-color:var(--dmx-gr-line);color:var(--dmx-gr)}
.dmx-s2-dm.on::after{display:none}

/* 6 · el selector de ahora + el botón del 2 con el icono de la app (cuadrado blanco y rombo,
   el mismo objeto que el botón flotante de fanz): encendido a todo color, apagado gris y tachado */
.dmx-s6row{padding-bottom:16px}
.dmx-s6-dm{
  position:relative;flex:none;width:40px;height:40px;padding:0;border-radius:11px;cursor:pointer;
  display:grid;place-items:center;background:#fff;border:2px solid #14b8a6;
  box-shadow:0 4px 18px -4px rgba(20,184,166,.45);transition:opacity .2s,filter .2s,box-shadow .2s,border-color .2s;
  -webkit-tap-highlight-color:transparent;
}
.dmx-s6-dm img{width:25px;height:25px;object-fit:contain;display:block}
.dmx-s6-dm::after{
  content:"";position:absolute;width:30px;height:2.5px;border-radius:2px;background:#3b4045;
  transform:rotate(-45deg);opacity:0;transition:opacity .2s;
}
.dmx-s6-dm:not(.on){filter:grayscale(1);opacity:.42;border-color:#9aa3a8;box-shadow:none}
.dmx-s6-dm:not(.on)::after{opacity:1}
.dmx-s6-dm:hover{opacity:1}
.dmx-s6-dm:focus-visible{outline:2px solid var(--teal-ink);outline-offset:3px}

/* 7 … 9 · a la derecha del selector de ahora: enseñar / ocultar, sin parecer el icono de la app.
   Verde DecentMsg encendido; gris apagado. Debajo, «DecentMsg» como «41 grupos activos». */
.dmx-dmsep{flex:none;width:1px;height:30px;background:var(--line);margin:0 -6px}
.dmx-dmcol{flex:none}
.dmx-dmcap{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:3px;white-space:nowrap;pointer-events:none;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);transition:color .2s;
}
.dmx-dmcol:has(.on) .dmx-dmcap{color:var(--dmx-gr-dim)}
.dmx-dmt{
  position:relative;flex:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;
  display:grid;place-items:center;color:var(--faint);transition:color .2s,background .2s,border-color .2s;
}
.dmx-dmt:focus-visible{outline:2px solid var(--teal-ink);outline-offset:3px}
.dmx-dmt.on{color:var(--dmx-gr)}
/* 7 · interruptor pequeño con el rombo en la bola */
.dmx-dm7{background:none;border:0;width:auto;height:auto}
.dmx-mtrack{
  position:relative;display:block;width:50px;height:28px;border-radius:99px;
  background:var(--surface-2);border:1.5px solid var(--line);transition:background .25s,border-color .25s;
}
.dmx-mtrack i{
  position:absolute;top:2.5px;left:3px;width:20px;height:20px;border-radius:50%;background:#5c6469;
  display:grid;place-items:center;transition:transform .28s cubic-bezier(.2,.7,.2,1),background .25s;
}
.dmx-mtrack .dmx-dia{width:11px;height:11px;color:var(--surface-2);transition:color .25s}
.dmx-dm7.on .dmx-mtrack{background:var(--dmx-gr-soft);border-color:var(--dmx-gr-line)}
.dmx-dm7.on .dmx-mtrack i{transform:translateX(21px);background:#fff}
.dmx-dm7.on .dmx-mtrack .dmx-dia{color:var(--dmx-gr)}
/* 8 · ojo con el rombo de pupila; apagado, tachado */
.dmx-dm8,.dmx-dm9{width:40px;height:40px;border-radius:50%;background:var(--surface);border:1px solid var(--line)}
.dmx-dm8.on,.dmx-dm9.on{background:var(--dmx-gr-soft);border-color:var(--dmx-gr-line)}
.dmx-eye{width:22px;height:22px;overflow:visible}
.dmx-eye .w{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
.dmx-eye .p{fill:currentColor}
.dmx-eye .x{stroke:currentColor;stroke-width:2;stroke-linecap:round;opacity:1;transition:opacity .2s}
.dmx-dmt.on .dmx-eye .x{opacity:0}
/* 9 · rombo con ✓; apagado, rombo hueco sin ✓ */
.dmx-rb{position:relative;display:grid;place-items:center}
.dmx-rb .dmx-dia{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;transition:fill .2s}
.dmx-dm9.on .dmx-rb .dmx-dia{fill:currentColor}
.dmx-rb i{
  position:absolute;right:-8px;bottom:-7px;width:14px;height:14px;border-radius:50%;
  display:grid;place-items:center;background:var(--dmx-gr);color:#fff;box-shadow:0 0 0 2px var(--surface);
  transform:scale(0);transition:transform .2s;
}
.dmx-rb i .dmx-s-chk{width:9px;height:9px}
.dmx-dm9.on .dmx-rb i{transform:scale(1)}
/* mezclas del 7 y el 8 */
.dmx-dm10,.dmx-dm11,.dmx-dm12{background:none;border:0}
.dmx-mtrack.big{width:56px;height:30px}
.dmx-mtrack.big i{top:2.5px;left:3px;width:22px;height:22px}
.dmx-mtrack.big .dmx-dia{width:12px;height:12px}
/* 10 · interruptor con el ojo en la bola */
.dmx-mtrack i .dmx-eye{width:15px;height:15px;color:var(--surface-2)}
.dmx-dm10.on .dmx-mtrack{background:var(--dmx-gr-soft);border-color:var(--dmx-gr-line)}
.dmx-dm10.on .dmx-mtrack i{transform:translateX(25px);background:#fff}
.dmx-dm10.on .dmx-mtrack i .dmx-eye{color:var(--dmx-gr)}
/* 11 · ojo e interruptor en una pastilla */
.dmx-pill{
  display:inline-flex;align-items:center;gap:9px;padding:5px 6px 5px 11px;border-radius:99px;
  background:var(--surface);border:1px solid var(--line);transition:border-color .2s,background .2s;
}
.dmx-pill .dmx-eye{width:20px;height:20px}
.dmx-mtrack.sm{width:36px;height:20px}
.dmx-mtrack.sm i{top:1.5px;left:2px;width:14px;height:14px}
.dmx-dm11.on .dmx-pill{border-color:var(--dmx-gr-line);background:var(--dmx-gr-soft)}
.dmx-dm11.on .dmx-mtrack.sm{background:var(--dmx-gr);border-color:var(--dmx-gr)}
.dmx-dm11.on .dmx-mtrack.sm i{transform:translateX(15px);background:#fff}
/* 12 · el 7 más grande; encendido, carril verde apagado (no el verde vivo, que llamaba demasiado)
   para que destaque la bola blanca con el rombo */
.dmx-dm12.on .dmx-mtrack{background:rgba(16,185,129,.3);border-color:rgba(16,185,129,.45)}
/* rombo grande: la bola ocupa casi todo el alto del carril y el rombo, dos tercios de la bola */
.dmx-dm12 .dmx-mtrack.big{width:58px;height:32px}
.dmx-dm12 .dmx-mtrack.big i{top:1.5px;left:1.5px;width:26px;height:26px}
.dmx-dm12 .dmx-mtrack.big .dmx-dia{width:17px;height:17px;color:#2a2e33}
.dmx-dm12.on .dmx-mtrack i{transform:translateX(26px);background:#fff}
.dmx-dm12.on .dmx-mtrack .dmx-dia{color:var(--dmx-gr)}
/* 13 · casilla con ✓ y el rombo al lado */
.dmx-dm13{background:none;border:0}
.dmx-cb{display:inline-flex;align-items:center;gap:7px}
.dmx-cbox{
  width:22px;height:22px;border-radius:6px;display:grid;place-items:center;
  border:2px solid var(--line);background:var(--surface);color:transparent;transition:background .2s,border-color .2s,color .2s;
}
.dmx-cbox .dmx-s-chk{width:14px;height:14px}
.dmx-cb .dmx-dia{width:17px;height:17px}
.dmx-dm13.on .dmx-cbox{border-color:rgba(16,185,129,.6);background:rgba(16,185,129,.3);color:#d1fae5}
/* 16 · casilla con el rombo de DecentMsg dentro; vacía y oscura al apagarla. Encendida, el color
   tiene que leerse como «casilla marcada» y no como el icono de la app (cuadrado claro con el rombo
   verde, que parece un botón de descarga). ?c=1 … 4:
   1 = relleno verde apagado y rombo blanco: como una casilla marcada (color de acento + marca blanca)
   2 = teal de fanz y rombo oscuro: el color de los botones de la portada
   3 = sólo borde y rombo verdes, sin relleno
   4 = gris claro y rombo verde (el anterior) */
.dmx-dm16{background:none;border:0}
.dmx-cbox.dm{width:26px;height:26px;border-radius:7px}
.dmx-cbox.dm .dmx-dia{width:15px;height:15px;opacity:0;transform:scale(.6);transition:opacity .18s,transform .18s}
.dmx-dm16:hover .dmx-cbox.dm{border-color:var(--muted)}
.dmx-dm16.on .dmx-cbox.dm .dmx-dia{opacity:1;transform:none}
.dmx-dm16.on .dmx-cbox.dm.c1{border-color:rgba(16,185,129,.62);background:rgba(16,185,129,.62)}
.dmx-dm16.on .dmx-cbox.dm.c1 .dmx-dia{color:#fff}
.dmx-dm16.on .dmx-cbox.dm.c2{border-color:var(--teal);background:var(--teal)}
.dmx-dm16.on .dmx-cbox.dm.c2 .dmx-dia{color:#04211f}
.dmx-dm16.on .dmx-cbox.dm.c3{border-color:var(--dmx-gr-line);background:var(--surface)}
.dmx-dm16.on .dmx-cbox.dm.c3 .dmx-dia{color:var(--dmx-gr)}
.dmx-dm16.on .dmx-cbox.dm.c4{border-color:#c6cdd2;background:#c6cdd2}
.dmx-dm16.on .dmx-cbox.dm.c4 .dmx-dia{color:var(--dmx-gr)}
/* 20 · la casilla teal abre una ventana. Apagada, el rombo sigue a la vista pero tenue */
.dmx-dm20:not(.on) .dmx-cbox.dm .dmx-dia{opacity:.4;transform:none;color:var(--teal)}
.dmx-dm20:not(.on):hover .dmx-cbox.dm .dmx-dia{opacity:.7}
body.dmx-dmonly .dmx-dm20 .dmx-cbox.dm{box-shadow:0 0 0 3px rgba(18,216,210,.28)}
body.dmx-dmonly .hero-wrap{display:none}
/* flotantes de fanz que taparían un control de DecentMsg: escondidos mientras dure (ver guardFloats) */
.dmx-float-off{opacity:0!important;pointer-events:none!important}
/* 20 · «sólo DecentMsg»: el botón blanco pasa a barra horizontal únicamente en esa vista.
   Fuera de esa vista, la maqueta lo oculta. */
.dmx-trig-t{display:none}
body.dmx-dmon .decentmsg-trigger{width:auto;padding:0 15px 0 7px;gap:8px;border-radius:99px}
body.dmx-dmon .decentmsg-trigger img{width:28px;height:28px}
body.dmx-dmon .decentmsg-trigger .dmx-trig-t{
  display:inline;position:relative;z-index:2;white-space:nowrap;
  font-family:var(--font-display);font-weight:700;font-size:13.5px;letter-spacing:.2px;color:#0b3b33;
}
body.dmx-dmon.hero-on .decentmsg-trigger{opacity:1;pointer-events:auto}
/* «Comparte tu grupo» de FANZ: tanto la cabecera como el flotante van en blanco con el + rojo */
body:not(.dmx-dmonly) .btn-share,body:not(.dmx-dmonly) .fab-share{
  background:#fff;color:var(--red);box-shadow:0 6px 22px -6px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.28);
}
body:not(.dmx-dmonly) .btn-share .pl,body:not(.dmx-dmonly) .fab-share .pl{color:var(--red)}
body:not(.dmx-dmonly) .btn-share:hover{background:#fff;color:var(--red);box-shadow:0 8px 26px -6px rgba(0,0,0,.38),0 4px 14px rgba(0,0,0,.35)}
body:not(.dmx-dmonly) .fab-share:hover{background:#fff;color:var(--red)}
body:not(.dmx-dmonly) .fab-share.min::after{animation-name:dmxFabRingRed}
@keyframes dmxFabRingRed{
  0%,86%{box-shadow:0 0 0 0 rgba(255,51,68,.65);opacity:0}
  88%{opacity:1}
  100%{box-shadow:0 0 0 18px rgba(255,51,68,0);opacity:0}
}
/* «sólo DecentMsg»: «Comparte tu grupo» (cabecera en PC, flotante en móvil) en el verde de DecentMsg
   en vez del rosa de fanz; abre la publicación de grupos de DecentMsg (openPublish) */
body.dmx-dmonly .btn-share,body.dmx-dmonly .fab-share{
  background:#34d399;color:#03241a;box-shadow:0 6px 22px -6px rgba(16,185,129,.55),0 4px 14px rgba(0,0,0,.35);
}
body.dmx-dmonly .btn-share:hover{background:#6ee7b7;box-shadow:0 8px 26px -6px rgba(16,185,129,.6)}
body.dmx-dmonly .fab-share.min::after{animation-name:dmxFabRing}
@keyframes dmxFabRing{
  0%,86%{box-shadow:0 0 0 0 rgba(52,211,153,.65);opacity:0}
  88%{opacity:1}
  100%{box-shadow:0 0 0 18px rgba(52,211,153,0);opacity:0}
}
/* la ventana de publicar: misma piel oscura que la de «¿Qué tipo de grupos…?»; dos vías como la Guía */
.dmx-modal.dmx-pub{
  position:relative;max-width:560px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:12px;
  background:var(--surface,#141619);color:var(--text,#f2f4f5);border:1px solid var(--line,#26292e);
}
.dmx-pub-lead{margin:-4px 0 2px;padding:0 4px;font-size:13px;line-height:1.45;color:var(--muted)}
.dmx-pub-split{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch}
.dmx-pub-half{display:flex;flex-direction:column;gap:8px;min-width:0}
.dmx-pub-h{display:flex;align-items:center;gap:7px;font-weight:700;font-size:14px}
.dmx-pub-or{align-self:center;font-size:12px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.1em}
.dmx-pub textarea{
  min-height:104px;resize:none;border-radius:12px;padding:12px;font:13px/1.4 var(--font-body);
  background:var(--surface-2);color:var(--text);border:1.5px dashed rgba(52,211,153,.45);outline:none;
}
.dmx-pub textarea:focus{border-style:solid;border-color:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.12)}
.dmx-pub-drop{
  min-height:104px;border-radius:12px;padding:12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;
  background:var(--surface-2);border:1.5px dashed var(--line);transition:border-color .2s,background .2s;
}
.dmx-pub-drop:hover,.dmx-pub-drop.over{border-color:#34d399;background:rgba(52,211,153,.06)}
.dmx-pub-drop:focus-visible{outline:2px solid var(--teal-ink);outline-offset:2px}
.dmx-pub-drop .t1{font-size:13px;font-weight:700}
.dmx-pub-drop .t2{font-size:11.5px;color:var(--faint)}
.dmx-pub-how{font-size:11.5px;line-height:1.4;color:var(--faint)}
.dmx-pub-how b{color:var(--muted)}
.dmx-pub-err{font-size:12.5px;font-weight:600;color:#fca5a5;padding:0 4px}
.dmx-pub-err:empty{display:none}
.dmx-pub-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dmx-pub-list li{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line)}
.dmx-pub-th{width:46px;height:46px;border-radius:10px;flex:none}
.dmx-pub-list span:not(.dmx-pub-th){display:flex;flex-direction:column;gap:2px;min-width:0}
.dmx-pub-list b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dmx-pub-list small{font-size:12px;color:var(--muted)}
.dmx-pub-ok{
  align-self:stretch;border:0;border-radius:12px;padding:12px;cursor:pointer;font:700 14px var(--font-body);
  background:#34d399;color:#03241a;
}
.dmx-pub-ok:hover{background:#6ee7b7}
@media (max-width:560px){
  .dmx-pub-split{grid-template-columns:1fr}
  .dmx-pub-or{justify-self:center}
  .dmx-pub textarea,.dmx-pub-drop{min-height:84px}
}
/* «sólo DecentMsg»: el logo de arriba es el de DecentMsg (icono de la app + nombre en teal claro),
   al mismo tamaño que FANZ100 */
.dmx-logo-dm{display:none}
body.dmx-dmonly:not(.dmx-olite) .logo .lg{display:none}
body.dmx-dmonly:not(.dmx-olite) .logo .dmx-logo-dm{
  display:inline-flex;align-items:center;gap:.32em;pointer-events:auto;color:#5eead4;letter-spacing:.3px;
}
body.dmx-dmonly .logo .dmx-logo-dm img{
  width:1.15em;height:1.15em;border-radius:.3em;background:#fff;padding:.13em;box-sizing:border-box;flex:none;
}
:root[data-theme="light"] body.dmx-dmonly .logo .dmx-logo-dm{color:#0d9488}
body.dmx-dmon.nov-view .decentmsg-trigger{display:flex!important}
@media (max-width:640px){
  body.dmx-dmon .decentmsg-trigger{width:auto;padding:0 13px 0 6px;border-radius:99px}
  body.dmx-dmon .decentmsg-trigger img{width:26px;height:26px}
  body.dmx-dmon .decentmsg-trigger .dmx-trig-t{font-size:12.5px}
}
/* …y a todo el ancho dentro de la cabecera fija (guardFloats lo mete ahí): barra blanca con el borde teal
   del botón de siempre, icono y nombre centrados y el destello que cruza. Sin saltos ni crecer al pasar */
body.dmx-dmon .topbar > .decentmsg-trigger{
  position:relative;top:auto;left:auto;z-index:1;
  width:auto;height:40px;margin:0 12px 10px;padding:0 14px;border-radius:12px;
  justify-content:center;gap:9px;opacity:1;pointer-events:auto;
  animation:none!important;transform:none!important;
  box-shadow:0 4px 18px -6px rgba(20,184,166,.45);
}
body.dmx-dmon .topbar > .decentmsg-trigger img{width:26px;height:26px}
body.dmx-dmon .topbar > .decentmsg-trigger .dmx-trig-t{font-size:14px}
body.dmx-dmon .topbar > .decentmsg-trigger .dm-shine{animation:dmShine 5s ease-in-out 1s infinite}
body.dmx-dmon .topbar > .decentmsg-trigger:hover{box-shadow:0 6px 22px -6px rgba(20,184,166,.6)}
body.searching .topbar > .decentmsg-trigger{display:none!important}
/* ✅ 6-oct: con la lista del buscador abierta no sale la casilla de DecentMsg de arriba a la derecha;
   la lista ya tiene su «Todos · Telegram · DecentMsg». Al cerrarla, vuelve */
body.searching .dmx-hdm{display:none!important}
.dmx-onlyrow{padding-bottom:16px}
.dmx-onlyrow .dmx-s19 button{color:var(--teal-ink)}
/* la ventana: oscura como la portada, sin título; dos tarjetas con las marcas.
   Las marcas como la cabecera de las maquetas: FANZ en rojo y 100 en blanco; icono de la app
   y DecentMsg en teal claro */
.dmx-modal.dmx-pick2{
  position:relative;max-width:400px;padding:18px 16px 16px;display:flex;flex-direction:column;gap:10px;
  background:var(--surface,#141619);color:var(--text,#f2f4f5);border:1px solid var(--line,#26292e);
}
.dmx-pk-t{
  margin:0 0 4px;padding:4px 44px 0 4px;font-family:var(--font-display);font-weight:700;font-size:17px;line-height:1.3;
  color:var(--text);text-wrap:balance;
}
.dmx-pk-x{background:var(--surface-2);color:var(--muted)}
.dmx-pk-x:hover{background:var(--surface-3);color:var(--text)}
.dmx-pk-card{
  width:100%;display:flex;flex-direction:column;align-items:center;gap:9px;padding:20px 14px 14px;cursor:pointer;
  border-radius:16px;border:1.5px solid var(--line);background:var(--surface-2);color:inherit;font:inherit;text-align:center;
  transition:border-color .2s,background .2s;-webkit-tap-highlight-color:transparent;
}
.dmx-pk-card:hover{border-color:var(--muted)}
.dmx-pk-card.sel{border-color:var(--teal);background:rgba(18,216,210,.07)}
.dmx-pk-card.b.sel{cursor:default}
.dmx-pk-card.a.sel:hover{background:rgba(18,216,210,.11)}
.dmx-pk-card:focus-visible{outline:2px solid var(--teal-ink);outline-offset:2px}
.dmx-pk-sub{font-size:12px;font-weight:600;color:var(--muted)}
.dmx-lk{display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:21px;letter-spacing:.3px;white-space:nowrap}
.dmx-lk-fz{color:#ff3344}
.dmx-lk-fz span{color:var(--text);font-size:.8em}
.dmx-lk-x{color:var(--faint);font-weight:600;font-size:.8em}
.dmx-lk-dm{display:inline-flex;align-items:center;gap:8px;color:#5eead4}
.dmx-lk-dm img{width:28px;height:28px;border-radius:8px;background:#fff;padding:3px;box-sizing:border-box;flex:none}
/* la pieza de DecentMsg dentro de A: la × indica que tocar la tarjeta la quita; quitada, se apaga y
   lleva un +. Toda la tarjeta A es el interruptor */
.dmx-lk-chip{
  position:relative;display:inline-flex;align-items:center;
  padding:4px 8px;margin:-4px -8px;border-radius:10px;transition:opacity .2s,filter .2s;
}
.dmx-lk-chip i{
  position:absolute;top:-7px;right:-6px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-family:var(--font-body);font-size:14px;font-weight:700;line-height:1;
  background:var(--surface-3);color:var(--text);border:1px solid var(--line);transition:background .2s,color .2s,border-color .2s;
}
.dmx-pk-card.a:hover .dmx-lk-chip:not(.off) i{background:#ff3344;border-color:#ff3344;color:#fff}
.dmx-lk-chip.off{opacity:.4;filter:grayscale(1)}
.dmx-pk-card.a:hover .dmx-lk-chip.off{opacity:.75;filter:none}
@media (max-width:420px){
  .dmx-lk{font-size:17px;gap:8px}
  .dmx-lk-dm img{width:24px;height:24px}
}

/* 17 … 19 · que no parezca un botón de descargar: interruptor o casilla + verbo; DecentMsg escrito */
.dmx-s17row,.dmx-s18row,.dmx-s19row{padding-bottom:16px}
.dmx-s17row .dmx-s-sw.on,.dmx-dmcol .dmx-dm17 .dmx-s-sw.on,.dmx-setdm .dmx-s-sw.on{background:rgba(16,185,129,.62)}
/* 17 · «Ver DecentMsg» + interruptor */
.dmx-dm17{
  display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:4px 2px;cursor:pointer;white-space:nowrap;
  font-family:var(--font-body);font-size:13.5px;font-weight:650;color:var(--muted);transition:color .2s;
}
.dmx-dm17 .dmx-dia{width:12px;height:12px;color:var(--faint);transition:color .2s}
.dmx-dm17.on{color:var(--text)}
.dmx-dm17.on .dmx-dia{color:var(--dmx-gr)}
.dmx-dm17 .dmx-s-sw{margin-left:2px}
.dmx-s17row{display:none}
/* 18 · casilla con ✓ y texto */
.dmx-cbline{
  display:inline-flex;align-items:center;gap:9px;background:none;border:0;padding:4px 2px;cursor:pointer;
  font-family:var(--font-body);font-size:13.5px;font-weight:650;color:var(--muted);transition:color .2s;
}
.dmx-cbline b{font-weight:700;color:var(--faint)}
.dmx-cbline .dmx-cbox{width:19px;height:19px;border-radius:5px;border:2px solid var(--faint);background:none}
.dmx-cbline .dmx-cbox .dmx-s-chk{width:12px;height:12px}
.dmx-cbline.on{color:var(--text)}
.dmx-cbline.on .dmx-cbox{border-color:rgba(16,185,129,.62);background:rgba(16,185,129,.62);color:#fff}
/* 19 · frase de estado con su acción */
.dmx-s19{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--muted)}
.dmx-s19 .dmx-dia{width:12px;height:12px;color:var(--faint)}
.dmx-s19.on .dmx-dia{color:var(--dmx-gr)}
.dmx-s19 button{
  background:none;border:0;padding:2px 0;cursor:pointer;font:inherit;color:var(--dmx-gr-ink);
  text-decoration:underline;text-underline-offset:3px;
}
.dmx-s19.on button{color:var(--muted)}
.dmx-s19 button:hover{color:var(--text)}
.dmx-dm17:focus-visible,.dmx-cbline:focus-visible,.dmx-s19 button:focus-visible{outline:2px solid var(--teal-ink);outline-offset:3px}
@media (max-width:640px){
  .dmx-sel-17 .dmx-dmcol,.dmx-sel-17 .dmx-dmsep{display:none}
  .dmx-s17row{display:flex}
  .dmx-dm17,.dmx-cbline{font-size:13px}
  .dmx-s19{font-size:12.5px}
}

/* 14 · en Ajustes */
.dmx-setdm .set-ic{color:var(--dmx-gr)}
.dmx-setdm .dmx-s-sw{margin-left:auto}
body.dmx-s14.set-open .decentmsg-trigger{opacity:0!important;pointer-events:none!important}
/* 15 · se oculta desde la tarjeta; para volver, una línea bajo el selector */
.dmx-hide{
  position:absolute;left:10px;bottom:10px;z-index:3;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:#d7dcdf;
  background:rgba(10,12,14,.72);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .2s,color .2s;
}
.dmx-hide .dmx-ic{width:17px;height:17px}
.dmx-hide:hover{background:rgba(10,12,14,.92);color:#fff}
/* …y antes de ocultar pregunta: el mismo ojo tachado, la pregunta y Cancelar / Ocultar (teal de la casilla) */
.dmx-modal.dmx-ask{max-width:360px;padding:24px 18px 16px;align-items:center;text-align:center;gap:8px}
.dmx-ask .dmx-pk-t{margin:6px 0 0;padding:0}
.dmx-ask-ic{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--surface-2);border:1px solid var(--line);color:var(--muted);
}
.dmx-ask-ic .dmx-ic{width:24px;height:24px}
.dmx-ask-d{margin:0 0 8px;font-size:13px;line-height:1.45;color:var(--muted);text-wrap:pretty}
.dmx-ask-btns{align-self:stretch;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dmx-ask-btns button{border-radius:12px;padding:12px;cursor:pointer;font:700 14px var(--font-body)}
.dmx-ask-no{background:var(--surface-2);color:var(--text);border:1px solid var(--line)}
.dmx-ask-no:hover{background:var(--surface-3)}
.dmx-ask-ok{background:var(--teal);color:#04211f;border:1px solid var(--teal)}
.dmx-ask-ok:hover{filter:brightness(1.08)}
.dmx-ask-btns button:focus-visible{outline:2px solid var(--teal-ink);outline-offset:2px}
.dmx-s15row{padding-bottom:16px}
.dmx-s15-show{
  display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;padding:4px 6px;
  font-family:var(--font-body);font-size:12.5px;font-weight:600;color:var(--muted);
}
.dmx-s15-show .dmx-dia{width:12px;height:12px;color:var(--faint)}
.dmx-s15-show u{color:var(--dmx-gr-ink);text-underline-offset:3px}
.dmx-s15-show:hover u{color:var(--text)}
/* móvil: la fila de fanz ya va llena, así que en 7 … 12 el selector baja un punto de tamaño
   (el de los móviles más estrechos) y el botón se encoge para caber a su derecha */
@media (max-width:640px){
  .dmx-selr .fzsw{gap:8px}
  .dmx-selr .fzsw-lbl{font-size:.74rem}
  .dmx-selr .fzsw.dest .fzsw-lbl.dest,
  .dmx-selr .fzsw.nov .fzsw-lbl.nov{font-size:1.08rem}
  .dmx-selr .fzsw-track{width:60px;height:32px}
  .dmx-selr .fzsw-knob{top:3px;left:3.5px;width:24px;height:24px}
  .dmx-selr .fzsw.nov .fzsw-knob{transform:translateX(27px)}
  .dmx-dmsep{height:22px;margin:0 -3px}
  .dmx-dmcap{font-size:8px;letter-spacing:.04em}
  .dmx-mtrack{width:38px;height:22px}
  .dmx-mtrack i{width:16px;height:16px;top:1.5px;left:2.5px}
  .dmx-mtrack .dmx-dia{width:9px;height:9px}
  .dmx-dm7.on .dmx-mtrack i{transform:translateX(14px)}
  .dmx-dm8,.dmx-dm9{width:30px;height:30px}
  .dmx-eye{width:17px;height:17px}
  .dmx-rb .dmx-dia{width:14px;height:14px}
  .dmx-rb i{width:12px;height:12px;right:-7px;bottom:-6px}
  .dmx-rb i .dmx-s-chk{width:8px;height:8px}
}
@media (max-width:400px){
  .dmx-selr .fzsw{gap:6px}
  .dmx-selr .fzsw-lbl{font-size:.7rem}
  .dmx-selr .fzsw.dest .fzsw-lbl.dest,
  .dmx-selr .fzsw.nov .fzsw-lbl.nov{font-size:1rem}
  .dmx-selr .fzsw-track{width:54px;height:30px}
  .dmx-selr .fzsw-knob{top:3px;left:3px;width:21px;height:21px}
  .dmx-selr .fzsw.nov .fzsw-knob{transform:translateX(24px)}
  .dmx-dmsep{margin:0 -2px}
  .dmx-dmcap{font-size:8px;letter-spacing:.04em}
}
@media (max-width:640px){
  .dmx-mtrack.big{width:44px;height:24px}
  .dmx-mtrack.big i{top:1.5px;left:2.5px;width:18px;height:18px}
  .dmx-mtrack.big .dmx-dia{width:10px;height:10px}
  .dmx-mtrack i .dmx-eye{width:12px;height:12px}
  .dmx-dm10.on .dmx-mtrack i,.dmx-dm12.on .dmx-mtrack i{transform:translateX(18px)}
  .dmx-pill{gap:5px;padding:0;border:0;background:none}
  .dmx-dm11.on .dmx-pill{background:none}
  .dmx-pill .dmx-eye{width:16px;height:16px}
  .dmx-mtrack.sm{width:28px;height:17px}
  .dmx-mtrack.sm i{top:1px;left:2px;width:12px;height:12px}
  .dmx-dm11.on .dmx-mtrack.sm i{transform:translateX(9px)}
  .dmx-dm12 .dmx-mtrack.big{width:48px;height:26px}
  .dmx-dm12 .dmx-mtrack.big i{top:1px;left:1.5px;width:21px;height:21px}
  .dmx-dm12 .dmx-mtrack.big .dmx-dia{width:14px;height:14px}
  .dmx-dm12.on .dmx-mtrack i{transform:translateX(21px)}
  .dmx-cb{gap:5px}
  .dmx-cbox{width:19px;height:19px;border-radius:5px}
  .dmx-cbox .dmx-s-chk{width:12px;height:12px}
  .dmx-cb .dmx-dia{width:14px;height:14px}
  .dmx-hide{width:30px;height:30px;left:8px;bottom:8px}
  .dmx-cbox.dm{width:22px;height:22px;border-radius:6px}
  .dmx-cbox.dm .dmx-dia{width:13px;height:13px}
}

/* 3 · un solo botón; lo demás en su menú */
.sortbar.dmx-sel-3{position:relative;z-index:20}
.dmx-s3{position:relative;display:flex;flex-direction:column;align-items:center}
.dmx-s3-btn{
  display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:2px 6px;
  font-family:var(--font-display)!important;font-weight:800;font-size:24px;color:var(--teal-ink);
}
.dmx-s3-btn.nov{color:var(--magenta-ink)}
.dmx-s3-btn .dmx-s-chev{width:20px;height:20px;opacity:.75;transition:transform .2s}
.dmx-s3-btn[aria-expanded="true"] .dmx-s-chev{transform:rotate(180deg)}
.dmx-s3-sub{margin-top:3px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.dmx-s3-menu{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);width:288px;padding:6px;
  border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.5);
}
.dmx-s3-menu[hidden]{display:none}
.dmx-s3-it{
  width:100%;display:flex;align-items:center;gap:11px;text-align:left;background:none;border:0;
  border-radius:11px;padding:10px 12px;color:var(--text);
}
.dmx-s3-it:hover{background:var(--surface-2)}
.dmx-s3-it > span:not(.dmx-s-sw){flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.dmx-s3-it b{font-size:14px;font-weight:700}
.dmx-s3-it small{font-size:12px;color:var(--muted)}
.dmx-s3-it .dmx-s-chk{width:16px;height:16px;color:var(--teal-ink)}
.dmx-s3-it.nov .dmx-s-chk{color:var(--magenta-ink)}
.dmx-s3-it.dm .dmx-dia{width:16px;height:16px;color:var(--dmx-gr)}
.dmx-s3-hr{height:1px;background:var(--line);margin:4px 8px}

/* 4 · tres chips iguales */
.dmx-s4{display:flex;align-items:center;justify-content:center;gap:8px}
.dmx-s4-c{
  display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:99px;white-space:nowrap;
  font-size:13px;font-weight:650;color:var(--muted);background:var(--surface);border:1px solid var(--line);
  transition:color .2s,background .2s,border-color .2s;
}
.dmx-s4-c b{font-weight:700;opacity:.7}
.dmx-s4-c:hover{color:var(--text)}
.dmx-s4-c.on.dest{color:var(--teal-ink);border-color:var(--teal-border);background:var(--teal-soft)}
.dmx-s4-c.on.nov{color:var(--magenta-ink);border-color:rgba(255,46,196,.45);background:var(--magenta-soft)}
.dmx-s4-c.dm .dmx-dia{color:var(--faint)}
.dmx-s4-c.dm.on{color:var(--dmx-gr-ink);border-color:var(--dmx-gr-line);background:var(--dmx-gr-soft)}
.dmx-s4-c.dm.on .dmx-dia{color:var(--dmx-gr)}
.dmx-s4-sep{flex:none;width:4px;height:4px;border-radius:50%;background:var(--faint);margin:0 4px}

/* 5 · el interruptor de siempre, sin brillo, con DecentMsg en la línea de cifras */
.sortbar.dmx-sel-5{flex-direction:column;align-items:center;gap:10px}
.dmx-sel-5 .fzsw{padding-bottom:0;gap:16px}
.dmx-sel-5 .fzsw-count{display:none}
.dmx-sel-5 .fzsw-lbl{font-size:.95rem}
.dmx-sel-5 .fzsw.dest .fzsw-lbl.dest,.dmx-sel-5 .fzsw.nov .fzsw-lbl.nov{font-size:1.3rem;text-shadow:none}
.dmx-sel-5 .fzsw-track{width:64px;height:32px}
.dmx-sel-5 .fzsw-knob{top:2.5px;left:3px;width:24px;height:24px;box-shadow:none}
.dmx-sel-5 .fzsw.nov .fzsw-knob{transform:translateX(31px)}
.dmx-s5-line{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.dmx-s5-dm{
  display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:2px 0;
  font:inherit!important;letter-spacing:inherit;text-transform:inherit;color:var(--faint);transition:color .2s;
}
.dmx-s5-dm .dmx-dia{width:11px;height:11px}
.dmx-s5-dm.on{color:var(--dmx-gr-ink)}

@media (max-width:640px){
  .sortbar.dmx-sel{padding:0 10px 14px}
  .dmx-s1{gap:13px}
  .dmx-s1-tab{font-size:13px}
  .dmx-s-n{font-size:11px;margin-left:5px}
  .dmx-s1-dm{font-size:12px;padding:5px 10px;gap:5px}
  .dmx-s2-seg button{padding:7px 14px;font-size:13px}
  .dmx-s3-btn{font-size:20px}
  .dmx-s4{gap:6px}
  .dmx-s4-c{font-size:12px;padding:6px 11px}
  .dmx-s4-sep{margin:0 1px}
  .dmx-sel-5 .fzsw{gap:10px}
  .dmx-sel-5 .fzsw-lbl{font-size:.8rem}
  .dmx-sel-5 .fzsw.dest .fzsw-lbl.dest,.dmx-sel-5 .fzsw.nov .fzsw-lbl.nov{font-size:1.1rem}
  .dmx-sel-5 .fzsw-track{width:56px;height:28px}
  .dmx-sel-5 .fzsw-knob{top:2.5px;left:3px;width:20px;height:20px}
  .dmx-sel-5 .fzsw.nov .fzsw-knob{transform:translateX(27px)}
}

/* ═════ 21 … 26 (5-oct): otros diseños para Destacados / Novedades y para enseñar DecentMsg ═════
   Cada pieza por su lado (la banda común se descartó el 5-oct). Ver selNew en dmx.js */
.dmx-n{display:flex;align-items:center;justify-content:center;gap:22px}
.dmx-n button{-webkit-tap-highlight-color:transparent}
.dmx-n [data-dmx-view]:focus-visible{outline:2px solid var(--teal-ink);outline-offset:3px;border-radius:12px}
.dmx-n-count{
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);white-space:nowrap;
  text-align:center;opacity:0;transition:opacity .3s;pointer-events:none;
}
.dmx-n.dest .dmx-n-count.dest,.dmx-n.nov .dmx-n-count.nov{opacity:1}
.dmx-n > .dmx-dmsep{margin:0}

/* 21 · las dos palabras del mismo tamaño; una raya de neón se desliza bajo la elegida */
.dmx-n21-tabs{display:inline-grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 4px auto}
.dmx-n21-t{
  grid-row:1;background:none;border:0;cursor:pointer;padding:2px 24px 11px;white-space:nowrap;
  font-family:var(--font-display);font-weight:900;font-size:1.7rem;letter-spacing:.2px;transition:color .3s,text-shadow .3s;
}
.dmx-n21-t.dest{grid-column:1;color:rgba(18,216,210,.36)}
.dmx-n21-t.nov{grid-column:2;color:rgba(255,46,196,.36)}
.dmx-n21-t.dest:hover{color:rgba(18,216,210,.7)}
.dmx-n21-t.nov:hover{color:rgba(255,46,196,.7)}
.dmx-n21.dest .dmx-n21-t.dest{color:var(--teal);text-shadow:0 0 14px rgba(18,216,210,.55),0 0 42px var(--teal-glow)}
.dmx-n21.nov .dmx-n21-t.nov{color:var(--magenta);text-shadow:0 0 14px rgba(255,46,196,.55),0 0 42px rgba(255,46,196,.35)}
.dmx-n21-rail{grid-column:1/3;grid-row:2;position:relative;border-radius:4px;background:rgba(255,255,255,.06)}
.dmx-n21-rail i{
  position:absolute;top:0;bottom:0;left:0;width:50%;border-radius:4px;background:var(--teal);
  box-shadow:0 0 10px rgba(18,216,210,.8),0 0 30px var(--teal-glow);
  transition:transform .32s cubic-bezier(.2,.7,.2,1),background .3s,box-shadow .3s;
}
.dmx-n21.nov .dmx-n21-rail i{transform:translateX(100%);background:var(--magenta);box-shadow:0 0 10px rgba(255,46,196,.8),0 0 30px rgba(255,46,196,.35)}
.dmx-n21 .dmx-n-count{grid-row:3;margin-top:8px}
.dmx-n21 .dmx-n-count.dest,.dmx-n22 .dmx-n-count.dest{grid-column:1}
.dmx-n21 .dmx-n-count.nov,.dmx-n22 .dmx-n-count.nov{grid-column:2}
.dmx-n21 > .dmx-dmcol,.dmx-n22 > .dmx-dmcol{align-self:flex-start}
.dmx-n21 > .dmx-dmcol{margin-top:8px}
.dmx-n21 > .dmx-dmsep{align-self:flex-start;margin-top:6px}

/* 22 · píldora: la bola de color se desliza detrás de la palabra elegida */
.dmx-n22-wrap{display:inline-grid;grid-template-columns:1fr 1fr}
.dmx-n22-pill{
  grid-column:1/3;position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:99px;
  background:var(--surface-2);border:1.5px solid var(--line);transition:border-color .3s;
}
.dmx-n22.dest .dmx-n22-pill{border-color:var(--teal-border)}
.dmx-n22.nov .dmx-n22-pill{border-color:rgba(255,46,196,.45)}
.dmx-n22-thumb{
  position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:99px;background:var(--teal);
  box-shadow:0 4px 22px -2px var(--teal-glow);transition:transform .32s cubic-bezier(.2,.7,.2,1),background .3s,box-shadow .3s;
}
.dmx-n22.nov .dmx-n22-thumb{transform:translateX(100%);background:var(--magenta);box-shadow:0 4px 22px -2px rgba(255,46,196,.4)}
.dmx-n22-t{
  position:relative;z-index:1;background:none;border:0;cursor:pointer;padding:13px 34px;white-space:nowrap;
  font-family:var(--font-display);font-weight:800;font-size:1.12rem;transition:color .3s;
}
.dmx-n22-t.dest{color:rgba(18,216,210,.6)}
.dmx-n22-t.nov{color:rgba(255,46,196,.65)}
.dmx-n22-t.dest:hover{color:var(--teal)}
.dmx-n22-t.nov:hover{color:var(--magenta)}
.dmx-n22.dest .dmx-n22-t.dest{color:#04211f}
.dmx-n22.nov .dmx-n22-t.nov{color:#fff}
.dmx-n22 .dmx-n-count{grid-row:2;margin-top:8px}
.dmx-n22 > .dmx-dmcol{margin-top:16px}
.dmx-n22 > .dmx-dmsep{align-self:flex-start;margin-top:14px}

/* 23 · dos tarjetas que dicen qué es cada vista; debajo, la casilla con su frase */
.dmx-n23{width:100%}
.dmx-n23-cards{display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:12px;justify-content:center;width:100%}
.dmx-n23-c{
  display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;padding:14px 18px 14px 14px;border-radius:18px;min-width:0;
  background:var(--surface);border:1.5px solid var(--line);color:var(--muted);
  transition:border-color .25s,background .25s,box-shadow .25s;
}
.dmx-n23-c:hover{border-color:var(--muted)}
.dmx-n23-c.on{cursor:default}
.dmx-n23-ic{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--surface-2);transition:background .25s,color .25s}
.dmx-n23-ic svg{width:23px;height:23px}
.dmx-n23-c.dest .dmx-n23-ic{color:rgba(18,216,210,.6)}
.dmx-n23-c.nov .dmx-n23-ic{color:rgba(255,46,196,.65)}
.dmx-n23-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.dmx-n23-tx b{font-family:var(--font-display);font-weight:900;font-size:1.2rem;line-height:1.15;transition:color .25s,text-shadow .25s}
.dmx-n23-c.dest b{color:rgba(18,216,210,.5)}
.dmx-n23-c.nov b{color:rgba(255,46,196,.55)}
.dmx-n23-tx small{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.dmx-n23-tx em{font-style:normal;font-size:12.5px;line-height:1.3;color:var(--muted)}
.dmx-n23-c.dest.on{border-color:var(--teal);background:linear-gradient(180deg,rgba(18,216,210,.13),rgba(18,216,210,.03)),var(--surface);box-shadow:0 12px 34px -16px var(--teal-glow)}
.dmx-n23-c.nov.on{border-color:var(--magenta);background:linear-gradient(180deg,rgba(255,46,196,.12),rgba(255,46,196,.03)),var(--surface);box-shadow:0 12px 34px -16px rgba(255,46,196,.35)}
.dmx-n23-c.dest.on .dmx-n23-ic{background:var(--teal);color:#04211f}
.dmx-n23-c.nov.on .dmx-n23-ic{background:var(--magenta);color:#fff}
.dmx-n23-c.dest.on b{color:var(--teal);text-shadow:0 0 14px rgba(18,216,210,.45)}
.dmx-n23-c.nov.on b{color:var(--magenta);text-shadow:0 0 14px rgba(255,46,196,.45)}
.dmx-n23-c.on em{color:#c9d0d4}
.dmx-n23row{padding-bottom:16px;margin-top:-4px}
.dmx-n23-line{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:650;color:var(--muted)}
.dmx-n23-dm{display:inline-flex;align-items:center;gap:10px;padding:4px 2px;cursor:pointer;font:inherit;color:var(--muted);transition:color .2s}
.dmx-n23-dm.on{color:var(--text)}
.dmx-n23-dm:hover{color:var(--text)}
.dmx-n23-dm:focus-visible,.dmx-n23-back:focus-visible{outline:2px solid var(--teal-ink);outline-offset:3px;border-radius:6px}
.dmx-n23-st{color:var(--faint);font-weight:600}
.dmx-n23-dot{color:var(--faint)}
.dmx-n23-back{background:none;border:0;padding:2px 0;cursor:pointer;font:inherit;color:var(--teal-ink);text-decoration:underline;text-underline-offset:3px}

/* 24 · título de sección a la izquierda; DecentMsg y Tamaño a la derecha, en la misma fila */
.dmx-sel-24.sortbar{padding-left:4px;padding-right:4px}
.dmx-n24{width:100%;justify-content:space-between;align-items:center;gap:16px}
.dmx-n24-head{display:grid;grid-template-columns:auto auto;align-items:baseline;justify-content:start;column-gap:22px}
.dmx-n24-t{
  grid-row:1;background:none;border:0;cursor:pointer;padding:0;white-space:nowrap;line-height:1.15;
  font-family:var(--font-display);font-weight:900;font-size:1.05rem;transition:font-size .3s,color .3s,text-shadow .3s;
}
.dmx-n24-t.dest{grid-column:1;color:rgba(18,216,210,.42)}
.dmx-n24-t.nov{grid-column:2;color:rgba(255,46,196,.42)}
.dmx-n24-t.dest:hover{color:rgba(18,216,210,.75)}
.dmx-n24-t.nov:hover{color:rgba(255,46,196,.75)}
.dmx-n24.dest .dmx-n24-t.dest{font-size:2.05rem;color:var(--teal);text-shadow:0 0 14px rgba(18,216,210,.55),0 0 42px var(--teal-glow);cursor:default}
.dmx-n24.nov .dmx-n24-t.nov{font-size:2.05rem;color:var(--magenta);text-shadow:0 0 14px rgba(255,46,196,.55),0 0 42px rgba(255,46,196,.35);cursor:default}
.dmx-n24 .dmx-n-count{grid-row:2;text-align:left;margin-top:5px}
.dmx-n24 .dmx-n-count.dest{grid-column:1}
.dmx-n24 .dmx-n-count.nov{grid-column:2}
.dmx-n24-tools{display:flex;align-items:center;gap:12px;flex:none}
.dmx-n24-tools .sizebar{padding:0}
.dmx-n24-dm.dmx-dm16{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;padding:7px 16px 7px 8px;border-radius:99px;
  background:var(--surface);border:1px solid var(--line);box-shadow:0 4px 16px -8px rgba(0,0,0,.4);transition:border-color .2s;
}
.dmx-n24-dm.dmx-dm16:hover{border-color:var(--muted)}
.dmx-n24-dm .dmx-cbox.dm{width:24px;height:24px;border-radius:7px}
.dmx-n24-l{font-size:12.5px;font-weight:650;color:var(--muted)}
.dmx-n24-dm.on .dmx-n24-l{color:var(--text)}
.dmx-n24-dm:focus-visible{outline:2px solid var(--teal-ink);outline-offset:3px}

/* 25 · el selector de siempre; DecentMsg es la marca «FANZ100 × DecentMsg» y abre la ventana */
.dmx-n25col{flex:none}
.dmx-n25{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:9px 15px;border-radius:14px;white-space:nowrap;
  background:var(--surface);border:1.5px solid var(--line);color:var(--text);
  font-family:var(--font-display);font-weight:800;font-size:16.5px;letter-spacing:.2px;transition:border-color .2s,box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
}
.dmx-n25:hover{border-color:var(--muted)}
.dmx-n25:focus-visible{outline:2px solid var(--teal-ink);outline-offset:3px}
.dmx-n25 .dmx-lk-dm{gap:6px}
.dmx-n25 .dmx-lk-dm img{width:24px;height:24px;border-radius:7px;padding:2px}
.dmx-n25-plus{color:var(--faint);font-weight:600}
.dmx-n25.tg .dmx-lk-dm{opacity:.38;filter:grayscale(1);transition:opacity .2s,filter .2s}
.dmx-n25.tg:hover .dmx-lk-dm{opacity:.7;filter:none}
.dmx-n25.mix{border-color:var(--teal-border)}
.dmx-n25.dm{border-color:var(--teal);box-shadow:0 0 0 3px rgba(18,216,210,.22)}
.dmx-n25-only{font-family:var(--font-body);font-weight:650;font-size:13px;color:var(--muted)}
.dmx-n25row{display:none}

/* 26 · el selector de siempre; debajo, tres chips de origen como los del filtro por país */
.dmx-n26row{padding-bottom:16px;margin-top:-2px}
.dmx-n26{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.dmx-n26-c{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;padding:7px 14px;border-radius:99px;white-space:nowrap;
  background:var(--surface);border:1px solid var(--line);font-family:var(--font-body);font-size:13px;font-weight:650;color:var(--muted);
  transition:border-color .2s,color .2s,background .2s;-webkit-tap-highlight-color:transparent;
}
.dmx-n26-c:hover{border-color:var(--muted);color:var(--text)}
.dmx-n26-c:focus-visible{outline:2px solid var(--teal-ink);outline-offset:3px}
.dmx-n26-c .dmx-dia{width:13px;height:13px;color:var(--dmx-gr)}
.dmx-n26-c .dmx-tgi{width:15px;height:15px;flex:none;fill:#2aabee}
.dmx-n26-c b{font-weight:700;color:var(--faint);margin-left:1px}
.dmx-n26-c.on{cursor:default}
.dmx-n26-c.mix.on{border-color:var(--teal-ink);color:var(--teal-ink);background:var(--teal-soft)}
.dmx-n26-c.tg.on{border-color:rgba(42,171,238,.7);color:#8fd0f7;background:rgba(42,171,238,.12)}
.dmx-n26-c.dm.on{border-color:var(--dmx-gr-line);color:var(--dmx-gr-ink);background:var(--dmx-gr-soft)}
.dmx-n26-c.on b{color:inherit}

/* tema claro: los mismos tonos atenuados que el selector de fanz */
:root:not([data-theme="dark"]) .dmx-n21-t.dest,:root:not([data-theme="dark"]) .dmx-n24-t.dest{color:rgba(10,155,150,.55)}
:root:not([data-theme="dark"]) .dmx-n21-t.nov,:root:not([data-theme="dark"]) .dmx-n24-t.nov{color:rgba(207,23,152,.55)}
:root:not([data-theme="dark"]) .dmx-n21.dest .dmx-n21-t.dest,:root:not([data-theme="dark"]) .dmx-n24.dest .dmx-n24-t.dest{color:var(--teal-ink);text-shadow:none}
:root:not([data-theme="dark"]) .dmx-n21.nov .dmx-n21-t.nov,:root:not([data-theme="dark"]) .dmx-n24.nov .dmx-n24-t.nov{color:var(--magenta-ink);text-shadow:none}
:root:not([data-theme="dark"]) .dmx-n21-rail{background:rgba(0,0,0,.07)}
:root:not([data-theme="dark"]) .dmx-n23-c.on em{color:var(--text)}
:root:not([data-theme="dark"]) .dmx-n26-c.tg.on{color:#1683c4}

@media (max-width:640px){
  .dmx-n{gap:12px}
  .dmx-n-count{font-size:9.5px;letter-spacing:.14em}
  .dmx-n21-t{font-size:.98rem;padding:2px 12px 9px}
  .dmx-n21 .dmx-n-count{margin-top:6px}
  .dmx-n21 > .dmx-dmcol{margin-top:0}
  .dmx-n21 > .dmx-dmsep{margin-top:0}
  .dmx-n22-t{font-size:.8rem;padding:10px 14px}
  .dmx-n22 > .dmx-dmcol{margin-top:8px}
  .dmx-n22 > .dmx-dmsep{margin-top:6px}
  .dmx-n23-cards{grid-template-columns:1fr 1fr;gap:8px}
  .dmx-n23-c{flex-direction:column;align-items:flex-start;gap:9px;padding:12px 12px 13px;border-radius:15px}
  .dmx-n23-ic{width:36px;height:36px;border-radius:11px}
  .dmx-n23-ic svg{width:19px;height:19px}
  .dmx-n23-tx b{font-size:.98rem}
  .dmx-n23-tx small{font-size:9px;letter-spacing:.12em}
  .dmx-n23-tx em{font-size:11.5px}
  .dmx-n23-line{font-size:13px}
  .dmx-sel-24.sortbar{padding-left:2px;padding-right:2px}
  .dmx-n24-head{column-gap:12px}
  .dmx-n24-t{font-size:.8rem}
  .dmx-n24.dest .dmx-n24-t.dest,.dmx-n24.nov .dmx-n24-t.nov{font-size:1.22rem}
  .dmx-n24-dm.dmx-dm16{padding:6px 12px 6px 6px;gap:7px}
  .dmx-n24-dm .dmx-cbox.dm{width:22px;height:22px}
  .dmx-n24-l{font-size:11.5px}
  .dmx-sel-25 .dmx-n25col,.dmx-sel-25 .dmx-dmsep{display:none}
  .dmx-n25row{display:flex;padding-bottom:16px;margin-top:-2px}
  .dmx-n25{font-size:13.5px;padding:7px 13px}
  .dmx-n25 .dmx-lk-dm img{width:20px;height:20px}
  .dmx-n26-c{padding:7px 12px;font-size:12.5px}
}
@media (max-width:400px){
  .dmx-n21-t{font-size:.88rem;padding:2px 9px 8px}
  .dmx-n22-t{font-size:.74rem;padding:9px 11px}
  .dmx-n24-t{font-size:.74rem}
  .dmx-n24.dest .dmx-n24-t.dest,.dmx-n24.nov .dmx-n24-t.nov{font-size:1.08rem}
  .dmx-n24-dm.dmx-dm16{flex-direction:column;gap:4px;padding:0;border:0;background:none;box-shadow:none}
  .dmx-n24-l{font-size:8px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
  .dmx-n24-dm.on .dmx-n24-l{color:var(--dmx-gr-dim)}

  .dmx-n23-tx em{font-size:11px}
  .dmx-n26{gap:6px}
  .dmx-n26-c{padding:6px 10px;font-size:12px;gap:6px}
}

/* ═════ ventana de la casilla, otras formas (?w=1 … 3; 5-oct) ═════
   Cada opción es un estado: un toque aplica y cierra. La elegida, en teal con ✓ */
.dmx-wo{
  width:100%;display:flex;align-items:center;gap:12px;padding:12px 14px 12px 12px;cursor:pointer;text-align:left;
  border-radius:14px;border:1.5px solid var(--line);background:var(--surface-2);color:var(--text);font:inherit;
  transition:border-color .2s,background .2s;-webkit-tap-highlight-color:transparent;
}
.dmx-wo + .dmx-wo{margin-top:8px}
.dmx-wo:hover{border-color:var(--muted)}
.dmx-wo.on{border-color:var(--teal);background:rgba(18,216,210,.08)}
.dmx-wo:focus-visible{outline:2px solid var(--teal-ink);outline-offset:2px}
.dmx-wo-tx{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.dmx-wo-tx b{font-weight:700;font-size:15px;line-height:1.25}
/* «¿Qué grupo quieres subir?»: el nombre de cada app en su color (✅ 6-oct) */
.dmx-c-tg{color:var(--dmx-tg)}
.dmx-c-dm{color:var(--dmx-gr-ink)}
.dmx-wo-tx small{font-size:12px;font-weight:600;color:var(--muted)}
.dmx-wo-ck{
  flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--line);color:transparent;transition:background .2s,border-color .2s,color .2s;
}
.dmx-wo-ck .dmx-s-chk{width:13px;height:13px}
.dmx-wo.on .dmx-wo-ck,.dmx-bc.sel .dmx-wo-ck{background:var(--teal);border-color:var(--teal);color:#04211f}
/* iconos de cada opción: avión de Telegram en su azul, icono de la app; «Todos» los dos montados */
.dmx-wo-ic{flex:none;display:inline-flex;align-items:center;width:44px;justify-content:center}
.dmx-woi{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;box-shadow:0 0 0 2px var(--surface-2)}
.dmx-woi.oi-tg{background:#2aabee}
.dmx-woi.oi-tg svg{width:18px;height:18px;margin-left:-2px}
.dmx-woi.oi-dm{background:#fff}
.dmx-woi.oi-dm img{width:24px;height:24px;display:block}
.dmx-wo-ic.o-mix .dmx-woi{width:26px;height:26px;border-radius:8px}
.dmx-wo-ic.o-mix .dmx-woi.oi-tg svg{width:15px;height:15px}
.dmx-wo-ic.o-mix .dmx-woi.oi-dm img{width:20px;height:20px}
.dmx-wo-ic.o-mix .dmx-woi.oi-dm{margin-left:-8px;margin-top:10px}
.dmx-wo-ic.o-mix .dmx-woi.oi-tg{margin-top:-10px}
.dmx-wo.on .dmx-woi{box-shadow:0 0 0 2px #142a2b}

/* 1 · la misma ventana con tres filas */
.dmx-modal.dmx-pick3{gap:0}
.dmx-pick3 .dmx-pk-t{margin-bottom:12px}

/* 2 · menú pegado a la casilla, sin oscurecer la portada */
.dmx-pop{
  position:absolute;z-index:100000;width:268px;padding:8px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);color:var(--text);font-family:var(--font-body);
  box-shadow:0 18px 50px -12px rgba(0,0,0,.7);
  opacity:0;transform:translateY(-6px);transition:opacity .15s ease,transform .15s ease;
}
.dmx-pop.in{opacity:1;transform:none}
.dmx-pop::before{
  content:"";position:absolute;top:-6px;left:calc(var(--dmx-pop-x, 50%) - 6px);width:12px;height:12px;
  background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg);
}
.dmx-pop-h{padding:4px 8px 8px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.dmx-wo.sm{padding:9px 10px 9px 6px;gap:10px;border-radius:11px;border-color:transparent;background:none}
.dmx-wo.sm + .dmx-wo.sm{margin-top:2px}
.dmx-wo.sm:hover{background:var(--surface-2);border-color:transparent}
.dmx-wo.sm.on{background:rgba(18,216,210,.08);border-color:transparent}
.dmx-wo.sm .dmx-wo-tx b{font-size:14px}
.dmx-wo.sm .dmx-wo-tx small{font-size:11.5px}
.dmx-wo.sm .dmx-wo-ic{width:38px}
.dmx-wo.sm .dmx-woi{width:26px;height:26px;border-radius:8px;box-shadow:0 0 0 2px var(--surface)}
.dmx-wo.sm .dmx-woi.oi-tg svg{width:15px;height:15px}
.dmx-wo.sm .dmx-woi.oi-dm img{width:20px;height:20px}
.dmx-wo.sm .dmx-wo-ic.o-mix .dmx-woi{width:22px;height:22px;border-radius:7px}
.dmx-wo.sm .dmx-wo-ic.o-mix .dmx-woi.oi-tg svg{width:13px;height:13px}
.dmx-wo.sm .dmx-wo-ic.o-mix .dmx-woi.oi-dm img{width:17px;height:17px}
.dmx-wo.sm .dmx-wo-ck{border-color:transparent}

/* 3 · la misma ventana con tres tarjetas de marca */
.dmx-pick4 .dmx-pk-t{margin-bottom:8px}
.dmx-bc{position:relative;padding:16px 14px 13px;gap:7px}
.dmx-bc + .dmx-bc{margin-top:0}
.dmx-bc .dmx-lk{font-size:18px}
.dmx-bc .dmx-lk-dm img{width:24px;height:24px;border-radius:7px}
.dmx-bc .dmx-wo-ck{position:absolute;top:10px;right:10px;width:20px;height:20px}
.dmx-bc:not(.sel) .dmx-wo-ck{border-color:transparent}
@media (max-width:420px){
  .dmx-bc .dmx-lk{font-size:16px}
  .dmx-wo-tx b{font-size:14.5px}
}

/* ✅ 5-oct: «Comparte tu grupo» a la izquierda, en PC y en móvil. Fuera de «sólo DecentMsg» el botón
   blanco de DecentMsg (que también vivía arriba a la izquierda) no flota, así que el sitio está libre */
.fab-share{left:12px;right:auto}
/* con los grupos mezclados abre «¿Qué grupo quieres subir?»: filas como la ventana de la casilla, con › */
.dmx-wo-go .dmx-wo-ck{border-color:transparent;color:var(--muted)}
.dmx-wo-go:hover .dmx-wo-ck{color:var(--text)}
.dmx-wo-go + .dmx-wo-go{margin-top:8px}

/* ✅ 5-oct: con «sólo DecentMsg» no hay Destacados / Novedades: queda la casilla para cambiar de
   modo y, debajo, «Viendo sólo los N grupos de DecentMsg · Ver todo el catálogo» */
body.dmx-dmonly .sortbar .fzsw-col.dest,
body.dmx-dmonly .sortbar .fzsw-col.nov,
body.dmx-dmonly .sortbar .fzsw-track,
body.dmx-dmonly .sortbar .fzsw > .dmx-dmsep{display:none}
body.dmx-dmonly .novedad-notice{display:none}
/* móvil: «56 grupos de DecentMsg · Ver todo el catálogo» en una línea (la casilla ya dice «Sólo DecentMsg») */
@media (max-width:640px){ .dmx-only-pre{display:none} .dmx-onlyrow .dmx-s19{white-space:nowrap} }

/* ✅ 5-oct: con «sólo DecentMsg», la barra de la cabecera se lee como «descargar la app»:
   «Descargar DecentMsg», «gratis» y la flecha de descarga en un círculo verde */
.dmx-trig-free,.dmx-trig-dl{display:none}
body.dmx-dmon .decentmsg-trigger .dmx-trig-free{
  display:inline;position:relative;z-index:2;font-family:var(--font-body);font-weight:700;font-size:12px;color:#0f766e;
}
body.dmx-dmon .decentmsg-trigger .dmx-trig-dl{
  display:grid;place-items:center;position:relative;z-index:2;flex:none;
  width:24px;height:24px;border-radius:50%;background:#10b981;color:#fff;margin-left:2px;
}
body.dmx-dmon .decentmsg-trigger .dmx-trig-dl svg{width:14px;height:14px}

/* ✅ 5-oct: ventana de «Descargar DecentMsg» (barra de la cabecera con «sólo DecentMsg»): la descarga ya
   ha empezado y aquí van los pasos para instalar; la × arriba a la derecha como en las demás ventanas */
.dmx-gmodal.dmx-gdl{position:relative}
.dmx-gdl .dmx-ghead{padding-right:40px}
.dmx-gdl .dmx-gsteps{margin-top:16px}
.dmx-gclaim{margin:16px 0 0;font-size:13px;font-weight:600;color:var(--dmx-gr-ink);text-align:center}
.dmx-gdl .dmx-glinks{justify-content:center;margin-top:10px}

/* ✅ 5-oct: buscador con «Buscar en: Todos · Telegram · DecentMsg» (searchInstall en dmx.js).
   Los chips son los del filtro por país; la fila de DecentMsg, la de fanz con su mosaico y su botón verde */
.dmx-srcbar{margin-bottom:6px}
.dmx-srcc .dmx-tgi{width:15px;height:15px;flex:none;fill:#2aabee}
.dmx-srcc .dmx-dia{width:13px;height:13px;color:var(--dmx-gr)}
.dmx-srcc b{font-weight:700;color:var(--faint)}
.dmx-srcc.on b{color:inherit}
.dmx-srcc.tg.on{border-color:rgba(42,171,238,.7);color:#8fd0f7;background:rgba(42,171,238,.12)}
.dmx-srcc.dm.on{border-color:var(--dmx-gr-line);color:var(--dmx-gr-ink);background:var(--dmx-gr-soft)}
:root:not([data-theme="dark"]) .dmx-srcc.tg.on{color:#1683c4}
.dmx-src-h{
  display:flex;align-items:center;gap:8px;padding:11px 22px 9px;border-bottom:1px solid var(--line-soft);
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
}
.dmx-src-h b{font-weight:700;color:var(--muted)}
.dmx-dmlist{margin-top:12px}
.row .avatar.dmx-row-av{display:block}
.dmx-row-join{border-color:#10b981;color:#34d399}
.row.dmx-row:hover .dmx-row-join{background:#10b981;color:#03241a;box-shadow:0 0 18px -2px rgba(16,185,129,.45)}
@media (max-width:640px){ .dmx-src-h{padding:10px 12px 8px} }
/* móvil: «Buscar en» en una sola fila, tres partes iguales (sin la etiqueta, que no cabe) */
@media (max-width:640px){
  .dmx-srcbar{flex-wrap:nowrap;gap:6px}
  .dmx-srcbar .cf-l{display:none}
  .dmx-srcc{flex:1 1 0;min-width:0;justify-content:center;padding:7px 6px;font-size:12.5px;gap:5px;white-space:nowrap}
}
@media (max-width:380px){ .dmx-srcc{font-size:11.5px;padding:7px 4px;gap:4px} .dmx-srcc .dmx-tgi{width:13px;height:13px} }
/* el mosaico del grupo en pequeño dentro del círculo: se ven sus rombos, no un trozo suelto */
.row .avatar.dmx-row-av{background-size:auto,auto,38px 38px!important;background-position:center,center,center!important}

/* ═════ 5-oct: buscador, otras formas de juntar plataforma y país (?f=1 … 4; ver searchInstall2) ═════ */
.dmx-hscroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.dmx-hscroll::-webkit-scrollbar{display:none}
.dmx-hscroll > *{flex:none}
.dmx-fc .flag-tx{font-weight:700}
.dmx-tglist + .dmx-dmlist{margin-top:12px}
.dmx-src-h{justify-content:space-between}
.dmx-src-h > span{display:inline-flex;align-items:center;gap:8px}

/* 1 · pestañas */
.dmx-ftabs{flex-wrap:nowrap;gap:0;border-bottom:1px solid var(--line);margin-bottom:12px}
.dmx-ftab{
  flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 8px 12px;
  background:none;border:0;border-bottom:2.5px solid transparent;margin-bottom:-1px;cursor:pointer;white-space:nowrap;
  font-family:var(--font-body);font-size:14.5px;font-weight:650;color:var(--muted);transition:color .2s,border-color .2s;
}
.dmx-ftab:hover{color:var(--text)}
.dmx-ftab b{font-weight:700;color:var(--faint)}
.dmx-ftab .dmx-tgi{width:15px;height:15px;flex:none;fill:#2aabee}
.dmx-ftab .dmx-dia{width:13px;height:13px;color:var(--dmx-gr)}
.dmx-ftab.on{color:var(--text)}
.dmx-ftab.on b{color:var(--muted)}
.dmx-ftab.all.on{border-bottom-color:var(--teal)}
.dmx-ftab.tg.on{border-bottom-color:#2aabee}
.dmx-ftab.dm.on{border-bottom-color:#10b981}
.dmx-ftab:focus-visible{outline:2px solid var(--teal-ink);outline-offset:-2px;border-radius:8px}
.dmx-fcc{margin-top:-2px}

/* 2 · una sola fila */
.dmx-fsep{width:1px;height:24px;background:var(--line);margin:0 3px}

/* 3 · país en un desplegable */
.dmx-fsel{
  position:relative;display:inline-flex;align-items:center;gap:7px;padding:0 30px 0 13px;height:35px;border-radius:99px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);color:var(--muted);font-family:var(--font-body);font-size:13px;font-weight:650;
  transition:border-color .2s,color .2s,background .2s;
}
.dmx-fsel::after{
  content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;margin-top:-5px;pointer-events:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);
}
.dmx-fsel:hover{border-color:var(--muted);color:var(--text)}
.dmx-fsel.on{border-color:var(--teal-ink);color:var(--teal-ink);background:var(--teal-soft)}
.dmx-fsel .dmx-glb{width:15px;height:15px;flex:none}
.dmx-fsel select{
  -webkit-appearance:none;appearance:none;background:none;border:0;outline:0;color:inherit;cursor:pointer;
  font:inherit;padding:0;margin:0;
}
.dmx-fsel select option{color:#15181a;background:#fff}
.dmx-fsel:focus-within{outline:2px solid var(--teal-ink);outline-offset:2px}

/* 4 · bloques con sus países en el título */
.dmx-bh-cc{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;text-transform:none;letter-spacing:0}
.dmx-fc.sm{padding:4px 10px;font-size:12px;gap:5px}
.dmx-fc.sm .flag{width:15px;height:15px}
.dmx-more{justify-content:center;margin-top:12px}
.dmx-more button{
  display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;padding:8px 6px;
  font-family:var(--font-body);font-size:13.5px;font-weight:600;color:var(--muted);
}
.dmx-more u{color:var(--teal-ink);text-underline-offset:3px}
.dmx-more button:hover u{color:var(--text)}

@media (max-width:640px){
  .dmx-ftab{font-size:13px;gap:5px;padding:10px 4px 11px}
  .dmx-fcc,.dmx-f1row,.dmx-fdd{gap:6px}
  .dmx-fcc .cf-l{display:none}
  .dmx-f1row .cflag,.dmx-fdd .cflag,.dmx-fcc .cflag{padding:6px 11px;font-size:12.5px}
  .dmx-fsel{height:32px;font-size:12.5px}
  .dmx-src-h{flex-wrap:wrap;gap:6px}
}
/* 3 · el desplegable enseña «País» o el país elegido; el select, invisible encima, recibe el toque */
.dmx-fsel select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
@media (max-width:640px){
  .dmx-fdd{gap:5px}
  .dmx-fdd .cflag{padding:6px 9px;font-size:12px;gap:5px}
  .dmx-fdd .cflag b{display:none}
  .dmx-fsel{padding:0 26px 0 10px;gap:5px;font-size:12px}
  .dmx-fsel::after{right:11px}
}
@media (max-width:640px){ .dmx-fdd{gap:4px} .dmx-fdd .cflag{padding:6px 8px} }

/* ✅ 5-oct: el 3 elegido, con el país más llamativo y a la derecha de la fila: teal de fanz siempre a la
   vista; con un país elegido, relleno teal y su bandera en vez del globo */
.dmx-fdd .dmx-fsel{
  margin-left:auto;height:37px;padding:0 32px 0 13px;border:1.5px solid var(--teal-border);background:var(--teal-soft);
  color:var(--teal-ink);font-weight:700;font-size:13.5px;box-shadow:0 0 18px -6px var(--teal-glow);
}
.dmx-fdd .dmx-fsel:hover{border-color:var(--teal);color:var(--teal)}
.dmx-fdd .dmx-fsel.on{background:var(--teal);border-color:var(--teal);color:#04211f;box-shadow:0 0 22px -4px var(--teal-glow)}
.dmx-fdd .dmx-fsel .dmx-glb{width:16px;height:16px}
.dmx-fdd .dmx-fsel .flag{width:17px;height:17px;flex:none}
@media (max-width:640px){
  .dmx-fdd .dmx-fsel{height:33px;padding:0 25px 0 9px;font-size:12.5px;gap:5px}
  .dmx-fdd .dmx-fsel::after{right:10px}
  .dmx-fdd .dmx-fsel .flag{width:15px;height:15px}
}
/* más llamativo que los chips de al lado: más alto, borde teal entero y fondo teal más presente */
.dmx-fdd .dmx-fsel{height:40px;padding:0 34px 0 14px;font-size:14px;gap:8px;border-color:var(--teal);background:rgba(18,216,210,.15)}
.dmx-fdd .dmx-fsel::after{right:14px}
.dmx-fdd .dmx-fsel .dmx-glb{width:17px;height:17px}
@media (max-width:640px){
  .dmx-fdd .dmx-fsel{height:34px;padding:0 25px 0 9px;font-size:12.5px;gap:5px}
  .dmx-fdd .dmx-fsel::after{right:10px}
  .dmx-fdd .dmx-fsel .dmx-glb{width:15px;height:15px}
}

/* ✅ 5-oct: arreglo de la portada de fanz (la web real hace lo mismo): el muro se pinta con JavaScript al
   terminar de cargar; hasta entonces está vacío y el pie («directorio comunitario… · ⚖️ Reclamaciones») salía
   justo bajo la cabecera, como un aviso al entrar. El muro ocupa siempre al menos una pantalla */
main.stage{min-height:100vh;min-height:100svh}

/* ═════ 5-oct: vista «sólo DecentMsg» más ligera (?o=1 … 4; ver liteInstall en dmx.js) ═════ */
/* común: sin el botón del grupo oficial de fanz en Telegram (se guarda su hueco para que el logo siga centrado) */
body.dmx-olite .tg-wrap{visibility:hidden}
.dmx-dli{width:16px;height:16px;flex:none}

/* 2 · una sola barra en la cabecera: «Sólo DecentMsg ▾» y «Descargar DecentMsg» */
.dmx-o2bar{display:none}
body.dmx-o2 .dmx-o2bar{display:flex;gap:8px;margin:0 12px 10px}
body.dmx-o2 .topbar > .decentmsg-trigger,body.dmx-o3 .topbar > .decentmsg-trigger,body.dmx-o4 .topbar > .decentmsg-trigger{display:none!important}
body.dmx-o2 .sortbar,body.dmx-o3 .sortbar{display:none}
body.searching .dmx-o2bar{display:none!important}
.dmx-o2bar button{
  height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;white-space:nowrap;
  font-family:var(--font-display);font-weight:700;font-size:13.5px;letter-spacing:.2px;-webkit-tap-highlight-color:transparent;
}
.dmx-o2-pick{flex:0 0 auto;padding:0 12px 0 7px;background:var(--surface);color:var(--text);border:1.5px solid var(--teal-border)}
.dmx-o2-pick:hover{border-color:var(--teal)}
.dmx-o2-pick .dmx-cbox.dm{width:26px;height:26px;border-radius:7px;border-color:var(--teal);background:var(--teal)}
.dmx-o2-pick .dmx-cbox.dm .dmx-dia{opacity:1;transform:none;color:#04211f;width:14px;height:14px}
.dmx-o2-pick .dmx-s-chev{width:15px;height:15px;color:var(--muted)}
.dmx-o2-dl{flex:1 1 auto;padding:0 14px;background:#fff;color:#0b3b33;border:2px solid #14b8a6;box-shadow:0 4px 18px -6px rgba(20,184,166,.45)}
.dmx-o2-dl .dmx-dli{color:#10b981}
.dmx-o2-dl:hover{box-shadow:0 6px 22px -6px rgba(20,184,166,.6)}
.dmx-o2bar button:focus-visible{outline:2px solid var(--teal-ink);outline-offset:2px}

/* 3 · cabecera de sección sobre el muro: casilla, título y «Descargar» */
.dmx-o3head{
  display:flex;align-items:center;gap:12px;margin:4px 4px 16px;padding:12px 12px 12px 14px;border-radius:16px;
  background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(18,216,210,.04)),var(--surface);border:1px solid var(--dmx-gr-line);
}
.dmx-o3-pick{flex:none;padding:0;background:none;border:0;cursor:pointer;display:grid;place-items:center}
.dmx-o3-pick .dmx-cbox.dm{width:40px;height:40px;border-radius:11px}
.dmx-o3-pick .dmx-cbox.dm .dmx-dia{width:20px;height:20px}
.dmx-o3-tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dmx-o3-tt b{font-family:var(--font-display);font-weight:800;font-size:17px;line-height:1.2;color:var(--text)}
.dmx-o3-tt small{font-size:12.5px;font-weight:600;color:var(--muted)}
.dmx-o3-dl{
  flex:none;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px;border-radius:12px;cursor:pointer;
  background:linear-gradient(135deg,#34d399,#10b981);color:#03241a;border:0;font-family:var(--font-body);font-weight:700;font-size:14px;
  box-shadow:0 4px 20px rgba(16,185,129,.3);
}
.dmx-o3-dl:hover{box-shadow:0 7px 28px rgba(16,185,129,.45)}
.dmx-o3-pick:focus-visible,.dmx-o3-dl:focus-visible{outline:2px solid var(--teal-ink);outline-offset:3px;border-radius:12px}

/* 4 · la descarga en una barra fija abajo; arriba sólo la casilla */
.dmx-o4bar{display:none}
body.dmx-o4 .dmx-o4bar{
  display:flex;align-items:center;gap:11px;position:fixed;z-index:80;left:50%;bottom:16px;transform:translateX(-50%);
  width:min(520px, calc(100% - 24px));padding:10px 10px 10px 12px;border-radius:16px;
  background:rgba(20,22,25,.94);border:1px solid var(--dmx-gr-line);box-shadow:0 18px 50px -12px rgba(0,0,0,.75);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
body.dmx-o4.searching .dmx-o4bar{display:none}
body.dmx-o4:not(.dmx-hasapp) main.stage{padding-bottom:96px}
/* ✅ 6-oct: quien ya abrió la app desde fanz no ve la barra de descarga */
body.dmx-hasapp .dmx-o4bar{display:none!important}
.dmx-o4-ic{width:40px;height:40px;border-radius:11px;background:#fff;display:grid;place-items:center;flex:none}
.dmx-o4-ic img{width:30px;height:30px;display:block}
.dmx-o4-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.dmx-o4-tx b{font-family:var(--font-display);font-weight:800;font-size:15px;color:#5eead4}
.dmx-o4-tx small{font-size:12px;font-weight:600;color:var(--muted)}
.dmx-o4-dl{
  flex:none;display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 18px;border-radius:12px;cursor:pointer;
  background:linear-gradient(135deg,#34d399,#10b981);color:#03241a;border:0;font-family:var(--font-body);font-weight:700;font-size:14.5px;
}
.dmx-o4-dl:focus-visible{outline:2px solid var(--teal-ink);outline-offset:3px}

@media (max-width:640px){
  body.dmx-o2 .dmx-o2bar{gap:6px}
  .dmx-o2bar button{font-size:12.5px;gap:6px}
  .dmx-o2-pick{padding:0 9px 0 6px}
  .dmx-o2-pick .dmx-cbox.dm{width:24px;height:24px}
  .dmx-o2-dl{padding:0 10px}
  .dmx-o3head{gap:10px;padding:10px;margin:2px 0 12px}
  .dmx-o3-pick .dmx-cbox.dm{width:36px;height:36px}
  .dmx-o3-tt b{font-size:15px}
  .dmx-o3-tt small{font-size:11.5px}
  .dmx-o3-dl{height:38px;padding:0 12px;font-size:13px}
  body.dmx-o4 .dmx-o4bar{bottom:10px;padding:8px 8px 8px 10px}
}
@media (max-width:640px){ .dmx-o2-dm{display:none} .dmx-o2-pick{flex:1 1 auto} .dmx-o2-dl{flex:0 0 auto} }
/* barra de abajo: el logo del sistema del visitante dentro de la frase */
.dmx-o4-tx small{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.dmx-o4-tx small .dmx-os{width:13px;height:13px;fill:currentColor;flex:none;margin-left:1px}

/* ═════ 5-oct: la casilla de DecentMsg más visible (?k=1 … 5; ver KS en dmx.js) ═════ */
.dmx-dmcol[class*="dmx-k"] .dmx-dmt{position:relative}

/* 1 · más grande, con el brillo de Destacados y el rótulo en teal */
.dmx-k1 .dmx-cbox.dm{width:40px;height:40px;border-radius:11px;box-shadow:0 0 0 1px rgba(18,216,210,.55),0 0 24px -2px var(--teal-glow)}
.dmx-k1 .dmx-cbox.dm .dmx-dia{width:21px;height:21px}
.dmx-dmcol.dmx-k1 .dmx-dmcap,.dmx-dmcol.dmx-k1:has(.on) .dmx-dmcap{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--teal);text-shadow:0 0 12px var(--teal-glow)}

/* 2 · globo verde con cuántos grupos hay */
.dmx-k2 .dmx-cbox.dm{width:32px;height:32px;border-radius:9px;box-shadow:0 0 18px -4px var(--teal-glow)}
.dmx-k2 .dmx-cbox.dm .dmx-dia{width:17px;height:17px}
.dmx-kbadge{
  position:absolute;top:-9px;right:-13px;min-width:22px;height:20px;padding:0 6px;border-radius:99px;display:grid;place-items:center;
  background:#10b981;color:#03241a;font-style:normal;font-family:var(--font-body);font-weight:800;font-size:11.5px;line-height:1;
  box-shadow:0 0 0 2.5px var(--bg),0 4px 12px rgba(16,185,129,.45);pointer-events:none;
}
.dmx-dmcol.dmx-k2 .dmx-dmcap,.dmx-dmcol.dmx-k2:has(.on) .dmx-dmcap{color:var(--dmx-gr-ink)}

/* 3 · pastilla: casilla, «DecentMsg» y ▾ */
.dmx-k3 .dmx-dmt.dmx-dm16{
  display:inline-flex;align-items:center;gap:9px;padding:5px 11px 5px 5px;border-radius:13px;
  border:1.5px solid var(--teal-border);background:var(--teal-soft);box-shadow:0 0 22px -8px var(--teal-glow);
  transition:border-color .2s,background .2s;
}
.dmx-k3 .dmx-dmt.dmx-dm16:hover{border-color:var(--teal);background:rgba(18,216,210,.18)}
.dmx-k3 .dmx-cbox.dm{width:30px;height:30px;border-radius:9px}
.dmx-k3-t{font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:.2px;color:var(--teal);white-space:nowrap}
.dmx-k3 .dmx-s-chev{width:16px;height:16px;color:var(--teal);flex:none}
.dmx-dmcol.dmx-k3 .dmx-dmcap{display:none}

/* 4 · late cada pocos segundos con una onda teal */
.dmx-k4 .dmx-cbox.dm{width:32px;height:32px;border-radius:9px;animation:dmxKNudge 7s ease-in-out 2.5s infinite}
.dmx-k4 .dmx-cbox.dm .dmx-dia{width:17px;height:17px}
.dmx-k4 .dmx-dmt::after{
  content:"";position:absolute;left:50%;top:50%;width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:9px;pointer-events:none;
  opacity:0;animation:dmxKRing 7s ease-out 2.5s infinite;
}
@keyframes dmxKNudge{0%,84%,100%{transform:scale(1)}88%{transform:scale(1.18)}92%{transform:scale(.95)}96%{transform:scale(1.07)}}
@keyframes dmxKRing{0%,84%{box-shadow:0 0 0 0 rgba(18,216,210,.7);opacity:0}86%{opacity:1}100%{box-shadow:0 0 0 18px rgba(18,216,210,0);opacity:0}}
.dmx-dmcol.dmx-k4 .dmx-dmcap,.dmx-dmcol.dmx-k4:has(.on) .dmx-dmcap{color:var(--teal-ink)}
@media (prefers-reduced-motion: reduce){ .dmx-k4 .dmx-cbox.dm,.dmx-k4 .dmx-dmt::after{animation:none} }

/* 5 · la primera vez, un globo de ayuda debajo de la casilla */
.dmx-tip{
  position:absolute;z-index:20;top:calc(100% + 26px);right:-14px;width:236px;padding:12px 13px 11px;border-radius:14px;text-align:left;
  background:var(--teal);color:#04211f;box-shadow:0 14px 40px -10px rgba(0,0,0,.7),0 0 26px -6px var(--teal-glow);
  display:flex;flex-direction:column;gap:4px;font-family:var(--font-body);white-space:normal;
  animation:dmxTipIn .35s cubic-bezier(.2,.7,.2,1) .6s both;
}
.dmx-tip::before{content:"";position:absolute;top:-6px;right:26px;width:12px;height:12px;background:var(--teal);transform:rotate(45deg)}
.dmx-tip b{font-weight:800;font-size:13.5px}
.dmx-tip span{font-size:12.5px;line-height:1.4;font-weight:600}
.dmx-tip-ok{
  align-self:flex-end;margin-top:4px;padding:6px 12px;border-radius:9px;border:0;cursor:pointer;
  background:#04211f;color:var(--teal);font:700 12.5px var(--font-body);
}
@keyframes dmxTipIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

@media (max-width:640px){
  .dmx-k1 .dmx-cbox.dm{width:32px;height:32px;border-radius:9px}
  .dmx-k1 .dmx-cbox.dm .dmx-dia{width:17px;height:17px}
  .dmx-dmcol.dmx-k1 .dmx-dmcap,.dmx-dmcol.dmx-k1:has(.on) .dmx-dmcap{font-size:8.5px;letter-spacing:.06em}
  .dmx-k2 .dmx-cbox.dm,.dmx-k4 .dmx-cbox.dm{width:28px;height:28px;border-radius:8px}
  .dmx-k4 .dmx-dmt::after{width:28px;height:28px;margin:-14px 0 0 -14px}
  .dmx-kbadge{top:-8px;right:-11px;min-width:19px;height:17px;font-size:10px;padding:0 4px}
  .dmx-k3 .dmx-dmt.dmx-dm16{gap:3px;padding:3px 4px 3px 3px;border-radius:10px}
  .dmx-k3 .dmx-cbox.dm{width:26px;height:26px;border-radius:8px}
  .dmx-k3-t{display:none}
  .dmx-k3 .dmx-s-chev{width:13px;height:13px}
  .dmx-dmcol.dmx-k3 .dmx-dmcap{display:block}
  .dmx-tip{right:-6px;width:220px;top:calc(100% + 20px)}
  .dmx-tip::before{right:14px}
}
/* móvil: la casilla va pegada al borde derecho; su rótulo, el número y el globo se alinean a su derecha para no salirse */
@media (max-width:640px){
  .dmx-dmcol .dmx-dmcap{left:auto;right:0;transform:none}
  .dmx-kbadge{right:auto;left:-13px}
  .dmx-tip{right:0}
  .dmx-tip::before{right:8px}
}
@media (max-width:640px){
  .dmx-k3 .dmx-dmt.dmx-dm16{gap:0;padding:2px}
  .dmx-k3 .dmx-s-chev{display:none}
}

/* ═════ 5-oct: colores de Destacados (--pd), Novedades (--pn) y la casilla de DecentMsg (--pm) (?p=1 … 5) ═════ */
body.dmx-p1{--pd:18,216,210;  --pn:255,46,196;  --pm:52,211,153; --pm-ink:#03241a}
body.dmx-p2{--pd:251,191,36;  --pn:255,46,196;  --pm:18,216,210; --pm-ink:#04211f}
body.dmx-p3{--pd:242,244,245; --pn:242,244,245; --pm:18,216,210; --pm-ink:#04211f}
body.dmx-p4{--pd:251,191,36;  --pn:167,139,250; --pm:52,211,153; --pm-ink:#03241a}
body.dmx-p5{--pd:255,51,68;   --pn:242,244,245; --pm:18,216,210; --pm-ink:#04211f}
/* Destacados */
body.dmx-pal .fzsw-lbl.dest{color:rgba(var(--pd),.42)}
body.dmx-pal .fzsw-lbl.dest:hover{color:rgba(var(--pd),.7)}
body.dmx-pal .fzsw.dest .fzsw-lbl.dest{color:rgb(var(--pd));text-shadow:0 0 14px rgba(var(--pd),.55),0 0 42px rgba(var(--pd),.35)}
body.dmx-pal .fzsw.dest .fzsw-track{border-color:rgba(var(--pd),.45)}
body.dmx-pal .fzsw.dest .fzsw-knob{background:rgb(var(--pd));box-shadow:0 4px 22px -2px rgba(var(--pd),.4)}
/* Novedades */
body.dmx-pal .fzsw-lbl.nov{color:rgba(var(--pn),.42)}
body.dmx-pal .fzsw-lbl.nov:hover{color:rgba(var(--pn),.7)}
body.dmx-pal .fzsw.nov .fzsw-lbl.nov{color:rgb(var(--pn));text-shadow:0 0 14px rgba(var(--pn),.55),0 0 42px rgba(var(--pn),.35)}
body.dmx-pal .fzsw.nov .fzsw-track{border-color:rgba(var(--pn),.45)}
body.dmx-pal .fzsw.nov .fzsw-knob{background:rgb(var(--pn));box-shadow:0 4px 22px -2px rgba(var(--pn),.4)}
/* la casilla de DecentMsg (con el diseño 1, el elegido: grande y con brillo) */
body.dmx-pal .dmx-dm16.on .dmx-cbox.dm.c2{border-color:rgb(var(--pm));background:rgb(var(--pm))}
body.dmx-pal .dmx-dm16.on .dmx-cbox.dm.c2 .dmx-dia{color:var(--pm-ink)}
body.dmx-pal .dmx-dm20:not(.on) .dmx-cbox.dm .dmx-dia{color:rgb(var(--pm))}
body.dmx-pal .dmx-k1 .dmx-cbox.dm{box-shadow:0 0 0 1px rgba(var(--pm),.55),0 0 24px -2px rgba(var(--pm),.4)}
body.dmx-pal .dmx-dmcol.dmx-k1 .dmx-dmcap,body.dmx-pal .dmx-dmcol.dmx-k1:has(.on) .dmx-dmcap{color:rgb(var(--pm));text-shadow:0 0 12px rgba(var(--pm),.4)}
body.dmx-pal .dmx-dmcol:not(.dmx-k1):has(.on) .dmx-dmcap{color:rgba(var(--pm),.75)}

/* ✅ 5-oct: en móvil la fila Destacados · interruptor · Novedades · casilla de DecentMsg se mide con el ancho
   de la pantalla. Con tamaños fijos era más ancha que muchos móviles (360 px: 16 px de más por lado; 412 px:
   20 px) y la página se podía arrastrar de lado, con su barra. Ahora cabe de 320 a 640 px. Van sobre una clase de
   la página puesta desde el principio: sobre la barra, los textos encogían con una animación en cada repintado */
@media (max-width:640px){
  body.dmx-s20:not(.dmx-h1) .fzsw{gap:min(1.5vw,10px)}
  body.dmx-s20:not(.dmx-h1) .fzsw-lbl{font-size:min(2.8vw,.85rem)}
  body.dmx-s20:not(.dmx-h1) .fzsw.dest .fzsw-lbl.dest,
  body.dmx-s20:not(.dmx-h1) .fzsw.nov .fzsw-lbl.nov{font-size:min(3.9vw,1.3rem)}
  body.dmx-s20:not(.dmx-h1) .fzsw-track{--tw:min(13.5vw,74px);width:var(--tw);height:calc(var(--tw) * .53)}
  body.dmx-s20:not(.dmx-h1) .fzsw-knob{top:3px;left:3px;width:calc(var(--tw) * .53 - 9px);height:calc(var(--tw) * .53 - 9px)}
  body.dmx-s20:not(.dmx-h1) .fzsw.nov .fzsw-knob{transform:translateX(calc(var(--tw) * .47))}
  body.dmx-s20:not(.dmx-h1) .dmx-k1 .dmx-cbox.dm{width:min(8vw,36px);height:min(8vw,36px)}
  body.dmx-s20:not(.dmx-h1) .dmx-k1 .dmx-cbox.dm .dmx-dia{width:min(4.3vw,19px);height:min(4.3vw,19px)}
}

/* ── 5-oct: ?h=1 · la casilla de DecentMsg arriba a la derecha (sitio del botón de Telegram, que pasa a Ajustes) ── */
.dmx-hdm{display:none}
body.dmx-h1 .tg-wrap .btn-tg{display:none}
body.dmx-h1 .dmx-hdm{display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
body.dmx-h1 .dmx-hdm .dmx-cbox.dm{width:34px;height:34px;border-radius:10px;box-shadow:0 0 0 1px rgba(52,211,153,.55),0 0 20px -2px rgba(52,211,153,.45)}
body.dmx-h1 .dmx-hdm .dmx-cbox.dm .dmx-dia{width:18px;height:18px}
body.dmx-h1 .dmx-hdm:not(.on) .dmx-cbox.dm{box-shadow:none}
body.dmx-h1.dmx-dmonly .dmx-hdm .dmx-cbox.dm{box-shadow:0 0 0 3px rgba(52,211,153,.35),0 0 20px -2px rgba(52,211,153,.45)}
body.dmx-h1 .dmx-hdm:focus-visible{outline:2px solid var(--teal-ink);outline-offset:2px;border-radius:12px}
body.dmx-h1.hero-on .dmx-hdm .dmx-cbox.dm{width:31px;height:31px;border-radius:9px}
body.dmx-h1 .sortbar .dmx-dmcol,body.dmx-h1 .sortbar .fzsw > .dmx-dmsep{display:none}
body.dmx-h1.dmx-dmonly .sortbar{display:none}
.dmx-settg .set-ic .dmx-tgi{width:18px;height:18px;fill:#229ED9}

/* ✅ 5-oct: con la casilla arriba, Destacados y Novedades con el tamaño de fanz100.com. Sólo en móviles de 370 px
   o menos se ajustan al ancho: ahí la fila de fanz se sale unos píxeles (también en la web real) y la página se
   podría arrastrar de lado */
@media (max-width:370px){
  body.dmx-h1 .fzsw{gap:min(8px,2.2vw)}
  body.dmx-h1 .fzsw-lbl{font-size:3.2vw}
  body.dmx-h1 .fzsw.dest .fzsw-lbl.dest,body.dmx-h1 .fzsw.nov .fzsw-lbl.nov{font-size:4.7vw}
  body.dmx-h1 .fzsw-track{--tw:min(60px,16.5vw);width:var(--tw);height:calc(var(--tw) * .53)}
  body.dmx-h1 .fzsw-knob{top:3px;left:3px;width:calc(var(--tw) * .53 - 9px);height:calc(var(--tw) * .53 - 9px)}
  body.dmx-h1 .fzsw.nov .fzsw-knob{transform:translateX(calc(var(--tw) * .47))}
}
@media (max-width:350px){
  body.dmx-h1 .fzsw{gap:1.6vw}
  body.dmx-h1 .fzsw-lbl{font-size:2.9vw}
  body.dmx-h1 .fzsw.dest .fzsw-lbl.dest,body.dmx-h1 .fzsw.nov .fzsw-lbl.nov{font-size:4.3vw}
  body.dmx-h1 .fzsw-track{--tw:15vw}
}
/* con la casilla arriba (h=1), el hueco de arriba a la derecha es suyo: en «sólo DecentMsg» se esconde el botón de
   Telegram (ya lo hace h=1), no el hueco */
body.dmx-h1.dmx-olite .tg-wrap{visibility:visible}

/* ═════ 5-oct: efectos para que se vea más la casilla de arriba (?e=1 … 6; ver ES en dmx.js) ═════ */
body.dmx-h1 .dmx-hdm{position:relative}
body.dmx-h1 .dmx-hdm .dmx-cbox.dm{position:relative}

/* 1 · latido con onda cada pocos segundos (como el «+» de «Comparte tu grupo») */
body.dmx-e1 .dmx-hdm .dmx-cbox.dm{animation:dmxE1 6s ease-in-out 1.5s infinite}
body.dmx-e1 .dmx-hdm::after{
  content:"";position:absolute;inset:2px;border-radius:10px;pointer-events:none;opacity:0;
  animation:dmxE1r 6s ease-out 1.5s infinite;
}
@keyframes dmxE1{0%,82%,100%{transform:scale(1)}86%{transform:scale(1.2)}90%{transform:scale(.94)}94%{transform:scale(1.06)}}
@keyframes dmxE1r{0%,82%{box-shadow:0 0 0 0 rgba(52,211,153,.8);opacity:0}84%{opacity:1}100%{box-shadow:0 0 0 18px rgba(52,211,153,0);opacity:0}}

/* 2 · un destello blanco la cruza cada pocos segundos */
body.dmx-e2 .dmx-hdm .dmx-cbox.dm{overflow:hidden}
body.dmx-e2 .dmx-hdm .dmx-cbox.dm::after{
  content:"";position:absolute;top:-30%;bottom:-30%;left:-70%;width:50%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.9),transparent);transform:skewX(-18deg);
  animation:dmxE2 4.5s ease-in-out 1s infinite;
}
@keyframes dmxE2{0%,68%{left:-70%}90%,100%{left:140%}}

/* 3 · el brillo respira sin parar */
body.dmx-e3 .dmx-hdm.on .dmx-cbox.dm{animation:dmxE3 2.6s ease-in-out infinite}
@keyframes dmxE3{
  0%,100%{box-shadow:0 0 0 1px rgba(52,211,153,.55),0 0 8px -2px rgba(52,211,153,.35)}
  50%{box-shadow:0 0 0 1px rgba(52,211,153,.95),0 0 30px 3px rgba(52,211,153,.75)}
}

/* 4 · un borde de luz gira alrededor */
@property --dmxa{syntax:"<angle>";inherits:false;initial-value:0deg}
body.dmx-e4 .dmx-hdm::before{
  content:"";position:absolute;inset:-1px;border-radius:13px;padding:2.5px;pointer-events:none;
  background:conic-gradient(from var(--dmxa),#34d399,#12d8d2 18%,transparent 34%,transparent 66%,#6ee7b7 84%,#34d399);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:dmxE4 2.8s linear infinite;
}
@keyframes dmxE4{to{--dmxa:360deg}}

/* 5 · el rombo da una vuelta cada pocos segundos */
body.dmx-e5 .dmx-hdm .dmx-cbox.dm .dmx-dia{animation:dmxE5 5s cubic-bezier(.45,0,.25,1) 1s infinite}
@keyframes dmxE5{0%,70%{transform:rotateY(0)}92%,100%{transform:rotateY(360deg)}}

/* 6 · punto rojo de aviso, como las novedades de las apps, hasta el primer toque */
body.dmx-e6:not(.dmx-dot-seen) .dmx-hdm::after{
  content:"";position:absolute;top:-1px;right:-1px;width:11px;height:11px;border-radius:50%;pointer-events:none;
  background:#ff3344;box-shadow:0 0 0 2px var(--bg);animation:dmxE6 1.6s ease-in-out infinite;
}
@keyframes dmxE6{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}

@media (prefers-reduced-motion: reduce){
  body[class*="dmx-e"] .dmx-hdm .dmx-cbox.dm,body[class*="dmx-e"] .dmx-hdm::after,body[class*="dmx-e"] .dmx-hdm::before,
  body[class*="dmx-e"] .dmx-hdm .dmx-cbox.dm::after,body[class*="dmx-e"] .dmx-hdm .dmx-dia{animation:none}
}
/* ✅ 13-oct: Android en dos versiones (64 y 32 bits). «64 bits» dentro del botón verde: pequeño y apagado, es un
   dato técnico; en la línea «DecentMsg para Android · gratis» del panel es texto apagado, sin píldora. Debajo del
   botón, una línea discreta ofrece la otra versión (para móviles antiguos de 32 bits) */
.dmx-bits{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:6px;background:rgba(3,36,26,.14);
  font-size:11px;font-weight:600;letter-spacing:.5px;line-height:1.3;color:rgba(3,36,26,.62);white-space:nowrap;vertical-align:1px}
.dmx-gline .dmx-bits{background:none;padding:0;margin:0;border-radius:0;font-size:inherit;font-weight:inherit;letter-spacing:0;color:var(--faint,#5c6469);vertical-align:baseline}
.dmx-otra{margin:10px 0 0;text-align:center;font-size:12.5px;line-height:1.45;color:var(--faint,#5c6469)}
.dmx-otra button{background:none;border:none;padding:0;cursor:pointer;font:inherit;font-weight:600;color:var(--muted,#9aa3a8);
  text-decoration:underline;text-decoration-color:rgba(154,163,168,.45);text-underline-offset:2px}
.dmx-otra button:hover{color:var(--dmx-gr-ink,#34d399);text-decoration-color:currentColor}
.dmx-otra button:focus-visible{outline:2px solid #10b981;outline-offset:2px;border-radius:3px}
/* móviles de 320 a 359 px (los antiguos de pantalla pequeña): el botón no cabe con el dato en la misma línea; «64 bits»
   baja debajo del texto, centrado. En 360 px o más sigue todo en una línea, como en la maqueta validada */
@media (max-width:359px){
  .dmx-gbtn[data-dmx-act="dl-and"]{flex-wrap:wrap;row-gap:3px}
  .dmx-gbtn[data-dmx-act="dl-and"] .dmx-bits{margin-left:0}
}