/* Manza's Bot — sección "Guardia" de la landing (2026-10-25, versión 5). Arriba elegís un ATAQUE; abajo se ve adentro de
   un Discord armado a mano (servers, canales, chat y miembros) qué pasa, y la manzanita lo cuenta con frases cortas.
   Mismos tokens que manza-landing.css (--gold-2, --text, --muted). Con prefers-reduced-motion todo aparece directo. */

.gd{ padding:96px 24px 40px; scroll-margin-top:96px; max-width:min(1400px,calc(100% - 32px)); }
.gd-head{ max-width:720px; margin:0 auto 40px; text-align:center; }
.gd-head h2{ font-weight:800; font-size:clamp(30px,4vw,60px); line-height:1.04; letter-spacing:-.03em; text-wrap:balance; }
.gd-head p{ color:hsl(var(--muted)); font-size:17px; line-height:1.6; margin:16px auto 0; max-width:520px; text-wrap:pretty; }

/* ---------- ataques: fila de tarjetas ---------- */
.gd-amenazas{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.gd-am{
  --anillo:0;
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-height:132px; padding:16px;
  border:0; border-radius:22px; text-align:left; cursor:pointer; font-family:inherit; color:hsl(var(--muted));
  background:rgba(20,20,28,.40); -webkit-backdrop-filter:blur(20px) saturate(170%); backdrop-filter:blur(20px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .18s cubic-bezier(.23,1,.32,1), background-color .3s ease, color .3s ease;
}
@media (hover:hover){ .gd-am:hover{ background:rgba(28,28,38,.52); color:hsl(var(--text)); } }
.gd-am:active{ transform:scale(.97); }
.gd-am:focus-visible{ outline:2px solid hsl(var(--gold-2)); outline-offset:3px; }
.gd-ic{
  position:relative; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; margin-bottom:auto;
  background:rgba(255,255,255,.06);
}
.gd-ic svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; position:relative; }
/* el anillo que se llena mientras dura la escena (en vez de una barra) */
.gd-ic::before{
  content:""; position:absolute; inset:-3px; border-radius:50%; opacity:0;
  background:conic-gradient(hsl(var(--gold-2)) calc(var(--anillo) * 1turn), transparent 0);
  -webkit-mask:radial-gradient(circle, transparent 21px, #000 21.5px); mask:radial-gradient(circle, transparent 21px, #000 21.5px);
  transition:opacity .3s ease;
}
.gd-am-t{ font:700 15px/1.25 'Montserrat', sans-serif; color:hsl(var(--text)); text-wrap:balance; }
.gd-am-d{ font-size:12.5px; letter-spacing:.01em; }
.gd-am[aria-selected="true"]{ background:rgba(36,34,46,.62); color:hsl(var(--text)); box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 18px 40px -22px rgba(0,0,0,.7); }
.gd-am[aria-selected="true"] .gd-ic{ background:hsl(var(--gold-2) / .16); color:hsl(var(--gold-2)); }
.gd-am[aria-selected="true"] .gd-ic::before{ opacity:1; }
.gd-am[aria-selected="true"] .gd-am-d{ color:hsl(var(--gold-2)); }

.gd-otra, .gd-panel{
  display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border:0; border-radius:999px; cursor:pointer;
  font:600 14px/1 Inter, sans-serif; transition:transform .16s cubic-bezier(.23,1,.32,1), background-color .2s ease, filter .2s ease;
}
.gd-otra{ background:rgba(255,255,255,.06); color:hsl(var(--text)); }
.gd-otra svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.gd-panel{ background:hsl(var(--gold-2)); color:#1b1408; }
@media (hover:hover){ .gd-otra:hover{ background:rgba(255,255,255,.1); } .gd-panel:hover{ filter:brightness(1.06); } }
.gd-otra:active, .gd-panel:active{ transform:scale(.96); }
.gd-otra:focus-visible, .gd-panel:focus-visible{ outline:2px solid hsl(var(--gold-2)); outline-offset:3px; }


/* ---------- el Discord de adentro: servers, canales, chat y miembros ---------- */
@property --anillo{ syntax:'<number>'; inherits:true; initial-value:0; }
.dx{ position:relative; }
.dx-app{
  position:relative; display:grid; grid-template-columns:72px 232px minmax(0,1fr) 224px; height:600px; border-radius:24px; overflow:hidden;
  background:#313338; color:#dbdee1; font:400 15px/1.375 Inter, system-ui, sans-serif;
  box-shadow:0 40px 90px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
}
/* el borde de la ventana se tiñe con lo que está pasando: rojo ataque, celeste congelado, verde a salvo */
.dx-app::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; opacity:0;
  box-shadow:inset 0 0 0 1.5px var(--dx-aura, transparent), inset 0 0 70px -10px var(--dx-aura, transparent);
  transition:opacity .6s ease;
}
.dx[data-tono="mal"]{ --dx-aura:rgba(242,63,66,.55); }
.dx[data-tono="frio"]{ --dx-aura:rgba(88,180,255,.55); }
.dx[data-tono="aviso"]{ --dx-aura:rgba(240,178,50,.45); }
.dx[data-tono="mal"] .dx-app::after, .dx[data-tono="frio"] .dx-app::after, .dx[data-tono="aviso"] .dx-app::after{ opacity:1; }
.dx[data-tono="mal"] .dx-app::after{ animation:dx-alarma 1.4s ease-in-out infinite; }
@keyframes dx-alarma{ 50%{ opacity:.45; } }

/* columna de servers */
.dx-rail{ background:#1e1f22; display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 0; }
.dx-srv{
  position:relative; width:48px; height:48px; display:grid; place-items:center; border-radius:50%; overflow:hidden;
  background:#313338; font-size:20px; color:#dbdee1;
}
.dx-srv:not(.on){ background:color-mix(in srgb, var(--s, #313338) 30%, #313338); }
.dx-srv img{ width:100%; height:100%; object-fit:cover; }
.dx-srv.on{ border-radius:16px; }
.dx-srv.on::before{ content:""; position:absolute; left:-12px; top:8px; width:4px; height:32px; border-radius:0 4px 4px 0; background:#f2f3f5; }
.dx-rail .dx-srv.on{ overflow:visible; } .dx-rail .dx-srv.on img{ border-radius:16px; }
.dx-sep{ width:32px; height:2px; border-radius:1px; background:#35363c; }
.dx-mas{ color:#23a55a; font-size:24px; font-weight:300; }

/* canales */
.dx-lado{ background:#2b2d31; display:flex; flex-direction:column; min-height:0; }
.dx-server{ display:flex; align-items:center; justify-content:space-between; height:48px; flex:none; padding:0 16px; font-weight:600; color:#f2f3f5; box-shadow:0 1px 0 rgba(0,0,0,.25); }
.dx-server svg{ width:16px; height:16px; fill:none; stroke:#b5bac1; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.dx-canales{ list-style:none; margin:0; padding:8px 8px 12px; display:flex; flex-direction:column; overflow:hidden; border-radius:12px; }
.dx-cat{ padding:14px 8px 4px; font:700 11.5px/1 Inter, sans-serif; letter-spacing:.04em; text-transform:uppercase; color:#949ba4; }
.dx-canales .dx-cat:first-child{ padding-top:6px; }
.dx-ch{ display:grid; grid-template-rows:minmax(0,1fr); overflow:hidden; transition:grid-template-rows .45s cubic-bezier(.32,.72,0,1), opacity .4s ease; }
.dx-chi{
  display:flex; align-items:center; gap:6px; height:32px; margin:1px 0; padding:0 8px; border-radius:6px; overflow:hidden; min-height:0;
  color:#949ba4; font-size:15px; white-space:nowrap;
  transition:background-color .25s ease, color .25s ease, transform .45s cubic-bezier(.23,1,.32,1), filter .4s ease;
}
.dx-chi i{ font-style:normal; font-size:20px; line-height:1; color:#80848e; width:16px; text-align:center; }
.dx-chi span{ overflow:hidden; text-overflow:ellipsis; }
.dx-cand{ width:14px; height:14px; margin-left:auto; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:0; transform:scale(.6); transition:opacity .3s ease, transform .35s cubic-bezier(.23,1,.32,1); }
.dx-ch.activo .dx-chi{ background:#404249; color:#f2f3f5; }
.dx-ch.oculto .dx-chi{ color:#5c5f66; filter:blur(.6px); }
.dx-ch.oculto .dx-cand, .dx-ch.cerrado .dx-cand{ opacity:1; transform:none; }
.dx-ch.cerrado .dx-chi{ color:#9db8d8; background:rgba(88,180,255,.08); }
/* el canal que borran: se pone rojo, tiembla y se cierra la fila */
.dx-ch.peligro .dx-chi{ background:rgba(242,63,66,.22); color:#ffb4b5; animation:dx-tiembla .26s ease 2; }
.dx-ch.peligro .dx-chi i{ color:#f23f42; }
.dx-ch.borrado{ grid-template-rows:minmax(0,0fr); opacity:0; }
.dx-ch.borrado .dx-chi{ transform:translateX(-24px); filter:blur(3px); }
.dx-ch.vuelve .dx-chi{ animation:dx-vuelve .9s cubic-bezier(.23,1,.32,1) both; }
@keyframes dx-tiembla{ 0%,100%{ transform:translateX(0); } 30%{ transform:translateX(-3px); } 70%{ transform:translateX(3px); } }
@keyframes dx-vuelve{ 0%{ transform:translateX(-14px); background:rgba(35,165,90,.45); color:#d1fadf; } 55%{ transform:none; background:rgba(35,165,90,.28); } 100%{ background:transparent; } }

/* chat */
.dx-main{ display:flex; flex-direction:column; min-width:0; min-height:0; }
.dx-top{ display:flex; align-items:center; gap:10px; height:48px; flex:none; padding:0 12px 0 16px; box-shadow:0 1px 0 rgba(0,0,0,.25); }
.dx-canal{ display:flex; align-items:center; gap:6px; min-width:0; }
.dx-canal i{ font-style:normal; font-size:22px; line-height:1; color:#80848e; }
.dx-canal b{ color:#f2f3f5; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dx-estado{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 11px; border-radius:999px; white-space:nowrap;
  font:600 12px/1 Inter, sans-serif; color:#86efac; background:rgba(35,165,90,.14); transition:color .35s ease, background-color .35s ease;
}
.dx-estado::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; animation:dx-latido 2s ease-out infinite; }
.dx-estado[data-tono="mal"]{ color:#ff8a8c; background:rgba(242,63,66,.18); }
.dx-estado[data-tono="frio"]{ color:#9fd3ff; background:rgba(88,180,255,.16); }
.dx-estado[data-tono="aviso"]{ color:#ffd479; background:rgba(240,178,50,.16); }
@keyframes dx-latido{ 0%{ box-shadow:0 0 0 0 currentColor; } 70%,100%{ box-shadow:0 0 0 6px transparent; } }
.dx-repetir{ flex:none; width:32px; height:32px; display:grid; place-items:center; border:0; border-radius:8px; background:transparent; color:#b5bac1; cursor:pointer; transition:background-color .2s ease, color .2s ease, transform .16s cubic-bezier(.23,1,.32,1); }
.dx-repetir svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.dx-repetir:active{ transform:scale(.92) rotate(-30deg); }
.dx-repetir:focus-visible{ outline:2px solid hsl(var(--gold-2)); }
@media (hover:hover) and (pointer:fine){ .dx-repetir:hover{ background:#404249; color:#f2f3f5; } }

.dx-chat{
  flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; gap:2px; padding:12px 0 6px;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 48px); mask-image:linear-gradient(to bottom, transparent 0, #000 48px);
}
.dx-escribir{ flex:none; display:flex; align-items:center; gap:12px; margin:4px 16px 16px; height:44px; padding:0 14px; border-radius:8px; background:#383a40; color:#6d6f78; font-size:15px; overflow:hidden; white-space:nowrap; }
.dx-mas-ic{ width:24px; height:24px; flex:none; display:grid; place-items:center; border-radius:50%; background:#b5bac1; color:#383a40; font-weight:700; font-size:16px; line-height:1; }
#dxEscribir.tipea{ color:#dbdee1; }
#dxEscribir.tipea::after{ content:""; display:inline-block; width:2px; height:18px; margin-left:1px; background:#dbdee1; vertical-align:-3px; animation:dx-parpadeo 1s steps(2) infinite; }
@keyframes dx-parpadeo{ 50%{ opacity:0; } }

.dx-m{ flex:none; padding:2px 16px; opacity:0; transform:translateY(12px); transition:opacity .4s cubic-bezier(.23,1,.32,1), transform .45s cubic-bezier(.23,1,.32,1); }
.dx-m.in{ opacity:1; transform:none; }
.dx-m.sale{ opacity:0; transform:translateX(24px) scale(.98); filter:blur(3px); transition:opacity .35s ease, transform .35s ease, filter .35s ease; }
.dx-m .dcp{ background:transparent; padding:6px 0; border-radius:0; font-size:15px; }
.dx-m .dcp-embed{ max-width:500px; }
.dx-m .dcp-desc{ font-size:14px; line-height:1.45; }
.dx-m .dcp-btn{ transition:filter .2s ease, transform .16s cubic-bezier(.23,1,.32,1), box-shadow .3s ease; }
.dx-m .dcp-btn.click{ filter:brightness(.82); transform:scale(.96); }
.dx-u{ display:grid; grid-template-columns:40px minmax(0,1fr); gap:0 14px; padding:6px 8px; margin:0 -8px; border-radius:8px; transition:background-color .3s ease, box-shadow .3s ease; }
.dx-u .av{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font:700 15px Inter, sans-serif; color:#fff; background:var(--av, #5865f2); }
.dx-u .nom{ font-weight:600; color:var(--nc, #f2f3f5); }
.dx-u .nom time{ margin-left:6px; font-size:12px; font-weight:400; color:#949ba4; }
.dx-u .txt{ word-break:break-word; }
.dx-u .txt a{ color:#00a8fc; }
.dx-u .txt .men{ padding:0 2px; border-radius:3px; background:rgba(88,101,242,.3); color:#c9cdfb; font-weight:500; }
.dx-u.borrando{ background:rgba(242,63,66,.14); box-shadow:inset 0 0 0 1px rgba(242,63,66,.6); }
.dx-trucho{ display:inline-block; white-space:nowrap; padding:0 2px; border-radius:4px; transition:color .3s ease; }
.dx-trucho i{ font-style:normal; display:inline-block; border-radius:4px; transition:color .3s ease, transform .4s cubic-bezier(.23,1,.32,1), box-shadow .3s ease; }
.dx-trucho.mal{ color:#ff8a8c; text-decoration:underline wavy rgba(242,63,66,.7); text-underline-offset:4px; }
.dx-trucho.mal i{ color:#fff; font-weight:800; transform:translateY(-2px) scale(1.25); margin:0 2px; box-shadow:0 0 0 2px #f23f42, 0 0 14px rgba(242,63,66,.6); }
.dx-foto{ position:relative; width:150px; height:150px; transition:box-shadow .3s ease; margin-top:6px; border-radius:10px; overflow:hidden; background:#fff; display:grid; place-items:center; }
.dx-qr{
  width:120px; height:120px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 27 27' shape-rendering='crispEdges'%3E%3Cpath fill='%23111' d='M0 0h1v1h-1zM1 0h1v1h-1zM2 0h1v1h-1zM3 0h1v1h-1zM4 0h1v1h-1zM5 0h1v1h-1zM6 0h1v1h-1zM8 0h1v1h-1zM9 0h1v1h-1zM10 0h1v1h-1zM11 0h1v1h-1zM12 0h1v1h-1zM14 0h1v1h-1zM15 0h1v1h-1zM18 0h1v1h-1zM19 0h1v1h-1zM20 0h1v1h-1zM21 0h1v1h-1zM22 0h1v1h-1zM23 0h1v1h-1zM24 0h1v1h-1zM0 1h1v1h-1zM6 1h1v1h-1zM8 1h1v1h-1zM9 1h1v1h-1zM10 1h1v1h-1zM12 1h1v1h-1zM13 1h1v1h-1zM15 1h1v1h-1zM16 1h1v1h-1zM18 1h1v1h-1zM24 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM3 2h1v1h-1zM4 2h1v1h-1zM6 2h1v1h-1zM11 2h1v1h-1zM15 2h1v1h-1zM18 2h1v1h-1zM20 2h1v1h-1zM21 2h1v1h-1zM22 2h1v1h-1zM24 2h1v1h-1zM0 3h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM6 3h1v1h-1zM9 3h1v1h-1zM10 3h1v1h-1zM11 3h1v1h-1zM13 3h1v1h-1zM14 3h1v1h-1zM18 3h1v1h-1zM20 3h1v1h-1zM21 3h1v1h-1zM22 3h1v1h-1zM24 3h1v1h-1zM0 4h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM6 4h1v1h-1zM8 4h1v1h-1zM15 4h1v1h-1zM18 4h1v1h-1zM20 4h1v1h-1zM21 4h1v1h-1zM22 4h1v1h-1zM24 4h1v1h-1zM0 5h1v1h-1zM6 5h1v1h-1zM8 5h1v1h-1zM9 5h1v1h-1zM12 5h1v1h-1zM13 5h1v1h-1zM14 5h1v1h-1zM15 5h1v1h-1zM16 5h1v1h-1zM18 5h1v1h-1zM24 5h1v1h-1zM0 6h1v1h-1zM1 6h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1zM4 6h1v1h-1zM5 6h1v1h-1zM6 6h1v1h-1zM8 6h1v1h-1zM10 6h1v1h-1zM12 6h1v1h-1zM14 6h1v1h-1zM16 6h1v1h-1zM18 6h1v1h-1zM19 6h1v1h-1zM20 6h1v1h-1zM21 6h1v1h-1zM22 6h1v1h-1zM23 6h1v1h-1zM24 6h1v1h-1zM10 7h1v1h-1zM14 7h1v1h-1zM15 7h1v1h-1zM16 7h1v1h-1zM0 8h1v1h-1zM6 8h1v1h-1zM8 8h1v1h-1zM11 8h1v1h-1zM12 8h1v1h-1zM15 8h1v1h-1zM16 8h1v1h-1zM17 8h1v1h-1zM20 8h1v1h-1zM24 8h1v1h-1zM1 9h1v1h-1zM2 9h1v1h-1zM7 9h1v1h-1zM10 9h1v1h-1zM11 9h1v1h-1zM12 9h1v1h-1zM13 9h1v1h-1zM15 9h1v1h-1zM16 9h1v1h-1zM17 9h1v1h-1zM19 9h1v1h-1zM20 9h1v1h-1zM23 9h1v1h-1zM3 10h1v1h-1zM4 10h1v1h-1zM5 10h1v1h-1zM6 10h1v1h-1zM8 10h1v1h-1zM12 10h1v1h-1zM16 10h1v1h-1zM18 10h1v1h-1zM19 10h1v1h-1zM0 11h1v1h-1zM5 11h1v1h-1zM12 11h1v1h-1zM16 11h1v1h-1zM17 11h1v1h-1zM18 11h1v1h-1zM19 11h1v1h-1zM20 11h1v1h-1zM21 11h1v1h-1zM0 12h1v1h-1zM3 12h1v1h-1zM6 12h1v1h-1zM8 12h1v1h-1zM12 12h1v1h-1zM13 12h1v1h-1zM15 12h1v1h-1zM16 12h1v1h-1zM17 12h1v1h-1zM19 12h1v1h-1zM21 12h1v1h-1zM22 12h1v1h-1zM23 12h1v1h-1zM1 13h1v1h-1zM5 13h1v1h-1zM7 13h1v1h-1zM9 13h1v1h-1zM10 13h1v1h-1zM11 13h1v1h-1zM14 13h1v1h-1zM15 13h1v1h-1zM19 13h1v1h-1zM20 13h1v1h-1zM22 13h1v1h-1zM23 13h1v1h-1zM2 14h1v1h-1zM4 14h1v1h-1zM6 14h1v1h-1zM7 14h1v1h-1zM10 14h1v1h-1zM11 14h1v1h-1zM13 14h1v1h-1zM14 14h1v1h-1zM15 14h1v1h-1zM16 14h1v1h-1zM17 14h1v1h-1zM18 14h1v1h-1zM19 14h1v1h-1zM21 14h1v1h-1zM23 14h1v1h-1zM24 14h1v1h-1zM0 15h1v1h-1zM1 15h1v1h-1zM2 15h1v1h-1zM5 15h1v1h-1zM8 15h1v1h-1zM10 15h1v1h-1zM13 15h1v1h-1zM17 15h1v1h-1zM21 15h1v1h-1zM22 15h1v1h-1zM23 15h1v1h-1zM24 15h1v1h-1zM0 16h1v1h-1zM2 16h1v1h-1zM3 16h1v1h-1zM4 16h1v1h-1zM6 16h1v1h-1zM8 16h1v1h-1zM9 16h1v1h-1zM10 16h1v1h-1zM11 16h1v1h-1zM12 16h1v1h-1zM13 16h1v1h-1zM14 16h1v1h-1zM16 16h1v1h-1zM17 16h1v1h-1zM18 16h1v1h-1zM19 16h1v1h-1zM20 16h1v1h-1zM21 16h1v1h-1zM22 16h1v1h-1zM23 16h1v1h-1zM8 17h1v1h-1zM9 17h1v1h-1zM10 17h1v1h-1zM16 17h1v1h-1zM20 17h1v1h-1zM23 17h1v1h-1zM0 18h1v1h-1zM1 18h1v1h-1zM2 18h1v1h-1zM3 18h1v1h-1zM4 18h1v1h-1zM5 18h1v1h-1zM6 18h1v1h-1zM14 18h1v1h-1zM15 18h1v1h-1zM16 18h1v1h-1zM18 18h1v1h-1zM20 18h1v1h-1zM0 19h1v1h-1zM6 19h1v1h-1zM8 19h1v1h-1zM9 19h1v1h-1zM10 19h1v1h-1zM12 19h1v1h-1zM16 19h1v1h-1zM20 19h1v1h-1zM22 19h1v1h-1zM23 19h1v1h-1zM24 19h1v1h-1zM0 20h1v1h-1zM2 20h1v1h-1zM3 20h1v1h-1zM4 20h1v1h-1zM6 20h1v1h-1zM9 20h1v1h-1zM11 20h1v1h-1zM12 20h1v1h-1zM13 20h1v1h-1zM15 20h1v1h-1zM16 20h1v1h-1zM17 20h1v1h-1zM18 20h1v1h-1zM19 20h1v1h-1zM20 20h1v1h-1zM22 20h1v1h-1zM23 20h1v1h-1zM24 20h1v1h-1zM0 21h1v1h-1zM2 21h1v1h-1zM3 21h1v1h-1zM4 21h1v1h-1zM6 21h1v1h-1zM11 21h1v1h-1zM14 21h1v1h-1zM15 21h1v1h-1zM17 21h1v1h-1zM18 21h1v1h-1zM19 21h1v1h-1zM20 21h1v1h-1zM21 21h1v1h-1zM23 21h1v1h-1zM0 22h1v1h-1zM2 22h1v1h-1zM3 22h1v1h-1zM4 22h1v1h-1zM6 22h1v1h-1zM10 22h1v1h-1zM11 22h1v1h-1zM12 22h1v1h-1zM13 22h1v1h-1zM14 22h1v1h-1zM16 22h1v1h-1zM18 22h1v1h-1zM19 22h1v1h-1zM21 22h1v1h-1zM22 22h1v1h-1zM0 23h1v1h-1zM6 23h1v1h-1zM8 23h1v1h-1zM11 23h1v1h-1zM12 23h1v1h-1zM14 23h1v1h-1zM16 23h1v1h-1zM17 23h1v1h-1zM20 23h1v1h-1zM22 23h1v1h-1zM24 23h1v1h-1zM0 24h1v1h-1zM1 24h1v1h-1zM2 24h1v1h-1zM3 24h1v1h-1zM4 24h1v1h-1zM5 24h1v1h-1zM6 24h1v1h-1zM8 24h1v1h-1zM9 24h1v1h-1zM10 24h1v1h-1zM11 24h1v1h-1zM12 24h1v1h-1zM13 24h1v1h-1zM14 24h1v1h-1zM15 24h1v1h-1zM19 24h1v1h-1zM20 24h1v1h-1zM22 24h1v1h-1zM23 24h1v1h-1zM24 24h1v1h-1z'/%3E%3C/svg%3E") center/contain no-repeat;
  image-rendering:pixelated;
}
.dx-foto::after{ content:""; position:absolute; inset:0 0 auto; height:26px; background:linear-gradient(to bottom, transparent, rgba(242,63,66,.55) 85%, #f23f42); opacity:0; }
.dx-foto.leido::after{ opacity:1; animation:dx-escanea .8s ease-in-out 2 alternate; }
.dx-foto.leido{ box-shadow:0 0 0 3px #f23f42; }
@keyframes dx-escanea{ from{ transform:translateY(0); } to{ transform:translateY(124px); } }
.dx-sis{ display:flex; align-items:center; gap:10px; padding:4px 0 4px 10px; color:#949ba4; font-size:14px; }
.dx-sis svg{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.dx-sis b{ color:#dbdee1; font-weight:600; }
.dx-sis.mal svg{ color:#f23f42; } .dx-sis.ok svg, .dx-sis.entra svg{ color:#23a55a; } .dx-sis.frio svg{ color:#58b4ff; }
.dx-div{ display:flex; align-items:center; gap:10px; margin:8px 0; color:#f2f3f5; font:600 12px/1 Inter, sans-serif; }
.dx-div::before, .dx-div::after{ content:""; flex:1; height:1px; background:#4e5058; }
.dx-efimero{ margin:4px 0 0 54px; font-size:12px; color:#949ba4; display:flex; align-items:center; gap:6px; }
.dx-efimero svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; }
.dx-modal{ max-width:340px; margin:6px 0 2px 54px; padding:16px; border-radius:10px; background:#232428; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.dx-modal b{ display:block; color:#f2f3f5; font-size:16px; margin-bottom:12px; }
.dx-modal label{ display:block; font:700 12px/1 Inter, sans-serif; text-transform:uppercase; letter-spacing:.02em; color:#b5bac1; margin-bottom:8px; }
.dx-modal .campo{ height:40px; border-radius:4px; background:#1e1f22; display:flex; align-items:center; padding:0 10px; color:#dbdee1; }
.dx-modal .enviar{ margin-top:14px; display:flex; justify-content:flex-end; }
.dx-modal .enviar span{ padding:8px 18px; border-radius:3px; background:#5865f2; color:#fff; font-weight:500; font-size:14px; transition:filter .2s ease, transform .16s ease; }
.dx-modal .enviar span.click{ filter:brightness(.82); transform:scale(.96); }

/* miembros */
.dx-miembros{ background:#2b2d31; padding:0 8px 12px; min-height:0; overflow:hidden; }
.dx-miembros .dx-cat{ height:48px; display:flex; align-items:flex-end; padding:0 8px 10px; }
.dx-miembros ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px; }
.dx-mi{
  position:relative; display:grid; grid-template-columns:32px minmax(0,1fr); grid-template-rows:auto auto; column-gap:10px; align-items:center;
  padding:5px 8px; border-radius:6px; opacity:0; transform:translateX(16px);
  transition:opacity .35s ease, transform .45s cubic-bezier(.23,1,.32,1), background-color .3s ease, box-shadow .3s ease;
}
.dx-mi.in{ opacity:1; transform:none; }
.dx-mi .av{ grid-row:span 2; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; overflow:hidden; font:700 13px Inter, sans-serif; color:#fff; background:var(--c); transition:filter .4s ease, background-color .4s ease; }
.dx-mi .av img{ width:100%; height:100%; object-fit:cover; }
.dx-mi .nm{ font-size:14.5px; font-weight:600; color:var(--c); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .4s ease; }
.dx-mi .nm em{ margin-left:5px; padding:1px 4px; border-radius:3px; background:#5865f2; color:#fff; font:700 9.5px/1.3 Inter, sans-serif; font-style:normal; vertical-align:2px; }
.dx-mi small{ font-size:11.5px; color:#949ba4; line-height:1.2; }
.dx-mi small:empty{ display:none; }
.dx-ice{ position:absolute; right:8px; top:50%; font-size:18px; opacity:0; transform:translateY(-50%) scale(.4) rotate(-25deg); transition:opacity .3s ease, transform .5s cubic-bezier(.23,1,.32,1); }
.dx-mi.nueva .nm{ color:#b5bac1; }
.dx-mi.echado{ opacity:0; transform:translateX(30px); background:rgba(242,63,66,.25); }
.dx-mi.congelado{ padding-right:32px; background:rgba(88,180,255,.14); box-shadow:inset 0 0 0 1px rgba(88,180,255,.55); }
.dx-mi.congelado .nm{ color:#9fd3ff; }
.dx-mi.congelado .av{ filter:grayscale(1) brightness(1.2); background:#4b7da8; }
.dx-mi.congelado .dx-ice{ opacity:1; transform:translateY(-50%); }
.dx-mi.sinrol .nm{ color:#949ba4; } .dx-mi.sinrol .av{ background:#4e5058; } .dx-mi.sinrol small{ opacity:.35; text-decoration:line-through; }
.dx-mi.vuelve{ animation:dx-vuelve .9s cubic-bezier(.23,1,.32,1); }
.dx-mi.trabado{ background:rgba(242,63,66,.14); box-shadow:inset 0 0 0 1px rgba(242,63,66,.5); animation:dx-tiembla .26s ease 3; }

/* lo que hay que mirar ahora: un borde dorado que late */
.dx .dx-foco{ position:relative; z-index:1; border-radius:8px; animation:dx-foco 1.6s ease-in-out infinite; }
.dx .dx-canales.dx-foco, .dx .dx-miembros ul.dx-foco{ animation:dx-foco-in 1.6s ease-in-out infinite; border-radius:10px; }
@keyframes dx-foco-in{
  0%,100%{ box-shadow:inset 0 0 0 1.5px hsl(var(--gold-2) / .75); background-color:hsl(var(--gold-2) / .06); }
  50%{ box-shadow:inset 0 0 0 1.5px hsl(var(--gold-2) / .35); background-color:hsl(var(--gold-2) / .02); }
}
@keyframes dx-foco{
  0%,100%{ box-shadow:0 0 0 2px hsl(var(--gold-2)), 0 0 0 6px hsl(var(--gold-2) / .22); }
  50%{ box-shadow:0 0 0 2px hsl(var(--gold-2)), 0 0 0 10px hsl(var(--gold-2) / 0); }
}

/* la manzanita que cuenta qué pasa, pegada abajo de la ventana */
.dx-narra{
  position:relative; box-sizing:border-box; z-index:2; display:flex; align-items:center; gap:14px; width:min(860px, calc(100% - 40px)); margin:14px auto 0; padding:12px 12px 12px 14px;
  border-radius:22px; background:rgba(24,24,34,.72); -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%);
  box-shadow:0 24px 50px -18px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px rgba(255,255,255,.06);
}
.dx-narra-av{ width:44px; height:44px; flex:none; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px hsl(var(--gold-2) / .6); animation:dx-flota 3.2s ease-in-out infinite; }
@keyframes dx-flota{ 50%{ transform:translateY(-3px) rotate(-4deg); } }
.dx-narra-c{ flex:1; min-width:0; }
.dx-narra-c small{ display:block; font:700 11px/1 Inter, sans-serif; letter-spacing:.06em; text-transform:uppercase; color:hsl(var(--gold-2)); margin-bottom:5px; }
.dx-narra-c p{ display:grid; margin:0; min-height:1.45em; font:600 clamp(15.5px,1.4vw,18px)/1.45 Inter, sans-serif; color:hsl(var(--text)); }
.dx-narra-c p > span{ grid-area:1/1; opacity:0; transform:translateY(10px); filter:blur(4px); transition:opacity .35s ease, transform .5s cubic-bezier(.23,1,.32,1), filter .35s ease; text-wrap:pretty; }
.dx-narra-c p > span.in{ opacity:1; transform:none; filter:none; }
.dx-narra-c p > span.fuera{ opacity:0; transform:translateY(-8px); filter:blur(4px); transition-duration:.2s; }
.dx-narra .gd-panel{ flex:none; }


/* ---------- responsive ---------- */
@media (max-width:1180px){
  .dx-app{ grid-template-columns:72px 220px minmax(0,1fr); }
  .dx-miembros{ display:none; }
}
@media (max-width:1080px){
  .gd-amenazas{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(190px,1fr); overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:6px; margin-inline:-4px; padding-inline:4px; scrollbar-width:none; }
  .gd-amenazas::-webkit-scrollbar{ display:none; }
  .gd-am{ scroll-snap-align:start; min-height:118px; }
}
@media (max-width:820px){
  .dx-app{ grid-template-columns:200px minmax(0,1fr); }
  .dx-rail{ display:none; }
}
@media (max-width:640px){
  .gd{ padding:72px 0 24px; }
  .gd-am{ min-height:108px; padding:14px; border-radius:18px; }
  .dx-app{ grid-template-columns:1fr; grid-template-rows:auto auto; height:auto; border-radius:20px; }
  .dx-server{ display:none; }
  .dx-canales{ flex-direction:row; flex-wrap:wrap; gap:4px; padding:6px 10px 10px; box-shadow:0 1px 0 rgba(0,0,0,.25); border-radius:0; }
  .dx-canales .dx-cat{ flex-basis:100%; padding:8px 2px 2px; }
  .dx-chi{ height:30px; margin:0; padding:0 10px 0 6px; font-size:14px; background:rgba(255,255,255,.04); }
  .dx-ch.borrado{ display:none; }
  .dx-main{ height:480px; }
  .dx-m{ padding:2px 12px; }
  .dx-u{ grid-template-columns:32px minmax(0,1fr); gap:0 10px; }
  .dx-u .av{ width:32px; height:32px; font-size:13px; }
  .dx-modal, .dx-efimero{ margin-left:0; }
  .dx-estado{ font-size:11px; padding:0 9px; }
  .dx-escribir{ margin:4px 12px 12px; }
  .dx-narra{ width:100%; box-sizing:border-box; margin-top:10px; flex-wrap:wrap; gap:10px 12px; }
  .dx-narra-c{ flex-basis:calc(100% - 60px); }
  .dx-narra .gd-panel{ width:100%; box-sizing:border-box; justify-content:center; }
}

@media (prefers-reduced-motion: reduce){
  .gd-am, .dx *, .dx-app::after{ transition:none !important; animation:none !important; }
  .dx-m, .dx-mi, .dx-narra-c p > span.in{ opacity:1; transform:none; filter:none; }
}


/* ---------- Probalo vos (2026-10-25, v7): la escena se frena en un botón hasta que lo tocás ---------- */
.dx .dx-tocable{ cursor:pointer; }
@media (hover:hover) and (pointer:fine){ .dx .dx-tocable:hover{ filter:brightness(1.14); } }
.dx .dx-tocable:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.dx-m .dcp-sel, .dx-foto{ transition:transform .16s cubic-bezier(.23,1,.32,1), filter .2s ease, box-shadow .3s ease; }
.dx-m .dcp-sel.click, .dx-foto.click{ transform:scale(.97); filter:brightness(.9); }

/* la manito que señala: la punta del dedo cae justo en el punto que calcula el JS */
.dx-mano{
  position:absolute; z-index:5; left:0; top:0; width:34px; height:34px; margin:-8px 0 0 -13px; pointer-events:none;
  opacity:0; transform:translate(-6px,12px) scale(.9); transition:opacity .25s ease, transform .4s cubic-bezier(.23,1,.32,1);
}
.dx-mano.ve{ opacity:1; transform:none; }
.dx-mano svg{ position:relative; width:34px; height:34px; fill:#fff; stroke:#1e1f22; stroke-width:1.3; stroke-linejoin:round; stroke-linecap:round; filter:drop-shadow(0 6px 10px rgba(0,0,0,.5)); transform-origin:38% 20%; }
.dx-mano.ve svg{ animation:dx-toque 1.4s cubic-bezier(.45,0,.55,1) .35s infinite; }
@keyframes dx-toque{ 0%,100%{ transform:none; } 35%{ transform:translate(-2px,-6px) rotate(-7deg); } 55%{ transform:scale(.9); } }
.dx-mano i{ position:absolute; left:2px; top:-3px; width:22px; height:22px; border-radius:50%; border:2px solid hsl(var(--gold-2)); opacity:0; }
.dx-mano.ve i{ animation:dx-onda 1.4s ease-out .35s infinite; }
@keyframes dx-onda{ 0%,50%{ opacity:0; transform:scale(.4); } 58%{ opacity:.95; } 100%{ opacity:0; transform:scale(1.8); } }

/* la rayita del narrador que se vacía mientras te espera */
.dx-cuenta{ position:absolute; left:24px; right:24px; bottom:5px; height:2px; border-radius:2px; background:hsl(var(--gold-2)); transform-origin:left center; opacity:0; transition:opacity .3s ease; }
.dx-cuenta.ve{ opacity:.85; }

/* botón del parlante */
.dx-sonido{ display:inline-flex; align-items:center; width:auto; gap:6px; padding:0 10px 0 8px; font:600 12px/1 Inter, sans-serif; }
.dx-sonido svg path{ transform-box:fill-box; }
.dx-sonido .dx-ondas{ opacity:0; transform:translateX(-3px); transition:opacity .25s ease, transform .3s cubic-bezier(.23,1,.32,1); }
.dx-sonido .dx-mute{ transition:opacity .2s ease; }
.dx-sonido:active{ transform:scale(.95); }
.dx-sonido[aria-pressed="true"]{ color:#86efac; background:rgba(35,165,90,.14); }
.dx-sonido[aria-pressed="true"] .dx-ondas{ opacity:1; transform:none; }
.dx-sonido[aria-pressed="true"] .dx-mute{ opacity:0; }


/* ---------- el final: la misma noche con y sin Manza ---------- */
.vs{ margin-top:clamp(80px,9vw,128px); }
.vs-head{ max-width:640px; margin:0 auto 28px; text-align:center; }
.vs-head h3{ margin:0; font-weight:800; font-size:clamp(28px,3.4vw,48px); line-height:1.05; letter-spacing:-.03em; text-wrap:balance; }
.vs-head p{ margin:14px auto 0; max-width:500px; color:hsl(var(--muted)); font-size:16.5px; line-height:1.6; text-wrap:pretty; }

.vs-marco{
  --pos:50%;
  position:relative; height:470px; border-radius:24px; overflow:hidden; isolation:isolate; cursor:ew-resize;
  touch-action:pan-y; user-select:none; -webkit-user-select:none;
  box-shadow:0 40px 90px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
}
.vs-capa{ position:absolute; top:0; bottom:0; overflow:hidden; container-type:inline-size; }
/* cada lado es un server entero que se angosta o se ensancha con la barra (así los dos finales se leen desde el principio) */
.vs-sin{ left:0; width:var(--pos); }
.vs-con{ right:0; width:calc(100% - var(--pos)); }
.vs-app{ display:grid; grid-template-columns:232px minmax(0,1fr) 224px; height:100%; background:#313338; color:#dbdee1; font:400 15px/1.375 Inter, system-ui, sans-serif; }
.vs-app .dx-main{ height:100%; }
.vs-chat{ padding-bottom:18px; }
.vs-capa::after{ content:""; position:absolute; inset:0; pointer-events:none; }
.vs-sin::after{ box-shadow:inset 0 0 0 1.5px rgba(242,63,66,.5), inset 0 0 130px -24px rgba(242,63,66,.5); animation:dx-alarma 1.4s ease-in-out infinite; }
.vs-con::after{ box-shadow:inset 0 0 0 1.5px rgba(35,165,90,.45), inset 0 0 130px -34px rgba(35,165,90,.32); }
.vs-sin .dx-server b{ color:#ff8a8c; }
.vs-roto .dx-chi{ color:#ffb4b5; background:rgba(242,63,66,.14); }
.vs-roto .dx-chi i{ color:#f23f42; }
.vs-sin .dx-mi .av{ background:#5c2b2d; }

.vs-etiquetas{ display:flex; justify-content:space-between; margin:0 4px 12px; }
.vs-et{
  display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px; border-radius:999px;
  font:700 13.5px/1 Inter, sans-serif; color:#fff; pointer-events:none;
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  transition:opacity .3s ease, transform .35s cubic-bezier(.23,1,.32,1);
}
.vs-et-sin{ background:rgba(242,63,66,.34); box-shadow:inset 0 0 0 1px rgba(255,138,140,.45), 0 10px 24px -10px rgba(0,0,0,.6); }
.vs-et-con{ background:rgba(35,165,90,.34); box-shadow:inset 0 0 0 1px rgba(134,239,172,.45), 0 10px 24px -10px rgba(0,0,0,.6); }
.vs-solo-con .vs-et-sin, .vs-solo-sin .vs-et-con{ opacity:.35; transform:scale(.96); }

.vs-barra{ position:absolute; top:0; bottom:0; left:var(--pos); z-index:4; width:48px; margin-left:-24px; display:grid; place-items:center; outline:none; }
.vs-barra::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.18), 0 0 20px rgba(255,255,255,.55); }
.vs-perilla{
  position:relative; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; color:#1e1f22;
  background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 0 4px rgba(255,255,255,.18);
  transition:transform .18s cubic-bezier(.23,1,.32,1), box-shadow .25s ease;
}
.vs-perilla svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
@media (hover:hover) and (pointer:fine){ .vs-marco:hover .vs-perilla{ transform:scale(1.05); } }
.vs-marco.vs-arrastra .vs-perilla{ transform:scale(.94); }
.vs-barra:focus-visible .vs-perilla{ box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 0 3px hsl(var(--gold-2)); }
.vs-marco:not(.vs-tocado) .vs-perilla{ animation:vs-llama 2.2s ease-in-out 3s infinite; }
@keyframes vs-llama{ 50%{ box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 0 14px rgba(255,255,255,0); } }
.vs-pista{
  position:absolute; top:calc(50% + 34px); left:50%; transform:translateX(-50%); white-space:nowrap; padding:6px 11px; border-radius:999px;
  background:rgba(10,10,16,.7); color:#fff; font:600 12px/1 Inter, sans-serif; pointer-events:none; transition:opacity .3s ease;
}
.vs-tocado .vs-pista{ opacity:0; }

.vs-fin{ display:flex; flex-direction:column; align-items:center; gap:18px; margin-top:40px; text-align:center; }
.vs-fin p{ margin:0; font:700 clamp(20px,2.3vw,30px)/1.25 'Montserrat', sans-serif; letter-spacing:-.02em; color:hsl(var(--text)); text-wrap:balance; }
.vs-fin .gd-panel{ height:48px; padding:0 26px; font-size:15px; }

@container (max-width:860px){ .vs-app{ grid-template-columns:210px minmax(0,1fr); } .vs-app .dx-miembros{ display:none; } }
@container (max-width:560px){ .vs-app{ grid-template-columns:minmax(0,1fr); } .vs-app .dx-lado{ display:none; } }
@container (max-width:320px){
  .vs-app .dx-m{ padding:2px 10px; }
  .vs-app .dx-u{ grid-template-columns:28px minmax(0,1fr); gap:0 8px; }
  .vs-app .dx-u .av{ width:28px; height:28px; font-size:12px; }
  .vs-app .dx-u .nom time{ display:none; }
  .vs-app .dx-u .txt, .vs-app .dx-sis{ font-size:13.5px; }
  .vs-app .dx-estado{ display:none; }
  .vs-app .dx-top{ padding:0 10px; }
}
@container (max-width:110px){ .vs-app .dx-main{ opacity:.4; } }
@media (max-width:640px){
  .vs-marco{ height:440px; border-radius:20px; }
  .dx-sonido span{ display:none; }
  .dx-sonido{ width:32px; padding:0; }
  .vs-et{ height:30px; padding:0 11px; font-size:12.5px; }
  .vs-sin::after{ box-shadow:inset 0 0 0 1.5px rgba(242,63,66,.5), inset 0 0 44px -18px rgba(242,63,66,.5); }
  .vs-con::after{ box-shadow:inset 0 0 0 1.5px rgba(35,165,90,.45), inset 0 0 44px -22px rgba(35,165,90,.32); }
}
@media (prefers-reduced-motion: reduce){
  .vs *, .vs-capa::after, .dx-mano, .dx-mano *{ transition:none !important; animation:none !important; }
}