/* ===== CÓDIGO FÉNIX — tema claro, moderno (estilo agencia) ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --bg:#ffffff;
  --bg-soft:#f5f6fb;
  --ink:#101225;
  --text:#41445a;
  --muted:#8a8fa6;
  --line:#e9ebf4;
  --brand:#6c5ce7;
  --brand2:#a855f7;
  --brand-ink:#5b46e0;
  --amber:#f59e0b;
  --red:#ef4444;
  --green:#10b981;
  --radius:18px;
  --shadow:0 10px 30px rgba(28,28,70,.08);
  --shadow-sm:0 4px 14px rgba(28,28,70,.06);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'SFMono-Regular',ui-monospace,'Cascadia Code','Courier New',monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(800px 420px at 80% -8%, rgba(168,85,247,.10), transparent 60%),
    radial-gradient(700px 400px at 0% -5%, rgba(108,92,231,.10), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px;margin:0 auto;padding:22px 18px 90px}
a{color:var(--brand-ink);text-decoration:none;font-weight:600}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.15;margin:.1em 0 .45em;color:var(--ink);letter-spacing:-.02em}
h1{font-size:2.2rem;font-weight:900}
h2{font-size:1.35rem;font-weight:800}
h3{font-size:1.05rem;font-weight:700}
p{margin:.5em 0}
.muted{color:var(--muted)}
.center{text-align:center}

/* gradient text helper (titulares / brand) */
.grad,h1 .grad{
  background:linear-gradient(100deg,var(--brand),var(--brand2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* top bar */
.topbar{background:rgba(255,255,255,.8);backdrop-filter:saturate(180%) blur(10px);position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line)}
.topbar .inner{max-width:760px;margin:0 auto;display:flex;gap:8px;align-items:center;padding:12px 18px;flex-wrap:wrap}
.brand{font-weight:900;letter-spacing:-.02em;color:var(--ink);margin-right:auto;font-size:1.05rem}
.brand b{background:linear-gradient(100deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.navlink{font-size:.9rem;font-weight:600;padding:7px 14px;border-radius:99px;color:var(--text)}
.navlink:hover{background:var(--bg-soft);text-decoration:none}
.navlink.active{background:linear-gradient(100deg,var(--brand),var(--brand2));color:#fff}

/* panels / cards */
.panel{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin:16px 0;box-shadow:var(--shadow-sm)}
.panel.glow{
  background:linear-gradient(180deg,#faf8ff,#f4f1ff);
  border:1px solid #e4ddff;
  box-shadow:var(--shadow);
}
.tag{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:linear-gradient(100deg,var(--brand),var(--brand2));padding:5px 12px;border-radius:99px}
.tag.warn{background:linear-gradient(100deg,#f59e0b,#fbbf24)}
.tag.danger{background:linear-gradient(100deg,#ef4444,#f43f5e)}

/* timer */
.timer{font-size:3.6rem;font-weight:900;letter-spacing:-.02em;text-align:center;margin:8px 0;
  background:linear-gradient(100deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.timer.warn{background:linear-gradient(100deg,#f59e0b,#fbbf24);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.timer.danger{background:linear-gradient(100deg,#ef4444,#f43f5e);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.phase{text-align:center;font-size:1.05rem;font-weight:600;color:var(--brand-ink)}

/* buttons & inputs */
button,.btn{display:inline-block;font-family:var(--sans);font-weight:700;cursor:pointer;border:none;
  background:linear-gradient(100deg,var(--brand),var(--brand2));color:#fff;padding:13px 22px;border-radius:99px;font-size:.98rem;
  box-shadow:0 8px 20px rgba(108,92,231,.28);transition:transform .12s ease,box-shadow .12s ease;text-decoration:none}
button:hover,.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(108,92,231,.36);text-decoration:none}
button.ghost,.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
button.ghost:hover,.btn.ghost:hover{background:var(--bg-soft);box-shadow:var(--shadow-sm)}
input,select,textarea{font-family:var(--sans);font-size:1rem;width:100%;background:#fff;border:1px solid var(--line);color:var(--ink);padding:13px 14px;border-radius:12px}
input::placeholder,textarea::placeholder{color:#b6bacb}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(108,92,231,.14)}
label{display:block;font-size:.78rem;font-weight:700;color:var(--muted);margin:14px 0 6px;text-transform:uppercase;letter-spacing:.05em}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>*{flex:1;min-width:0}

/* lock cards */
.lock-card{display:flex;gap:14px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:12px 0;background:#fff;box-shadow:var(--shadow-sm)}
.lock-card .ic{font-size:1.9rem;width:46px;text-align:center}
.lock-card .meta{flex:1;min-width:0}
.lock-card .meta b{color:var(--ink)}
.lock-card.unlocked{border-color:#c9bdff;background:linear-gradient(180deg,#fbfaff,#f6f3ff)}
.lock-card .state{font-size:.78rem;font-weight:700;color:var(--red);margin-top:2px}
.lock-card.unlocked .state{color:var(--green)}

/* document mockups */
.doc{border-radius:14px;overflow:hidden;margin:14px 0;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
/* whatsapp (tema claro real) */
.wa{background:#efeae2;padding:14px}
.wa .hdr{color:#3b4a54;border-bottom:1px solid #dcd6cc;padding-bottom:10px;margin-bottom:12px;font-weight:700}
.bubble{max-width:82%;padding:9px 12px;border-radius:12px;margin:8px 0;font-size:.92rem;white-space:pre-wrap;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.bubble.them{background:#ffffff;color:#111b21;border-top-left-radius:3px}
.bubble.me{background:#d9fdd3;color:#111b21;margin-left:auto;border-top-right-radius:3px}
.bubble .t{display:block;font-size:.66rem;color:#667781;margin-top:3px;text-align:right}
/* ticket */
.ticket{background:#fffdf7;color:#1a1a1a;font-family:var(--mono);padding:18px;max-width:300px;margin:0 auto;border:1px dashed #d8d2c4}
.ticket hr{border:none;border-top:1px dashed #c9c2b2;margin:9px 0}
.ticket .big{font-size:1.15rem;font-weight:700;text-align:center}
.ticket .li{display:flex;justify-content:space-between}
/* terminal log (bloque de código oscuro, moderno sobre blanco) */
.term{background:#0d1117;color:#7ee787;padding:16px;font-family:var(--mono);font-size:.82rem;overflow-x:auto}
.term .l{white-space:pre;display:block}
.term .hi{color:#ffd866}
.term .alert{color:#ff7b72}
/* letter */
.letter{background:#fffdf7;color:#1d1d1d;padding:26px;font-family:Georgia,'Times New Roman',serif}
.letter h3{color:#7a1f1f;font-family:Georgia,serif;font-size:1.2rem}
.letter .seal{float:right;border:2px solid #7a1f1f;color:#7a1f1f;border-radius:50%;width:78px;height:78px;display:flex;align-items:center;justify-content:center;font-size:.62rem;text-align:center;transform:rotate(-12deg);font-weight:700}

.hint{font-size:.9rem;color:var(--muted);background:var(--bg-soft);border-left:3px solid var(--brand);padding:10px 14px;border-radius:0 10px 10px 0;margin:12px 0}
.ok{color:var(--green)}.err{color:var(--red);font-weight:600}
ul.clean{list-style:none;padding-left:0;margin:.4em 0}
ul.clean li{padding:9px 0;border-bottom:1px solid var(--line)}
ul.clean li:last-child{border-bottom:none}
.kbd{font-size:.85rem;background:var(--bg-soft);border:1px solid var(--line);border-radius:6px;padding:2px 8px;color:var(--brand-ink);font-weight:700}
details{border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin:12px 0;background:#fff;box-shadow:var(--shadow-sm)}
summary{cursor:pointer;color:var(--ink);font-weight:700}
summary::marker{color:var(--brand)}
.blink{animation:bl 1.2s steps(2) infinite}@keyframes bl{50%{opacity:.25}}
footer{color:var(--muted);font-size:.8rem;text-align:center;padding:28px 0}