/* =============================================
   Riesgos · Web comprometida (forense, oscuro)
   ============================================= */
.rk-hack { --hk-bg:#06070d; --hk-panel:#0d1019; --hk-line:rgba(255,255,255,.1); --hk-red:#ff5a5f; --hk-amber:#ffb020; --hk-green:#3ddc97; --hk-text:#e8ecf5; --hk-muted:#9aa4ba; background:var(--hk-bg); }
.rk .sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.rk-hack main { color:var(--hk-text); }
.hk-wrap { width:100%; max-width:1140px; margin:0 auto; padding:0 28px; }
.hk-mono { font-family:'JetBrains Mono',monospace; }

/* ---------- Hero ---------- */
.hk-hero { position:relative; overflow:hidden; padding:clamp(52px,7vw,96px) 0 clamp(44px,6vw,80px);
  background: radial-gradient(760px 420px at 90% -10%, rgba(255,90,95,.30), transparent 62%), radial-gradient(600px 360px at 0% 110%, rgba(255,176,32,.12), transparent 60%), var(--hk-bg); }
.hk-hero::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px); }
.hk-hero .hk-wrap { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(28px,5vw,64px); align-items:center; }
.hk-kicker { display:inline-flex; align-items:center; gap:10px; font:700 .72rem/1.2 'JetBrains Mono',monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--hk-red); }
.hk-kicker::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--hk-red); box-shadow:0 0 0 4px rgba(255,90,95,.22); animation:hkPulse 2s ease-in-out infinite; }
@keyframes hkPulse { 50% { box-shadow:0 0 0 9px rgba(255,90,95,0); } }
.hk-hero h1 { margin:16px 0 18px; color:#fff; font-size:clamp(2.1rem,4.8vw,3.9rem); line-height:1.02; letter-spacing:-.05em; }
.hk-lead { max-width:520px; margin:0 0 24px; color:var(--hk-muted); font-size:clamp(1rem,1.4vw,1.12rem); line-height:1.66; }
.hk-stat { display:flex; align-items:center; gap:16px; padding:16px 18px; max-width:460px; border:1px solid var(--hk-line); border-radius:14px; background:rgba(255,255,255,.03); }
.hk-stat b { font-size:2.6rem; font-weight:800; letter-spacing:-.06em; color:var(--hk-red); line-height:1; }
.hk-stat span { color:var(--hk-text); font-size:.9rem; line-height:1.45; }

/* ---------- Navegador simulado ---------- */
.hk-browser { border:1px solid var(--hk-line); border-radius:16px; background:var(--hk-panel); box-shadow:0 40px 90px rgba(0,0,0,.55); overflow:hidden; }
.hk-bar { display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--hk-line); background:#0a0c14; }
.hk-dots { display:flex; gap:6px; }
.hk-dots i { width:10px; height:10px; border-radius:50%; background:#2a3042; }
.hk-url { flex:1; padding:6px 12px; border-radius:100px; background:#121624; color:var(--hk-muted); font:500 .74rem/1 'JetBrains Mono',monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hk-switch { display:flex; gap:4px; padding:4px; border-radius:100px; background:#121624; }
.hk-switch button { padding:7px 12px; border:0; border-radius:100px; background:transparent; color:var(--hk-muted); font:600 .74rem/1 'Inter',sans-serif; cursor:pointer; transition:background .2s ease,color .2s ease; }
.hk-switch button[aria-pressed="true"] { background:#fff; color:#06070d; }
.hk-switch button:focus-visible { outline:2px solid var(--hk-amber); outline-offset:2px; }
.hk-screen { position:relative; padding:64px 22px 54px; min-height:380px; }
.hk-site { transition:opacity .4s ease, filter .4s ease; }
.hk-site h2 { margin:0 0 6px; color:#fff; font-size:1.25rem; letter-spacing:-.03em; }
.hk-site p { margin:0 0 14px; color:var(--hk-muted); font-size:.84rem; line-height:1.55; }
.hk-site .menu { display:flex; gap:14px; margin:0 0 16px; font-size:.78rem; color:#c7cfdf; }
.hk-site .menu span { padding-bottom:3px; border-bottom:2px solid transparent; }
.hk-site .menu span:first-child { border-color:#5b8cff; }
.hk-site .cards { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.hk-site .cards i { display:block; height:62px; border-radius:8px; background:linear-gradient(135deg,#1a2038,#232b4a); }
.hk-spam { position:absolute; left:22px; right:22px; padding:6px 10px; border:1px dashed var(--hk-red); border-radius:6px; background:rgba(255,90,95,.1); color:#ffc6c8; font:500 .7rem/1.45 'JetBrains Mono',monospace; opacity:0; transform:translateY(6px); transition:opacity .35s ease, transform .35s ease; pointer-events:none; }
.hk-spam b { color:var(--hk-red); }
.hk-spam--1 { top:14px; }
.hk-spam--2 { top:218px; }
.hk-spam--3 { bottom:14px; }
.hk-browser[data-mode="code"] .hk-site { opacity:.34; filter:saturate(.5); }
.hk-browser[data-mode="code"] .hk-spam { opacity:1; transform:none; }
.hk-browser[data-mode="code"] .hk-spam--2 { transition-delay:.12s; }
.hk-browser[data-mode="code"] .hk-spam--3 { transition-delay:.24s; }
.hk-caption { margin:0; padding:12px 16px; border-top:1px solid var(--hk-line); color:var(--hk-muted); font-size:.78rem; line-height:1.5; background:#0a0c14; }
.hk-caption b { color:var(--hk-text); }

/* ---------- Secciones ---------- */
.hk-sec { padding:clamp(56px,8vw,104px) 0; border-top:1px solid var(--hk-line); }
.hk-head { max-width:720px; margin:0 0 clamp(28px,4vw,48px); }
.hk-eyebrow { font:700 .72rem/1.2 'JetBrains Mono',monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--hk-amber); }
.hk-head h2 { margin:14px 0 12px; color:#fff; font-size:clamp(1.8rem,3.4vw,2.9rem); line-height:1.05; letter-spacing:-.05em; }
.hk-head p { margin:0; color:var(--hk-muted); font-size:clamp(1rem,1.3vw,1.1rem); line-height:1.66; }

/* Patrones */
.hk-patterns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.hk-pat { padding:22px; border:1px solid var(--hk-line); border-radius:16px; background:var(--hk-panel); }
.hk-pat span { display:inline-block; margin-bottom:12px; padding:4px 9px; border-radius:6px; background:rgba(255,90,95,.14); color:var(--hk-red); font:700 .68rem/1 'JetBrains Mono',monospace; letter-spacing:.06em; }
.hk-pat h3 { margin:0 0 8px; color:#fff; font-size:1.06rem; letter-spacing:-.02em; }
.hk-pat p { margin:0 0 12px; color:var(--hk-muted); font-size:.9rem; line-height:1.6; }
.hk-code { display:block; padding:10px 12px; border-radius:8px; background:#05060b; color:#ff9ea1; font:500 .72rem/1.55 'JetBrains Mono',monospace; overflow-x:auto; white-space:pre; }

/* Primera hora */
.hk-clock { position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.hk-clock::before { content:""; position:absolute; left:2%; right:2%; top:22px; height:2px; background:linear-gradient(90deg,var(--hk-red),var(--hk-amber),var(--hk-green)); opacity:.5; }
.hk-step { position:relative; padding-top:50px; }
.hk-step__dot { position:absolute; top:10px; left:0; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--hk-bg); border:2px solid var(--hk-amber); color:var(--hk-amber); font:700 .7rem/1 'JetBrains Mono',monospace; }
.hk-step:first-child .hk-step__dot { border-color:var(--hk-red); color:var(--hk-red); }
.hk-step:last-child .hk-step__dot { border-color:var(--hk-green); color:var(--hk-green); }
.hk-step time { display:block; margin-bottom:6px; color:var(--hk-muted); font:600 .7rem/1 'JetBrains Mono',monospace; letter-spacing:.06em; text-transform:uppercase; }
.hk-step h3 { margin:0 0 6px; color:#fff; font-size:1rem; line-height:1.25; letter-spacing:-.02em; }
.hk-step p { margin:0; color:var(--hk-muted); font-size:.86rem; line-height:1.55; }

/* Comprobar */
.hk-checks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.hk-check { padding:22px; border:1px solid var(--hk-line); border-radius:16px; background:var(--hk-panel); }
.hk-check h3 { margin:0 0 6px; color:#fff; font-size:1.02rem; letter-spacing:-.02em; }
.hk-check p { margin:0 0 12px; color:var(--hk-muted); font-size:.88rem; line-height:1.58; }
.hk-copy { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; background:#05060b; }
.hk-copy code { flex:1; color:#a7f3d0; font:500 .76rem/1.4 'JetBrains Mono',monospace; overflow-x:auto; white-space:nowrap; }
.hk-copy button { flex:none; padding:7px 11px; border:1px solid var(--hk-line); border-radius:8px; background:transparent; color:var(--hk-text); font:600 .74rem/1 'Inter',sans-serif; cursor:pointer; }
.hk-copy button:hover { background:rgba(255,255,255,.08); }
.hk-copy button:focus-visible { outline:2px solid var(--hk-amber); outline-offset:2px; }

/* Datos */
.hk-data { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,5vw,64px); align-items:center; }
.hk-ring { display:grid; place-items:center; width:min(260px,100%); aspect-ratio:1; border-radius:50%; background:conic-gradient(var(--hk-red) 0 4.7deg, #1a1f2f 4.7deg 360deg); }
.hk-ring div { display:grid; place-items:center; width:84%; aspect-ratio:1; border-radius:50%; background:var(--hk-bg); text-align:center; }
.hk-ring b { display:block; font-size:4rem; font-weight:800; letter-spacing:-.07em; color:var(--hk-red); line-height:1; }
.hk-ring span { display:block; margin-top:4px; color:var(--hk-muted); font-size:.8rem; }
.hk-bars { display:grid; gap:18px; }
.hk-bar-row label { display:flex; justify-content:space-between; gap:12px; margin-bottom:7px; color:var(--hk-text); font-size:.9rem; }
.hk-bar-row label b { font:700 .82rem/1 'JetBrains Mono',monospace; color:var(--hk-amber); }
.hk-track { height:10px; border-radius:100px; background:#1a1f2f; overflow:hidden; }
.hk-track i { display:block; height:100%; border-radius:100px; background:linear-gradient(90deg,var(--hk-amber),var(--hk-red)); }
.hk-note { margin:22px 0 0; color:var(--hk-muted); font-size:.8rem; line-height:1.55; }

/* FAQ */
.hk-faq details { border-bottom:1px solid var(--hk-line); }
.hk-faq details:first-child { border-top:1px solid var(--hk-line); }
.hk-faq summary { display:flex; justify-content:space-between; gap:18px; padding:20px 2px; color:#fff; font-size:1.04rem; font-weight:700; cursor:pointer; list-style:none; }
.hk-faq summary::-webkit-details-marker { display:none; }
.hk-faq summary::after { content:"+"; color:var(--hk-amber); font-size:1.5rem; font-weight:400; transition:transform .2s ease; }
.hk-faq details[open] summary::after { transform:rotate(45deg); }
.hk-faq summary:focus-visible { outline:2px solid var(--hk-amber); outline-offset:2px; }
.hk-faq p { max-width:68ch; margin:-4px 36px 22px 0; color:var(--hk-muted); font-size:.96rem; line-height:1.68; }

/* CTA */
.hk-cta { padding:clamp(60px,8vw,104px) 0; text-align:center; border-top:1px solid var(--hk-line); background:radial-gradient(640px 300px at 50% 0%,rgba(255,90,95,.22),transparent 65%),var(--hk-bg); }
.hk-cta .hk-wrap { max-width:760px; }
.hk-cta h2 { margin:0; color:#fff; font-size:clamp(1.9rem,4vw,3.2rem); line-height:1.04; letter-spacing:-.05em; }
.hk-cta p { max-width:540px; margin:16px auto 26px; color:var(--hk-muted); font-size:1.04rem; line-height:1.62; }
.hk-cta .btn { background:#fff; color:#06070d; }
.hk-cta .btn:hover { background:#e9edf7; }
.hk-disc { padding:22px 0; border-top:1px solid var(--hk-line); background:#04050a; color:#7c869c; font-size:.76rem; line-height:1.55; text-align:center; }
.hk-disc p { max-width:880px; margin:0 auto; }
.hk-links { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:22px; }
.hk-links a { color:#8fb6ff; font-size:.9rem; font-weight:600; }

@media (max-width: 900px) {
  .hk-hero .hk-wrap, .hk-data { grid-template-columns:1fr; }
  .hk-patterns, .hk-checks { grid-template-columns:1fr; }
  .hk-clock { grid-template-columns:1fr; gap:22px; }
  .hk-clock::before { left:12px; right:auto; top:0; bottom:0; width:2px; height:auto; }
  .hk-step { padding:0 0 0 46px; }
  .hk-step__dot { left:0; top:0; }
}
@media (prefers-reduced-motion: reduce) { .hk-spam, .hk-site, .hk-kicker::before { transition:none; animation:none; } }

/* Evita desbordes en pantallas angostas: las celdas de la cuadrícula pueden encogerse */
.hk-patterns > *, .hk-checks > *, .hk-clock > *, .hk-hero .hk-wrap > *, .hk-data > * { min-width:0; }
.hk-copy { min-width:0; }
.hk-copy code { min-width:0; }
.hk-code { max-width:100%; }
.hk-browser { max-width:100%; }