@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fuentes/ibm-plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fuentes/ibm-plex-mono-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fuentes/ibm-plex-mono-600.woff2') format('woff2')}

*,*::before,*::after{box-sizing:border-box}
:root{
  --void:#0B0C0E; --panel:#131519; --line:#23262B;
  --amber:#E8A33D; --bone:#D6D2C6; --dim:#61656C;
  --signal:#55A08E; --alert:#B5483C;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
}
html{-webkit-text-size-adjust:100%; color-scheme:dark}
body{
  margin:0; background:var(--void); color:var(--bone);
  font:400 15px/1.65 var(--mono); letter-spacing:.01em;
  padding:0 20px 64px; overflow-x:hidden;
}
a{color:var(--amber)}
a:focus-visible,button:focus-visible{outline:2px solid var(--amber); outline-offset:2px}
.sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}
.scan{position:fixed; inset:0; pointer-events:none; z-index:9;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay}
.wrap{max-width:760px; margin:0 auto; position:relative; z-index:1}

/* ---- cabecera ---- */
.top{display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  flex-wrap:wrap; padding:22px 0 18px; border-bottom:1px solid var(--line);
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim)}
.top b{color:var(--amber); font-weight:600}
.top .marca{color:var(--dim); text-decoration:none; letter-spacing:inherit}
.top .marca:hover b{color:#F2B457}
.top .salir{color:#4E525A; text-decoration:none; letter-spacing:inherit}
.top .salir:hover{color:var(--amber)}

/* ---- numero fantasma (elemento firma) ---- */
.glyph{position:absolute; top:56px; right:-14px; z-index:-1;
  font-size:190px; font-weight:600; line-height:.8; color:#fff;
  opacity:.035; letter-spacing:-.05em; user-select:none}

/* ---- cabecera de correo archivado ---- */
.hdr{margin:44px 0 0; padding:0 0 18px; border-bottom:1px dashed var(--line)}
.hdr div{display:flex; gap:12px; font-size:12.5px; line-height:2}
.hdr dt{flex:0 0 92px; color:var(--dim); text-transform:uppercase;
  letter-spacing:.11em; font-size:10.5px; margin:0; padding-top:2px}
.hdr dd{margin:0; color:#9BA0A8; word-break:break-all}
.hdr dd.s{color:var(--amber)}

/* ---- cuerpo ---- */
.lore{margin:30px 0 34px; white-space:pre-line; color:#C3C0B6}
.lore .q{color:var(--dim)}
h1{font-size:20px; font-weight:600; letter-spacing:.02em; margin:26px 0 0; color:var(--bone)}
.eyebrow{font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--amber); margin:0}

/* ---- material ---- */
.mat{background:var(--panel); border:1px solid var(--line); border-left:2px solid var(--amber);
  padding:24px 22px; margin:0 0 34px; overflow-x:auto}
.mat .tag,.tag{display:block; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); margin:0 0 14px}
.payload{font-size:19px; letter-spacing:.14em; color:var(--amber); word-break:break-all;
  font-weight:500; margin:0}
.mat pre{margin:0; font:inherit; font-size:13px; color:#B9B6AC; white-space:pre-wrap;
  word-break:break-word}
.mat p{margin:0 0 10px} .mat p:last-child{margin-bottom:0}
.mat a{color:var(--amber)}
.grid5{display:grid; grid-template-columns:repeat(5,1fr); gap:2px; max-width:250px;
  font-size:17px; text-align:center}
.grid5 span{background:#1B1E23; padding:11px 0; color:var(--bone)}
.dl{display:inline-block; margin-top:6px; color:var(--amber); text-decoration:none;
  border-bottom:1px solid rgba(232,163,61,.4); padding-bottom:2px}
.dl:hover{border-bottom-color:var(--amber)}
img.art{max-width:100%; height:auto; display:block; border:1px solid var(--line)}
audio{width:100%; margin-top:12px; filter:invert(.88) hue-rotate(180deg)}
.fich{margin:-18px 0 34px}

/* ---- entrada ---- */
.key{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 10px}
.key input{flex:1 1 240px; min-width:0; background:#0E1013; color:var(--amber);
  border:1px solid var(--line); border-radius:0; padding:15px 16px;
  font:500 16px/1 var(--mono); letter-spacing:.16em; text-transform:lowercase}
.key input:focus{outline:2px solid var(--amber); outline-offset:-2px; border-color:transparent}
.key input::placeholder{color:#3C4046; letter-spacing:.1em}
.key button{background:var(--amber); color:#0B0C0E; border:0; border-radius:0;
  padding:15px 26px; font:600 12px/1 var(--mono); letter-spacing:.2em;
  text-transform:uppercase; cursor:pointer}
.key button:hover{background:#F2B457}
.key button:disabled{background:#6b5127; cursor:wait}
.key button:focus-visible{outline:2px solid var(--bone); outline-offset:2px}
.state{min-height:22px; font-size:12.5px; letter-spacing:.06em; color:var(--dim)}
.state.no{color:var(--alert)} .state.si{color:var(--signal)}
.hdr+.state{margin-top:26px}

/* ---- bloqueado ---- */
.locked{border:1px solid var(--line); border-left:2px solid var(--alert);
  background:var(--panel); padding:32px 24px; margin:44px 0 0}
.locked .big{font-size:30px; color:var(--amber); letter-spacing:.1em; margin:14px 0 0;
  font-weight:500}

/* ---- recompensa ---- */
.premio{margin:44px 0 0}
.premio .de{font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--dim); margin:26px 0 0}
.word{font-size:46px; font-weight:600; letter-spacing:.14em; color:var(--amber);
  margin:6px 0 2px; word-break:break-all}
.meta{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); margin:0}
.texto{color:#B0ADA4; margin:26px 0 0; max-width:62ch; white-space:pre-line}
.next{display:inline-block; margin-top:34px; color:var(--amber); text-decoration:none;
  border-bottom:1px solid rgba(232,163,61,.4); padding-bottom:2px}
.next:hover,.next:focus-visible{border-bottom-color:var(--amber)}
.cierre{margin:34px 0 0; color:#C3C0B6; white-space:pre-line}

/* ---- paginas sueltas ---- */
.suelta{margin:44px 0 0}
.suelta .eyebrow{margin-bottom:22px}
.sin-margen{margin:0}

/* ---- tablero (portada) ---- */
.tablero-pagina{margin:44px 0 0}
#portico{margin:0 0 30px}
#portico .next{margin-top:16px}
.cuenta-tablero{font-size:22px; color:var(--amber); letter-spacing:.14em;
  font-weight:600; margin:0 0 18px}
.tablero{display:grid; grid-template-columns:repeat(6,1fr); gap:8px}
.celda{border:1px solid var(--line); background:var(--panel); aspect-ratio:1/1;
  padding:9px 10px; display:flex; flex-direction:column; justify-content:space-between;
  color:#4E525A; text-decoration:none; overflow:hidden}
.celda .num{font-size:10px; letter-spacing:.16em}
.celda .dato{font-size:11.5px; letter-spacing:.05em; word-break:break-all; line-height:1.3}
.celda.abierta{border-color:var(--amber); color:var(--amber)}
a.celda.abierta:hover,a.celda.abierta:focus-visible{background:#1B1E23}
.celda.resuelta{border-color:var(--signal); color:var(--signal)}
.celda.resuelta:hover,a.celda.resuelta:focus-visible{background:#161D1B}
.celda.resuelta .dato{font-weight:600; font-size:12.5px}
#tablero-pie{margin-top:22px}
.leyenda{display:flex; gap:20px; flex-wrap:wrap; font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; margin:0 0 10px}
.li::before{content:''; display:inline-block; width:9px; height:9px;
  margin-right:7px; border:1px solid}
.lr{color:var(--signal)} .la{color:var(--amber)} .ls{color:var(--dim)}
.enlaces{margin-top:26px; font-size:12.5px; letter-spacing:.08em}
.enlaces a{color:var(--dim); text-decoration:none; border-bottom:1px solid var(--line)}
.enlaces a:hover{color:var(--amber); border-bottom-color:var(--amber)}
@media(max-width:900px){.tablero{grid-template-columns:repeat(4,1fr)}}

/* ---- boveda ---- */
.dir{margin:0 0 16px} .dir:last-of-type{margin-bottom:0}
.dir .tag{margin:0 0 4px}
.dir code{display:block; font-size:13px; color:var(--amber); word-break:break-all}
.dir .saldo{display:block; margin-top:3px; font-size:10.5px; color:var(--dim);
  letter-spacing:.14em; text-transform:uppercase}

/* ---- reglas ---- */
.borrador{border:1px dashed var(--alert); color:#C97F76; padding:12px 16px;
  font-size:12px; letter-spacing:.06em; margin:26px 0 0}
.regla{margin-top:32px}
.regla .texto{margin-top:6px}

/* ---- estado ---- */
.bloques-estado{margin-top:40px}
.bloques-estado #est-nota{margin:6px 0 14px; font-size:12.5px}
.eb{display:grid; grid-template-columns:34px 130px 1fr 48px; gap:12px; align-items:center;
  padding:9px 0; border-bottom:1px solid var(--line); font-size:12.5px}
.eb-n{color:var(--amber); font-weight:600}
.eb-est{color:#9BA0A8; letter-spacing:.04em}
.eb-sellado .eb-n,.eb-sellado .eb-est,.eb-sellado .eb-pct{color:#4E525A}
.eb-barra{height:8px; background:#191C21; border:1px solid var(--line)}
.eb-barra i{display:block; height:100%; background:var(--amber)}
.eb-pct{text-align:right; color:var(--bone)}
@media(max-width:620px){.eb{grid-template-columns:28px 92px 1fr 40px; gap:8px}}

/* ---- modo pruebas ---- */
#modo-pruebas{position:fixed; top:0; left:0; right:0; z-index:20;
  background:#241A0C; color:var(--amber); border-bottom:1px solid var(--amber);
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  text-align:center; padding:7px 20px}
.con-banda{padding-top:34px}

footer.legal{max-width:760px; margin:56px auto 0; padding-top:20px;
  border-top:1px solid var(--line); font-size:11px; color:#4E525A; line-height:1.8}
footer.legal a{color:#6C717A}

@media(max-width:620px){
  body{font-size:14px; padding-bottom:64px}
  .glyph{font-size:110px; top:44px}
  .hdr dt{flex-basis:66px}
  .payload{font-size:16px}
  .word{font-size:32px}
  .tablero{grid-template-columns:repeat(3,1fr); gap:6px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}