#tw { position: fixed; inset: 0; z-index: 900; pointer-events: none; }

.tw-sombra { position: fixed; background: rgba(11, 49, 64, .72); pointer-events: auto; }

#tw-luz {
  position: fixed; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 2px var(--ambar), 0 10px 40px rgba(0, 0, 0, .35);
  transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease;
}
#tw-luz.tw-sin-luz { display: none; }

#tw-cartel {
  position: fixed; width: min(380px, calc(100vw - 24px));
  background: #fff; color: var(--texto); border-radius: 12px;
  padding: 1.1rem 1.2rem 1rem; pointer-events: auto;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
#tw-cartel.tw-medio { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); }
#tw-cartel h3 {
  margin: 0 0 .5rem; font: 600 1.25rem 'Oswald', sans-serif;
  text-transform: uppercase; letter-spacing: .02em; color: var(--abismo);
}
#tw-cartel p { margin: 0; font: 400 .95rem/1.6 'Nunito Sans', sans-serif; color: var(--texto-suave); }
#tw-cartel b { color: var(--abismo); font-weight: 700; }

.tw-pie { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; }
.tw-cuenta { flex: 1; font: 400 .8rem 'Roboto Mono', monospace; color: var(--mar); }
.tw-boton {
  border: 0; border-radius: 7px; cursor: pointer; padding: .55rem 1.1rem;
  background: var(--ambar); color: var(--abismo);
  font: 500 .88rem 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .05em;
}
.tw-boton:hover { background: var(--ambar-fuerte); color: #fff; }
.tw-suave { background: transparent; color: var(--texto-suave); }
.tw-suave:hover { background: var(--duna); color: var(--abismo); }

@media (max-width: 700px) {
  #tw-cartel, #tw-cartel.tw-medio {
    top: auto !important; bottom: 12px; left: 12px !important; right: 12px;
    width: auto; transform: none;
  }
}