/* =============================================
   Riesgos · Cookies y rastreadores (línea de tiempo)
   ============================================= */
.rk-cx { --cx-bg:#f3f5f9; --cx-ink:#0b1220; --cx-muted:#566176; --cx-line:#dfe5ef; --cx-coral:#ff5a36; --cx-coral-d:#d9421f; --cx-teal:#0fb5a4; --cx-teal-d:#0b8a7d; --cx-sun:#ffc24a; background:var(--cx-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-cx main { color:var(--cx-ink); }
.cx-wrap { width:100%; max-width:1140px; margin:0 auto; padding:0 28px; }

/* ---------- Hero ---------- */
.cx-hero { padding:clamp(48px,7vw,92px) 0 clamp(32px,5vw,56px); background:
  radial-gradient(520px 320px at 12% 0%, rgba(255,90,54,.16), transparent 65%),
  radial-gradient(520px 320px at 92% 20%, rgba(15,181,164,.16), transparent 65%), var(--cx-bg); }
.cx-kicker { display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:100px; background:#fff; border:1px solid var(--cx-line); font:700 .7rem/1 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--cx-coral-d); }
.cx-hero h1 { max-width:820px; margin:18px 0 16px; font-size:clamp(2.3rem,5.6vw,4.6rem); line-height:1; letter-spacing:-.055em; color:var(--cx-ink); }
.cx-hero h1 em { font-style:normal; color:var(--cx-coral); }
.cx-lead { max-width:640px; margin:0; color:var(--cx-muted); font-size:clamp(1.02rem,1.5vw,1.18rem); line-height:1.66; }
.cx-lead b { color:var(--cx-ink); }

/* ---------- Simulador ---------- */
.cx-sim { margin:clamp(28px,4vw,44px) 0 0; border:1px solid var(--cx-line); border-radius:26px; background:#fff; box-shadow:0 30px 70px rgba(20,30,60,.12); overflow:hidden; }
.cx-modes { display:flex; flex-wrap:wrap; gap:8px; padding:16px 20px; border-bottom:1px solid var(--cx-line); background:#fafbfd; }
.cx-mode { padding:11px 16px; border:1.5px solid var(--cx-line); border-radius:100px; background:#fff; color:var(--cx-muted); font:700 .86rem/1 'Inter',sans-serif; cursor:pointer; transition:all .2s ease; }
.cx-mode[aria-pressed="true"][data-mode="typical"] { border-color:var(--cx-coral); background:var(--cx-coral); color:#fff; }
.cx-mode[aria-pressed="true"][data-mode="waits"] { border-color:var(--cx-teal); background:var(--cx-teal); color:#fff; }
.cx-mode:focus-visible { outline:3px solid #146cff; outline-offset:3px; }
.cx-play { margin-left:auto; padding:11px 16px; border:0; border-radius:100px; background:var(--cx-ink); color:#fff; font:700 .86rem/1 'Inter',sans-serif; cursor:pointer; }
.cx-play:focus-visible { outline:3px solid #146cff; outline-offset:3px; }
.cx-stage { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(250px,.85fr); gap:0; }
.cx-page { position:relative; padding:24px; min-height:300px; border-right:1px solid var(--cx-line); background:linear-gradient(180deg,#fff,#f7f9fc); }
.cx-page__bar { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.cx-page__bar i { width:10px; height:10px; border-radius:50%; background:#d6dce8; }
.cx-page__bar span { flex:1; padding:6px 12px; border-radius:100px; background:#eef1f7; color:var(--cx-muted); font:500 .72rem/1 'JetBrains Mono',monospace; }
.cx-page h3 { margin:0 0 6px; font-size:1.2rem; letter-spacing:-.03em; color:var(--cx-ink); }
.cx-page p { margin:0 0 14px; color:var(--cx-muted); font-size:.86rem; line-height:1.55; max-width:44ch; }
.cx-page .skel { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.cx-page .skel i { display:block; height:54px; border-radius:10px; background:#e7ecf4; }
.cx-banner { position:absolute; left:18px; right:18px; bottom:18px; padding:14px 16px; border-radius:16px; background:var(--cx-ink); color:#fff; box-shadow:0 18px 40px rgba(11,18,32,.35); opacity:0; transform:translateY(14px); transition:opacity .4s ease, transform .4s ease; }
.cx-banner.is-on { opacity:1; transform:none; }
.cx-banner b { display:block; margin-bottom:4px; font-size:.84rem; }
.cx-banner span { display:block; margin-bottom:10px; color:#b8c1d4; font-size:.76rem; line-height:1.45; }
.cx-banner div { display:flex; gap:8px; }
.cx-banner button { padding:8px 14px; border:0; border-radius:100px; font:700 .76rem/1 'Inter',sans-serif; cursor:default; }
.cx-banner .a { background:#fff; color:var(--cx-ink); }
.cx-banner .r { background:rgba(255,255,255,.14); color:#fff; }

.cx-side { padding:24px; background:#fff; }
.cx-side h4 { margin:0 0 4px; font:700 .72rem/1.2 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--cx-muted); }
.cx-jar { display:flex; align-items:baseline; gap:10px; margin:6px 0 14px; }
.cx-jar b { font-size:3.4rem; font-weight:800; letter-spacing:-.06em; line-height:1; color:var(--cx-ink); transition:color .3s ease; font-variant-numeric:tabular-nums; }
.cx-jar b.hot { color:var(--cx-coral); }
.cx-jar span { color:var(--cx-muted); font-size:.82rem; line-height:1.3; }
.cx-events { margin:0; padding:0; list-style:none; display:grid; gap:8px; overflow:visible; }
.cx-events li { display:flex; gap:10px; align-items:flex-start; padding:9px 11px; border-radius:10px; background:#f4f6fa; font-size:.8rem; line-height:1.4; color:var(--cx-ink); opacity:.35; transform:translateX(6px); transition:opacity .3s ease, transform .3s ease, background .3s ease; }
.cx-events li.on { opacity:1; transform:none; }
.cx-events li.bad.on { background:#ffeee9; }
.cx-events li.good.on { background:#e5f8f5; }
.cx-events li time { flex:none; min-width:46px; font:700 .7rem/1.5 'JetBrains Mono',monospace; color:var(--cx-muted); }
.cx-events code { font:600 .74rem/1 'JetBrains Mono',monospace; padding:1px 5px; border-radius:4px; background:rgba(0,0,0,.06); }

.cx-track { padding:20px 24px 24px; border-top:1px solid var(--cx-line); background:#fafbfd; }
.cx-track label { display:flex; justify-content:space-between; margin-bottom:10px; color:var(--cx-muted); font:700 .72rem/1 'JetBrains Mono',monospace; letter-spacing:.06em; text-transform:uppercase; }
.cx-range { width:100%; height:34px; background:transparent; -webkit-appearance:none; appearance:none; cursor:pointer; }
.cx-range::-webkit-slider-runnable-track { height:8px; border-radius:100px; background:linear-gradient(90deg,var(--cx-coral) var(--p,0%), #dfe5ef var(--p,0%)); }
.cx-range::-moz-range-track { height:8px; border-radius:100px; background:#dfe5ef; }
.cx-range::-moz-range-progress { height:8px; border-radius:100px; background:var(--cx-coral); }
.cx-range::-webkit-slider-thumb { -webkit-appearance:none; width:26px; height:26px; margin-top:-9px; border-radius:50%; background:#fff; border:4px solid var(--cx-ink); box-shadow:0 4px 10px rgba(0,0,0,.2); }
.cx-range::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:#fff; border:4px solid var(--cx-ink); }
.cx-range:focus-visible { outline:3px solid #146cff; outline-offset:6px; border-radius:100px; }
.cx-ticks { display:flex; justify-content:space-between; margin-top:2px; color:var(--cx-muted); font:600 .68rem/1 'JetBrains Mono',monospace; }
.cx-cap { margin:14px 0 0; color:var(--cx-ink); font-size:.92rem; line-height:1.55; min-height:2.9em; }
.cx-note { margin:12px 0 0; color:var(--cx-muted); font-size:.76rem; }

/* ---------- Secciones ---------- */
.cx-sec { padding:clamp(52px,7vw,96px) 0; }
.cx-sec--white { background:#fff; }
.cx-head { max-width:720px; margin:0 0 clamp(26px,4vw,44px); }
.cx-eyebrow { font:700 .72rem/1.2 'JetBrains Mono',monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--cx-teal-d); }
.cx-head h2 { margin:12px 0 12px; font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.04; letter-spacing:-.05em; color:var(--cx-ink); }
.cx-head p { margin:0; color:var(--cx-muted); font-size:clamp(1rem,1.4vw,1.12rem); line-height:1.66; }

/* Banners comparados */
.cx-compare { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.cx-ban { padding:24px; border-radius:22px; border:1px solid var(--cx-line); background:#fff; }
.cx-ban--bad { border-color:#ffd1c5; background:#fff7f4; }
.cx-ban--good { border-color:#b8ece5; background:#f1fcfa; }
.cx-ban h3 { display:flex; align-items:center; gap:8px; margin:0 0 14px; font-size:1.08rem; letter-spacing:-.02em; color:var(--cx-ink); }
.cx-ban h3 span { padding:4px 9px; border-radius:100px; font:700 .66rem/1 'JetBrains Mono',monospace; letter-spacing:.06em; }
.cx-ban--bad h3 span { background:var(--cx-coral); color:#fff; }
.cx-ban--good h3 span { background:var(--cx-teal); color:#fff; }
.cx-mock { padding:16px; border-radius:16px; background:var(--cx-ink); color:#fff; }
.cx-mock p { margin:0 0 12px; color:#c4cce0; font-size:.8rem; line-height:1.5; }
.cx-mock div { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.cx-mock .big { padding:10px 18px; border-radius:100px; background:#fff; color:var(--cx-ink); font:700 .8rem/1 'Inter',sans-serif; }
.cx-mock .eq { padding:10px 18px; border-radius:100px; background:#fff; color:var(--cx-ink); font:700 .8rem/1 'Inter',sans-serif; }
.cx-mock .tiny { color:#7f8aa3; font-size:.68rem; text-decoration:underline; }
.cx-ban ul { margin:16px 0 0; padding:0; list-style:none; display:grid; gap:8px; }
.cx-ban li { display:flex; gap:9px; color:#2e3850; font-size:.88rem; line-height:1.5; }
.cx-ban li::before { content:"×"; flex:none; font-weight:800; color:var(--cx-coral-d); }
.cx-ban--good li::before { content:"✓"; color:var(--cx-teal-d); }
.cx-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:22px; }
.cx-stat { padding:18px; border-radius:18px; background:#fff; border:1px solid var(--cx-line); }
.cx-stat b { display:block; font-size:2.4rem; font-weight:800; letter-spacing:-.06em; line-height:1; color:var(--cx-ink); }
.cx-stat span { display:block; margin-top:6px; color:var(--cx-muted); font-size:.82rem; line-height:1.4; }
.cx-stat i { display:block; height:6px; margin-top:12px; border-radius:100px; background:#e5eaf3; overflow:hidden; }
.cx-stat i u { display:block; height:100%; border-radius:100px; background:var(--cx-teal); }

/* Comprobar */
.cx-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; counter-reset:s; }
.cx-step { position:relative; padding:22px; border-radius:20px; border:1px solid var(--cx-line); background:#fff; counter-increment:s; }
.cx-step::before { content:counter(s); display:grid; place-items:center; width:34px; height:34px; margin-bottom:14px; border-radius:50%; background:var(--cx-ink); color:#fff; font:700 .85rem/1 'JetBrains Mono',monospace; }
.cx-step h3 { margin:0 0 6px; font-size:1.02rem; letter-spacing:-.02em; color:var(--cx-ink); }
.cx-step p { margin:0; color:var(--cx-muted); font-size:.88rem; line-height:1.58; }
.cx-step code { padding:1px 6px; border-radius:5px; background:#eef1f7; font:600 .78rem/1 'JetBrains Mono',monospace; color:var(--cx-ink); }

.cx-faq details { border-bottom:1px solid var(--cx-line); }
.cx-faq details:first-child { border-top:1px solid var(--cx-line); }
.cx-faq summary { display:flex; justify-content:space-between; gap:18px; padding:20px 2px; color:var(--cx-ink); font-size:1.06rem; font-weight:750; cursor:pointer; list-style:none; }
.cx-faq summary::-webkit-details-marker { display:none; }
.cx-faq summary::after { content:"+"; color:var(--cx-coral); font-size:1.5rem; font-weight:400; transition:transform .2s ease; }
.cx-faq details[open] summary::after { transform:rotate(45deg); }
.cx-faq summary:focus-visible { outline:3px solid #146cff; outline-offset:2px; }
.cx-faq p { max-width:66ch; margin:-4px 36px 22px 0; color:var(--cx-muted); font-size:.97rem; line-height:1.68; }
.cx-links { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:22px; }
.cx-links a { color:var(--cx-coral-d); font-weight:700; font-size:.92rem; }
.cx-cta { padding:clamp(56px,8vw,100px) 0; text-align:center; color:#fff; background:radial-gradient(640px 300px at 50% 0%,rgba(255,90,54,.35),transparent 65%),linear-gradient(135deg,#0b1220,#13213f); }
.cx-cta .cx-wrap { max-width:760px; }
.cx-cta h2 { margin:0; color:#fff; font-size:clamp(2rem,4.2vw,3.4rem); line-height:1.04; letter-spacing:-.055em; }
.cx-cta p { max-width:540px; margin:16px auto 26px; color:#c4cce0; font-size:1.05rem; line-height:1.62; }
.cx-cta .btn { background:#fff; color:#0b1220; }
.cx-cta .btn:hover { background:#eef1f7; }
.cx-disc { padding:22px 0; background:#e9edf4; color:#5d6a82; font-size:.76rem; line-height:1.55; text-align:center; }
.cx-disc p { max-width:880px; margin:0 auto; }

@media (max-width: 900px) {
  .cx-stage { grid-template-columns:1fr; }
  .cx-page { border-right:0; border-bottom:1px solid var(--cx-line); }
  .cx-compare, .cx-stats { grid-template-columns:1fr; }
  .cx-steps { grid-template-columns:1fr 1fr; }
  .cx-play { margin-left:0; }
}
@media (max-width: 560px) { .cx-steps { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce) { .cx-banner, .cx-events li, .cx-mode { transition:none; } }
