@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:wght@500;600&family=IBM+Plex+Mono:wght@400;500&family=Playfair+Display:wght@600&display=swap");

:root {
  --amber: #c4a46a;
  --ink: #0c1222;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  background: #070b14;
  color: #e8eef8;
}
button, input { font-family: inherit; }
.view { display: none; min-height: 100vh; }
.view.on { display: block; }

.out {
  position: fixed; left: 16px; top: 14px; z-index: 40;
  background: rgba(8,10,16,.72); color: #d7c39a; border: 1px solid #3d3424;
  padding: 7px 11px; cursor: pointer; font-size: 12px; letter-spacing: .04em;
  backdrop-filter: blur(8px);
}
.lock {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  width: 52px; height: 52px; border: 0; border-radius: 50%;
  background: #1a140c; color: #e8d5a3; box-shadow: 0 8px 30px #0008, inset 0 0 0 1px #6b542c;
  cursor: pointer; font-size: 20px;
}
.modal { position: fixed; inset: 0; background: rgba(6,8,14,.72); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 50; }
.modal.open { display: flex; }
.sheet { width: min(480px,100%); background: #121826; border: 1px solid #2a3348; border-radius: 14px; padding: 22px 22px 18px; }
.sheet h2 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.sheet p { color: #9aa6bd; font-size: 14px; line-height: 1.5; margin-bottom: 14px; }
.keys { display: flex; flex-wrap: wrap; gap: 8px; }
.keys button {
  background: #1b2334; color: #e8d5a3; border: 1px solid #3a445c;
  border-radius: 8px; padding: 8px 11px; cursor: pointer; font-family: "IBM Plex Mono", monospace; font-size: 13px;
}
.keys button:hover { border-color: var(--amber); }

/* LOGIN */
#v-login {
  display: none; place-items: center; padding: 28px 16px;
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(90,70,30,.18), transparent 50%),
    linear-gradient(180deg, #0a0e18 0%, #0c1220 100%);
}
#v-login.on { display: grid; }
.login-shell { width: min(1080px, 100%); display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
@media (max-width: 860px) { .login-shell { grid-template-columns: 1fr; gap: 28px; } }
.brand-side .mark {
  font-family: "Playfair Display", serif; font-size: 34px; letter-spacing: .02em;
}
.brand-side .mark em { font-style: normal; color: var(--amber); }
.brand-side p { color: #9aa6bd; margin-top: 12px; max-width: 420px; line-height: 1.55; font-size: 15px; }
.meta-row { display: flex; gap: 18px; margin-top: 28px; color: #7d8799; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.card {
  background: #101826; border: 1px solid #2a3348; border-radius: 16px; padding: 28px 26px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.kicker { color: var(--amber); font-size: 11px; letter-spacing: .18em; font-weight: 600; text-transform: uppercase; }
.card h1 { font-size: 22px; font-weight: 600; margin: 8px 0 6px; }
.sub { color: #9aa6bd; font-size: 14px; margin-bottom: 20px; line-height: 1.45; }
label { display: block; font-size: 12px; color: #b7c0d0; margin: 12px 0 6px; font-weight: 500; }
input[type=text], input[type=password], .txt {
  width: 100%; background: #0b1220; color: #fff; border: 1px solid #2f3b54;
  border-radius: 8px; padding: 12px 12px; font-size: 15px;
}
input:focus { outline: none; border-color: var(--amber); }
.submit {
  width: 100%; margin-top: 18px; background: #c4a46a; color: #1a140c;
  border: 0; border-radius: 8px; padding: 12px; font-weight: 700; cursor: pointer; letter-spacing: .04em;
}
.submit:hover { filter: brightness(1.06); }
.err { min-height: 20px; margin-top: 10px; color: #e3a0a0; font-size: 13px; }
.secure { margin-top: 16px; color: #6d778c; font-size: 11px; text-align: center; letter-spacing: .06em; }

/* BANK */
#v-banco { background: #f4f1ea; color: #1c2430; }
#v-banco header {
  background: #142033; color: #f4f1ea; padding: 56px 28px 20px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
}
.bank-brand { font-family: "Playfair Display", serif; font-size: 22px; }
.bank-brand small { display: block; font-family: "IBM Plex Sans", sans-serif; font-size: 11px; letter-spacing: .16em; color: #c4a46a; margin-bottom: 4px; }
.bank-meta { font-size: 12px; color: #b7c0d0; text-align: right; }
.bwrap { width: min(1080px, calc(100% - 32px)); margin: 24px auto 48px; }
.kpis { display: grid; grid-template-columns: 1.4fr .8fr .8fr; gap: 14px; margin-bottom: 18px; }
@media (max-width: 800px) { .kpis { grid-template-columns: 1fr; } }
.kpi { background: #fff; border: 1px solid #e4ddd0; padding: 18px 18px 16px; }
.kpi span { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #7a7368; }
.cifra { font-family: "IBM Plex Serif", serif; font-size: 36px; margin-top: 6px; color: #142033; }
.cifra.rojo { color: #9b2c2c; }
.acts { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 8px 0 22px; }
@media (max-width: 800px) { .acts { grid-template-columns: 1fr; } }
#v-banco .acts button {
  background: #fff; border: 1px solid #d9d1c4; color: #142033; text-align: left;
  padding: 14px; cursor: pointer; font-size: 14px; line-height: 1.35;
}
#v-banco .acts button b { display: block; font-size: 12px; color: #7a7368; font-weight: 500; margin-bottom: 4px; }
#v-banco .acts button:hover { border-color: #142033; }
#v-banco table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e4ddd0; }
#v-banco th { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #7a7368; padding: 12px; border-bottom: 1px solid #e4ddd0; }
#v-banco td { padding: 12px; border-bottom: 1px solid #efeae2; font-size: 14px; }
.neg { color: #9b2c2c; }
#alerta { background: #f8e6e6; color: #7a1f1f; padding: 12px 14px; margin: 12px 0; display: none; border-left: 3px solid #9b2c2c; font-size: 14px; }

/* NUCLEAR */
#v-nuclear { background: #0b1014; color: #d5ddd6; font-family: "IBM Plex Mono", monospace; }
#v-nuclear header {
  background: #101820; border-bottom: 1px solid #2a3a32; padding: 52px 20px 14px;
  display: flex; justify-content: space-between; align-items: center;
}
.siren { color: #e8b4b4; font-size: 12px; letter-spacing: .14em; }
.siren i { display: inline-block; width: 8px; height: 8px; background: #e24a4a; border-radius: 50%; margin-right: 8px; animation: blink .8s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.n-grid { width: min(1080px, calc(100% - 28px)); margin: 20px auto; display: grid; grid-template-columns: 280px 1fr 300px; gap: 16px; }
@media (max-width: 900px) { .n-grid { grid-template-columns: 1fr; } }
.n-panel { background: #121a20; border: 1px solid #2a3a32; padding: 14px; }
.n-panel h3 { font-size: 11px; letter-spacing: .14em; color: #8fa396; margin-bottom: 10px; font-weight: 500; }
.redbtn {
  width: 140px; height: 140px; border-radius: 50%; margin: 12px auto; display: grid; place-items: center;
  border: 10px solid #2a1212; background: radial-gradient(circle at 35% 30%, #ff8a8a, #b42323 48%, #5c1010);
  color: #fff; font-weight: 700; cursor: pointer; letter-spacing: .08em;
  box-shadow: 0 0 0 1px #3a1a1a, 0 16px 40px #0008;
}
.board { display: grid; grid-template-columns: repeat(3,70px); gap: 6px; justify-content: center; margin: 12px 0; }
.cell { width: 70px; height: 70px; background: #0e1612; border: 1px solid #355246; color: #d5e7d4; font-size: 28px; cursor: pointer; }
#radar { display: none; width: 100%; background: #070c0a; border: 1px solid #2a3a32; }

/* MATRIX */
#v-matrix { background: #000; color: #86efac; font-family: "IBM Plex Mono", monospace; position: relative; overflow: hidden; }
#rain { position: absolute; inset: 0; width: 100%; height: 100%; }
.mui { position: relative; z-index: 2; padding: 64px 20px 24px; min-height: 100vh; display: flex; flex-direction: column; }
.chat {
  background: rgba(0,16,0,.72); border: 1px solid #14532d; padding: 16px; max-width: 560px;
  backdrop-filter: blur(6px);
}
#mlog { white-space: pre-wrap; min-height: 96px; margin-bottom: 10px; line-height: 1.45; }
.mui button, .mui input { background: #04160b; color: #bbf7d0; border: 1px solid #167a3c; padding: 8px 10px; margin: 4px 4px 0 0; }
.frase { margin-top: auto; font-size: clamp(16px, 2.6vw, 26px); letter-spacing: .1em; padding: 20px 0 8px; color: #4ade80; }

/* WHATSAPP */
#v-vecinos { background: #0b141a; }
.phone {
  width: min(420px, 100%); margin: 0 auto; min-height: 100vh; background: #0b141a;
  display: flex; flex-direction: column;
}
.wa-top { background: #1f2c34; padding: 52px 12px 10px; display: flex; align-items: center; gap: 10px; }
.ava { width: 36px; height: 36px; border-radius: 50%; background: #2a3942; display: grid; place-items: center; font-size: 13px; color: #e9edef; }
.wa-top strong { display: block; font-size: 15px; }
.wa-top span { font-size: 12px; color: #8696a0; }
.wa-row { display:flex; gap:10px; width:100%; text-align:left; background:#111b21; color:#e9edef; border:0; border-bottom:1px solid #222; padding:12px; cursor:pointer; align-items:center; }
.wa-row small { display:block; color:#8696a0; font-size:12px; }
.ava-img { width:42px; height:42px; border-radius:50%; object-fit:cover; background:#333; }
#waBack { background:none; border:0; color:#fff; font-size:22px; cursor:pointer; }
.predict { display:flex; gap:6px; flex-wrap:wrap; padding:6px 8px; background:#1f2c34; }
.predict button { background:#005c4b; color:#fff; border:0; border-radius:16px; padding:6px 10px; font-size:12px; cursor:pointer; }
.wa-photo { max-width:180px; border-radius:8px; display:block; }
.wa-deleted { color:#8696a0; font-style:italic; font-size:13px; }
.chatbox {
  flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; overflow: auto; min-height: 62vh;
  background: #0b141a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 60L60 0H30L0 30zm30 0L60 30V0L0 60z' fill='%23111b21' fill-opacity='.5'/%3E%3C/svg%3E");
}
.b { max-width: 82%; padding: 6px 8px 5px; border-radius: 8px; font-size: 14.2px; line-height: 1.35; color: #e9edef; }
.ellos { background: #1f2c34; align-self: flex-start; border-top-left-radius: 0; }
.yo { background: #005c4b; align-self: flex-end; border-top-right-radius: 0; }
.quien { font-size: 12px; color: #53bdeb; font-weight: 600; margin-bottom: 2px; }
.hora { display: block; text-align: right; font-size: 11px; color: #8696a0; margin-top: 3px; }
.wf { display: flex; gap: 8px; padding: 8px 10px 14px; background: #1f2c34; }
.wt { flex: 1; border: 0; border-radius: 21px; padding: 10px 14px; background: #2a3942; color: #e9edef; }
.wf button { background: #00a884; color: #fff; border: 0; border-radius: 50%; width: 42px; height: 42px; cursor: pointer; }

/* SCADA */
#v-cafe { background: #0e1116; color: #d5dbe6; }
#v-cafe header {
  background: #161b22; border-bottom: 1px solid #2b3340; padding: 52px 20px 14px;
  font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .08em; color: #9aa6bd;
}
.cwrap { width: min(1000px, calc(100% - 28px)); margin: 20px auto 40px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; }
@media (max-width: 800px) { .cwrap { grid-template-columns: 1fr; } }
.panel { background: #161b22; border: 1px solid #2b3340; padding: 16px; }
.panel h3 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #8b95a7; margin-bottom: 12px; }
#v-cafe label { color: #9aa6bd; margin-top: 8px; }
input[type=range] { width: 100%; accent-color: #3b82f6; }
#v-cafe button { background: #1d4ed8; color: #fff; border: 0; padding: 10px 12px; margin: 10px 8px 0 0; cursor: pointer; font-size: 12px; letter-spacing: .06em; }
#v-cafe button.hot { background: #991b1b; }
#clog { color: #7dd3fc; white-space: pre-wrap; font-size: 12px; font-family: "IBM Plex Mono", monospace; line-height: 1.45; }

/* IBERO — sin rediseñar a fondo */
#v-ibero { background: #140606; color: #f6e7c8; font-family: Georgia, serif; }
#v-ibero header { background: linear-gradient(#4a1014,#22080a); border-bottom: 4px solid #e0b44b; padding: 48px 16px 12px; }
.logo { font-family: Impact, sans-serif; font-size: 36px; color: #e0b44b; line-height: .9; }
.logo span { display: block; font-size: 12px; letter-spacing: .28em; color: #ff4d8d; }
.canal-banner { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; border: 2px solid #e10600; background: #000; padding: 10px 12px; margin: 16px auto; width: min(1100px, calc(100% - 24px)); }
.plus { font-family: Arial, sans-serif; font-weight: 800; font-size: 20px; }
.plus i { font-style: normal; color: #e10600; }
.go { background: #e10600; color: #fff; border: 0; padding: 10px 14px; cursor: pointer; font-family: Impact, sans-serif; }
.igrid { width: min(1100px, calc(100% - 24px)); margin: 0 auto 40px; display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
@media (max-width:900px){ .igrid { grid-template-columns: repeat(2,1fr); } }
.tape { background: #100606; border: 2px solid #5a2222; cursor: pointer; }
.tape:hover { border-color: #e0b44b; }
.tape img { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; }
.meta { padding: 8px; font-family: Impact, sans-serif; font-size: 14px; color: #f3d48a; }
#crt { display: none; background: #000; border: 10px solid #111; margin: 0 auto 16px; width: min(1100px, calc(100% - 24px)); position: relative; }
#crt.on { display: block; }
#crt img { width: 100%; aspect-ratio: 4/3; object-fit: cover; filter: grayscale(.7) contrast(1.3); }
#player { position: fixed; inset: 0; background: #000c; display: none; align-items: center; justify-content: center; padding: 16px; z-index: 20; }
#player.open { display: flex; }
.deck { width: min(820px,100%); background: #1a0a0a; border: 3px solid #e0b44b; }
.tv { position: relative; background: #000; aspect-ratio: 4/3; overflow: hidden; }
.tv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv.rew img { animation: rew .12s steps(2) infinite; filter: grayscale(.4) contrast(1.6); }
.tv.ff img { animation: ff .1s steps(2) infinite; }
@keyframes rew { 0% { object-position: 50% 40%; transform: scaleX(-1); } 100% { object-position: 50% 60%; transform: scaleX(-1); } }
@keyframes ff { 0% { object-position: 40% 50%; } 100% { object-position: 60% 50%; } }
.scan { pointer-events: none; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, #0000 0 2px, #0004 3px); }
.tv.rew .scan { background: repeating-linear-gradient(0deg, #fff2 0 1px, #0006 2px 6px); animation: track .08s linear infinite; }
@keyframes track { to { transform: translateY(6px); } }
.clock { position: absolute; right: 10px; top: 10px; color: #4ade80; font-family: monospace; }
.subs { position: absolute; left: 8%; right: 8%; bottom: 14px; text-align: center; color: #fff; text-shadow: 0 0 4px #000; background: #0006; padding: 6px; }
.deckbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; background: #0d0606; }
.deckbar button { background: #3a1515; color: #f6e7c8; padding: 8px 10px; border: 1px solid #6a2a2a; cursor: pointer; font-family: Impact, sans-serif; }
.deckbar button.on { background: #b10b1f; color: #fff; }
.status { padding: 8px 10px 12px; font-family: Verdana, sans-serif; font-size: 13px; color: #f3d48a; }

/* CCTV / VIDEO VILLAGE */
.cctv-head { background:#0d1117; border-bottom:1px solid #2b3340; padding:52px 20px 14px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:flex-end; }
.cctv-kicker { font-size:11px; letter-spacing:.16em; color:#f59e0b; margin-bottom:4px; }
.cctv-badges { font-size:12px; color:#9aa6bd; max-width:360px; text-align:right; }
.cctv-wrap { width:min(1100px, calc(100% - 28px)); margin:18px auto 40px; }
.cctv-legal { color:#9aa6bd; font-size:13px; line-height:1.5; margin-bottom:14px; }
.cctv-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media (max-width:800px){ .cctv-grid { grid-template-columns:1fr 1fr; } }
.cam { background:#161b22; border:1px solid #2b3340; cursor:pointer; position:relative; }
.cam img { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; filter:saturate(.85) contrast(1.05); }
.cam b { display:block; padding:7px 8px; font-size:11px; letter-spacing:.08em; color:#c9d3e0; font-weight:500; }
.cam:hover { border-color:#f59e0b; }
.cam .live { position:absolute; top:8px; left:8px; background:#991b1b; color:#fff; font-size:10px; padding:2px 6px; letter-spacing:.08em; }
#btnIntimas { margin:16px 0 12px; background:#1f2937; color:#f3e8c8; border:1px solid #6b542c; padding:10px 14px; cursor:pointer; font-size:13px; }
#btnIntimas:hover { border-color:#f59e0b; }
.hidden-cams { display:none; }
.hidden-cams.on { display:grid; }
.cctv-note { min-height:18px; color:#c4a46a; font-size:13px; margin-top:10px; }
.cctv-big { display:none; position:fixed; inset:0; background:#000c; z-index:45; align-items:center; justify-content:center; padding:20px; }
.cctv-big.on { display:flex; }
.cctv-big figure { width:min(960px,100%); }
.cctv-big img { width:100%; display:block; border:1px solid #2b3340; }
.cctv-big figcaption { background:#0d1117; color:#c9d3e0; padding:10px 12px; font-size:13px; }

.keylab { margin-top: 14px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #9aa6bd; }
.keys.oncard { margin: 8px 0 4px; }
.keys.oncard button.active { border-color: #c4a46a; background: #2a2418; color: #fff; }

/* Swiss Vault — adjunto 1 */
#v-banco { background: #06261d; color: #d7ffe9; font-family: "IBM Plex Sans", system-ui, sans-serif; }
.sv-bar { display:flex; justify-content:space-between; align-items:center; padding:16px 22px; background:#08352a; border-bottom:1px solid #0f5c49; }
.sv-logo { color:#3dffb0; font-weight:700; letter-spacing:.08em; font-size:14px; }
.sv-back { background:#0f5c49; color:#d7ffe9; border:0; border-radius:20px; padding:8px 14px; cursor:pointer; }
.sv-body { width:min(860px, calc(100% - 28px)); margin:36px auto 48px; }
.sv-hero, .sv-mov { background:#0b3a2e; border-radius:18px; padding:28px 26px; box-shadow: inset 0 0 0 1px #125744; }
.sv-pill { display:inline-block; background:#08352a; color:#9affe0; border-radius:999px; padding:6px 14px; font-size:12px; letter-spacing:.08em; }
.sv-label { margin-top:16px; letter-spacing:.16em; font-size:12px; color:#8fe8c8; }
#v-banco .cifra { font-family:"IBM Plex Sans",sans-serif; font-weight:700; font-size:56px; color:#5dffc0; text-shadow:0 0 24px #1aff9a55; margin:8px 0; }
.sv-hint { color:#9affe0; opacity:.85; font-size:14px; }
.sv-acts { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:22px; }
.sv-acts button { background:#0f5c49; color:#fff; border:0; border-radius:22px; padding:12px 16px; cursor:pointer; font-size:14px; }
.sv-acts button:hover { background:#157a61; }
.sv-mov { margin-top:18px; }
.sv-mov-h { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:8px; color:#8fe8c8; }
.sv-row { display:flex; justify-content:space-between; gap:12px; padding:14px 0; border-top:1px solid #125744; }
.sv-row small { display:block; color:#7ecfb0; font-size:12px; margin-top:3px; }
#v-banco #alerta { background:#14332c; color:#ffb4b4; border-left:3px solid #f87171; border-radius:8px; margin:14px 0 0; }

/* DEFCON — adjunto 2 */
#v-nuclear { background:#3a0505; color:#ffb4b4; }
.def-frame { min-height:100vh; display:grid; place-items:center; padding:28px 12px; background:radial-gradient(circle at 50% 40%, #5a0b0b, #2a0303 70%); }
.def-card { width:min(560px,100%); background:#4a0808; border:2px solid #ff4d4d; border-radius:16px; padding:28px 24px 20px; text-align:center; box-shadow:0 0 40px #ff2a2a66, inset 0 0 30px #0004; }
.def-siren { font-size:42px; filter: drop-shadow(0 0 12px #ff4d4d); }
.def-card h1 { color:#ff5a5a; letter-spacing:.06em; font-size:22px; margin:8px 0; }
.def-sub { font-size:12px; letter-spacing:.08em; color:#ffd0d0; margin-bottom:14px; }
.def-term { text-align:left; background:#140404; color:#ff8a8a; border:1px solid #7a1a1a; border-radius:8px; padding:14px; font-size:12px; line-height:1.55; white-space:pre-wrap; }
.def-btn { width:100%; margin-top:16px; background:#e11d2e; color:#fff; border:0; border-radius:10px; padding:14px 12px; font-weight:700; letter-spacing:.06em; cursor:pointer; box-shadow:0 0 20px #ff2a2a88; }
.def-btn:hover { filter:brightness(1.08); }
.def-link { background:none; border:0; color:#ffb4b4; text-decoration:underline; cursor:pointer; margin-top:12px; font-size:13px; }
.def-msg { margin-top:10px; min-height:18px; }
#v-nuclear #radar { display:none; margin:12px auto 0; width:100%; background:#140404; border:1px solid #7a1a1a; }
#v-nuclear .board { margin-top:12px; }

/* Matrix chat centered */
.mui { align-items:center; }
.mui .chat { width:min(560px,100%); }
.mbtns { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.mbtns button { cursor:pointer; }
.mrow { display:flex; gap:6px; margin-top:8px; }
.mrow .txt { flex:1; }
.frase { text-align:center; font-family:"IBM Plex Mono",monospace; letter-spacing:.14em; }
.frase .slot { display:inline-block; min-width:.7em; height:1.2em; }
.frase .falling { opacity:.35; }

/* Ibero video element */
#tapeVid { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; background:#000; }
#tapeVid.on { display:block; }
#frame.onvid { display:none; }
.cctv-big video { width:100%; display:block; background:#000; max-height:70vh; }

/* Login estilo adjunto 2 */
#v-login {
  background: radial-gradient(1200px 600px at 20% 0%, #1a2a4a 0%, #0b1220 45%, #070b14 100%);
  display: none;
  place-items: center;
}
#v-login.on { display: grid; }
.win-wrap { width: min(1120px, 100%); padding: 24px; display: grid; place-items: center; min-height: 100vh; }
.win-card {
  width: min(420px, 100%);
  background: #1b2436;
  border: 1px solid #2c3a55;
  border-radius: 22px;
  padding: 36px 32px 28px;
  text-align: center;
  box-shadow: 0 30px 80px #0008;
}
.win-card h1 { font-size: 26px; font-weight: 700; margin: 8px 0 6px; color: #f4f7ff; }
.win-card .sub { color: #9aa8c2; margin-bottom: 22px; }
.shield { display: grid; place-items: center; margin-bottom: 6px; }
.pass-row { display: flex; align-items: center; gap: 8px; }
.pass-row #pass {
  flex: 1;
  background: #121a2b;
  border: 1px solid #3b82f6;
  box-shadow: 0 0 0 3px #2563eb33;
  border-radius: 12px;
  padding: 14px 14px;
  color: #e8eefc;
  text-align: center;
}
.mini-lock {
  position: relative;
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 12px; border: 1px solid #2c3a55;
  background: #121a2b; color: #fbbf24; cursor: pointer; font-size: 18px;
}
.mini-lock .tip {
  display: none; position: absolute; right: 0; bottom: calc(100% + 8px);
  background: #0b1220; color: #e8eefc; border: 1px solid #2c3a55;
  white-space: nowrap; font-size: 12px; padding: 6px 8px; border-radius: 8px;
}
.mini-lock:hover .tip { display: block; }
.win-keys { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0 4px; }
.win-keys[hidden] { display: none; }
.win-keys button {
  background: #121a2b; color: #dbe7ff; border: 1px solid #3a4a66;
  border-radius: 10px; padding: 8px 10px; cursor: pointer;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px;
}
.win-keys button.active { border-color: #60a5fa; color: #fff; }
.win-go {
  margin-top: 16px;
  background: linear-gradient(#3b82f6, #2563eb);
  color: #fff; border: 0; border-radius: 12px; padding: 12px;
  font-weight: 700; letter-spacing: .04em; width: 100%;
  box-shadow: 0 8px 24px #2563eb55;
}
.win-go[hidden] { display: none; }
.lock {
  background: #f59e0b; color: #1a1304;
  box-shadow: 0 8px 24px #f59e0b66;
}

  .view{display:none!important}
  .view.on{display:block!important}
  #v-login.on{display:grid!important;place-items:center}
  #crt{position:relative}
  .mini-lock .tip{display:none}
  .mini-lock:hover .tip{display:block}
  
#crt video, #crtVid { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; filter:grayscale(.25) contrast(1.15); background:#000; }



.hack-seq { position:fixed; inset:0; z-index:80; background:#000; }
.hack-slide { display:none; position:absolute; inset:0; }
.hack-slide.on { display:flex; }
.hack-slide[data-s="black"] { background:#000; }
.hack-slide[data-s="bsod"] { background:#0078d7; color:#fff; align-items:center; justify-content:center; font-family:"Segoe UI", Arial, sans-serif; }
.bsod { width:min(720px,90%); }
.bsod-qr { font-size:92px; line-height:1; margin-bottom:12px; }
.bsod-h { font-size:28px; margin-bottom:16px; }
.hack-slide[data-s="console"],
.hack-slide[data-s="echo"] { background:#000; color:#33ff33; font-family:"IBM Plex Mono", Consolas, monospace; padding:28px; align-items:flex-start; }
.hack-slide[data-s="face"] { background:#000; color:#33ff33; align-items:center; justify-content:center; }
#hackFace { font-size:clamp(8px,1.4vw,14px); line-height:1.05; white-space:pre; text-align:center; }
.hack-alert .mono { font-family: Consolas, monospace; color:#9aa6bd; font-size:13px; }



#v-banco #alerta { display:none; margin-top:18px; padding:22px 18px; background:#140808; border:3px solid #ff3b3b; text-align:center; box-shadow:0 0 40px #ff1a1a66; }
.lost-sign { font-size:clamp(28px,5vw,48px); font-weight:800; color:#ff4d4d; letter-spacing:.04em; text-shadow:0 0 18px #ff2a2a; }
.lost-sub { margin-top:8px; color:#ffd0d0; font-size:16px; }
.hack-next { position:fixed; right:24px; bottom:24px; z-index:90; background:#e11d2e; color:#fff; border:0; padding:12px 18px; font-weight:700; letter-spacing:.08em; cursor:pointer; display:none; }
.hack-seq:not([hidden]) .hack-next { display:block; }
.hack-whisper { color:#4ade80; font-family:Consolas,monospace; margin:auto; letter-spacing:.2em; }
.hack-laugh { position:absolute; bottom:18%; left:0; right:0; text-align:center; color:#4ade80; font-family:Consolas,monospace; font-size:22px; letter-spacing:.3em; animation:laughblink .25s steps(2) infinite; }
@keyframes laughblink { 50% { opacity:.2; transform:scale(1.05); } }
#hackFace { transition: none; }



.nuke-btn {
  width: 168px; height: 168px; margin: 18px auto 8px; display:grid; place-items:center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 35% 28%, #ff6b6b, #e10600 42%, #8a0000 78%);
  box-shadow: 0 10px 0 #5a0000, 0 16px 28px #0008, inset 0 8px 16px #fff4;
  color: #fff; font-weight: 800; letter-spacing: .08em; font-size: 18px;
}
.nuke-btn:active { transform: translateY(6px); box-shadow: 0 4px 0 #5a0000, 0 8px 16px #0008; }
.nuke-btn span { text-shadow: 0 2px 0 #7a0000; }
#warSeq { position:fixed; inset:0; z-index:85; background:#070404; color:#ffb4b4; display:flex; flex-direction:column; }
#warSeq[hidden] { display:none !important; }
#warCmd { padding:28px 22px; width:min(720px,92%); margin:auto; }
.war-title { letter-spacing:.14em; color:#ff5a5a; margin-bottom:10px; }
#warLog { background:#100404; border:1px solid #7a1a1a; padding:12px; min-height:120px; white-space:pre-wrap; font-family:Consolas,monospace; font-size:13px; }
.gauges { margin-top:16px; display:grid; gap:10px; }
.gauges label { font-size:13px; letter-spacing:.06em; }
.gauges progress { width:100%; height:12px; accent-color:#ff3b3b; }
#warMap, #warFin { position:absolute; inset:0; }
#worldCv { width:100%; height:100%; display:block; background:#000; }
#warVid { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000; }
#warFin { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:#000; }
#warFin h2 { font-size:clamp(28px,6vw,64px); color:#fff; letter-spacing:.08em; }
#warFin p { color:#bbb; margin:12px 0; }
#warFin small { color:#666; font-size:12px; margin-bottom:20px; }
.nuked { min-height:100vh; position:relative; background:#000; }
.nuked img { width:100%; height:100vh; object-fit:cover; display:block; filter:contrast(1.1) saturate(.85); }
.nuked-msg { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:8vh 20px 12vh; text-align:center; background:linear-gradient(transparent, #000d 55%); color:#fff; }
.nuked-msg h2 { font-size:clamp(22px,4vw,40px); margin-bottom:10px; }
.nuked-msg p { color:#ccc; margin-bottom:8px; }
.nuked-msg small { color:#777; margin-bottom:16px; }

.board { display:grid; grid-template-columns:repeat(3,64px); gap:6px; justify-content:center; }
.cell { width:64px; height:64px; background:#140404; color:#fff; border:1px solid #ff4d4d; font-size:28px; cursor:pointer; }



.wa-thread { display:flex; flex-direction:column; height:100vh; min-height:100vh; }
.wa-thread[hidden] { display:none !important; }
.waDock { flex:0 0 auto; background:#1f2c34; border-top:1px solid #2a3942; }
#waThread[hidden] { display:none !important; }
#waList { flex:1; overflow:auto; }
.phone { height:100vh; min-height:100vh; overflow:hidden; }
.chatbox {
  flex:1 1 auto; min-height:0; height:auto;
  overflow-y:scroll; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
#waDock { flex:0 0 auto; background:#1f2c34; border-top:1px solid #2a3942; }
.pred-lab { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#8696a0; padding:6px 10px 0; }



.wa-photo { max-width:148px; max-height:148px; width:auto; height:auto; object-fit:cover; border-radius:8px; display:block; cursor:zoom-in; }
#waZoom { position:fixed; inset:0; z-index:95; background:#000d; display:flex; align-items:center; justify-content:center; }
#waZoom[hidden] { display:none !important; }
#waZoom img { max-width:92vw; max-height:88vh; object-fit:contain; border-radius:6px; }
#waZoomX { position:absolute; top:14px; right:16px; background:#0000; color:#fff; border:0; font-size:28px; cursor:pointer; }