:root{
  --text:#eef2ff; 
  --line:rgba(255,255,255,.16);
  --magenta:#ff6bd6; 
  --violeta:#a974ff; 
  --cian:#63d4ff;
}
*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:Poppins,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,var(--magenta)0%,#b056f7 42%,var(--violeta)50%,#7b5af5 58%,var(--cian)100%);
}

.wrap{min-height:100svh;display:grid;place-items:center;padding:24px}

.canvas{
  position:relative;width:min(88vmin,1000px);aspect-ratio:1/1;border-radius:22px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 12px 40px rgba(0,0,0,.35);background:#0e0f16;
}
.canvas svg{width:100%;height:100%;display:block}

/* Hotspots */
.hot circle{
  fill:transparent;cursor:pointer;transition:filter .25s,stroke .25s,fill .25s;vector-effect:non-scaling-stroke;
}
.hot:hover circle{
  fill:rgba(255,255,255,.15);stroke:#fff;stroke-width:3;
  filter:drop-shadow(0 0 8px #fff) drop-shadow(0 0 15px #fff);
}

/* Tarjetas */
.card{
  position:absolute;min-width:220px;max-width:260px;padding:.9rem 1rem;border-radius:14px;
  border:1px solid rgba(0,0,0,.08);box-shadow:0 12px 36px rgba(0,0,0,.35);
  color:#101217;background:#fff;transform:translate(-50%,8px);opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;z-index:5;
}
.card.show{opacity:1;transform:translate(-50%,0)}
.card h4{margin:.1rem 0 .35rem;font-size:1.02rem}
.card p{margin:.1rem 0 .55rem;font-size:.92rem}
.card a{color:inherit;font-weight:600;border-bottom:2px solid rgba(0,0,0,.25);text-decoration:none}

/* Tip */
.tip{margin-top:.75rem;text-align:center;color:#f4f6ffcc;font-size:.9rem}

/* ===== Modal corrupción ===== */
.modal{position:fixed;inset:0;display:none;z-index:50}
.modal.open{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
.modal-box{
  position:absolute;inset:0;margin:auto;width:min(92vw,580px);height:min(74vh,520px);
  border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.2);
  box-shadow:0 20px 60px rgba(0,0,0,.5);background:#000 !important;
}
.modal-close{
  position:absolute;top:8px;right:10px;width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.4);
  color:#fff;font-size:22px;line-height:34px;text-align:center;cursor:pointer;z-index:5
}
.corrupt{position:absolute;inset:0;background:#000 !important;filter:grayscale(1) contrast(1.25) brightness(1);overflow:hidden;z-index:1}
.corrupt .noise{
  position:absolute;inset:-20%;
  background:
    radial-gradient(circle at 10% 20%,rgba(255,255,255,.12) 0 2px,transparent 3px) 0 0/6px 6px,
    radial-gradient(circle at 80% 30%,rgba(255,255,255,.08) 0 2px,transparent 3px) 0 0/7px 7px,
    radial-gradient(circle at 30% 70%,rgba(255,255,255,.06) 0 2px,transparent 3px) 0 0/5px 5px;
  opacity:.35;animation:grain 1.2s steps(2) infinite;pointer-events:none;z-index:1}
.corrupt .scanline{
  position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.06)0px,rgba(255,255,255,.06)1px,transparent 2px,transparent 4px);
  mix-blend-mode:screen;opacity:.15;animation:scan 3.2s linear infinite;pointer-events:none;z-index:1}
.type-text{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:monospace;color:#fff;text-align:center;
  font-size:clamp(28px,5.5vmin,52px);text-transform:uppercase;
  z-index:2;opacity:0;transition:opacity .25s ease;
}
.flash{
  position:absolute;inset:0;pointer-events:none;opacity:0;z-index:3;
  background:radial-gradient(ellipse at center,rgba(255,255,255,1) 0%,rgba(255,255,255,.75) 35%,rgba(255,255,255,.25) 60%,rgba(255,255,255,0) 75%);
}
.modal.open .flash{opacity:0}
.flash.show{animation:crtFlash 120ms ease}
@keyframes crtFlash{0%{opacity:0}30%{opacity:.95}100%{opacity:0}}

/* Interrogación */
.qm{
  position:absolute;inset:0;display:grid;place-items:center;
  font-weight:800;font-size:clamp(96px,20vmin,200px);color:#fff;
  text-shadow:0 0 6px rgba(255,255,255,.9),0 0 18px rgba(255,255,255,.65),0 0 36px rgba(255,255,255,.35);
  z-index:2;opacity:0;animation:none;appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:0;outline:0;cursor:pointer;
  transition:opacity .25s ease, text-shadow .25s ease, transform .1s ease;
}
.qm.show{opacity:1;animation:flicker 2.2s infinite steps(20);}
.qm:hover{ text-shadow:0 0 12px #fff,0 0 24px #fff,0 0 48px #fff;}
.qm:active{transform:scale(.98)}
@keyframes grain{0%{transform:translate(0,0)}50%{transform:translate(-1%,1%)}100%{transform:translate(0,0)}}
@keyframes scan{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
@keyframes flicker{0%,19%,21%,23%,80%,100%{opacity:1}20%,22%{opacity:.55}81%{opacity:.8}}

/* === Botón flotante (esquina superior derecha) === */
.socials{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
}
.social-btn{
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  text-decoration: none;
  color: #ffffff;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(14,15,22,.82), rgba(12,12,20,.72));
  backdrop-filter: saturate(1.15) blur(6px);
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
  transition: transform .12s ease, box-shadow .25s ease, border-color .25s ease;
}
.social-btn svg{
  display:block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
.social-btn.ig{ position: relative; }
.social-btn.ig::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius: inherit;
  background: conic-gradient(from 180deg, var(--magenta), var(--violeta), var(--cian), #7b5af5, var(--magenta));
  filter: blur(6px);
  opacity: .28;
  z-index:-1;
}
.social-btn:hover,
.social-btn:focus-visible{
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 12px 28px rgba(0,0,0,.55), 0 0 0 6px rgba(123,90,245,.18);
  transform: translateY(-1px);
  outline: none;
}
.social-btn:active{ transform: translateY(0) scale(.98); }

@media (prefers-reduced-motion: reduce){
  .social-btn{ transition: none; }
}