@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/JetBrainsMono-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/JetBrainsMono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/JetBrainsMono-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/JetBrainsMono-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/SpaceGrotesk-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/SpaceGrotesk-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/SpaceGrotesk-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/SpaceGrotesk-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/SpaceGrotesk-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/SpaceGrotesk-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/SpaceGrotesk-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/SpaceGrotesk-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================================
   c4sh3r · Vulnerability Research
   ========================================================================= */

:root{
  --bg:            #070b0a;
  --bg-2:          #0b1211;
  --surface:       rgba(255,255,255,.032);
  --surface-2:     rgba(255,255,255,.055);
  --line:          rgba(255,255,255,.09);
  --line-2:        rgba(255,255,255,.16);

  --text:          #ecefec;
  --text-2:        #a6b0ad;
  --text-3:        #717d79;

  --accent:        #e0a63c;
  --accent-2:      #4fc9a3;
  --accent-ink:    #120c02;

  --crit:          #ff4d6a;
  --high:          #ff9142;
  --med:           #ffd84d;
  --low:           #4ad3ff;
  --info:          #9aa5b4;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;

  --shadow:   0 24px 60px -28px rgba(0,0,0,.85);
  --shadow-2: 0 40px 90px -40px rgba(0,0,0,.95);

  --ease: cubic-bezier(.22,.68,.32,1);
  --wrap: 1180px;
}

*{ box-sizing:border-box; }

/* el atributo hidden debe ganar a cualquier display de clase */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
h1,h2,h3{ margin:0; line-height:1.12; letter-spacing:-.02em; font-weight:600; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; }

.skip-link{
  position:fixed; left:-999px; top:12px; z-index:200;
  background:var(--accent); color:var(--accent-ink);
  padding:10px 16px; border-radius:var(--r-sm); font-weight:600;
}
.skip-link:focus{ left:12px; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

/* ─────────────────────────────────────────── background */
.bg-layer{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }

/* base gradient — deliberately light */
.bg-base{
  position:absolute; inset:0;
  background:radial-gradient(130% 90% at 50% -15%, #0f1a18 0%, #0a1110 40%, #070b0a 100%);
}

/* very faint dot matrix */
.bg-dots{
  position:absolute; inset:-40px;
  background-image:radial-gradient(rgba(224,196,140,.09) 1px, transparent 1.3px);
  background-size:30px 30px;
  mask-image:radial-gradient(ellipse 80% 55% at 50% 4%, #000 8%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 4%, #000 8%, transparent 70%);
}

.bg-glow{
  position:absolute; border-radius:50%;
  filter:blur(140px); opacity:.3;
  will-change:transform;
}
.bg-glow--a{
  width:50vw; height:50vw; top:-20vw; left:-8vw;
  background:radial-gradient(circle, rgba(224,166,60,.28), transparent 68%);
  animation:float1 30s ease-in-out infinite;
}
.bg-glow--b{
  width:44vw; height:44vw; top:2vw; right:-14vw;
  background:radial-gradient(circle, rgba(79,201,163,.20), transparent 68%);
  animation:float2 36s ease-in-out infinite;
}
@keyframes float1{ 50%{ transform:translate3d(4vw,3vw,0) scale(1.08); } }
@keyframes float2{ 50%{ transform:translate3d(-4vw,4vw,0) scale(1.06); } }

/* ─────────────────────────────────────────── nav */
.nav{
  position:sticky; top:0; z-index:80;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:linear-gradient(180deg, rgba(7,11,10,.86), rgba(7,11,10,.55));
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.nav.is-stuck{ border-bottom-color:var(--line); background:rgba(7,11,10,.92); }

.nav__inner{ display:flex; align-items:center; gap:24px; height:78px; }

.brand{ display:flex; align-items:center; gap:13px; font-weight:700; letter-spacing:-.02em; }
.brand__logo{
  width:46px; height:46px; border-radius:12px; object-fit:cover;
  border:1px solid rgba(224,166,60,.28);
  box-shadow:0 0 26px -10px rgba(224,166,60,.7);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.brand:hover .brand__logo{ transform:scale(1.06) rotate(-2deg); box-shadow:0 0 34px -8px rgba(224,166,60,.9); }
.brand__text{ font-family:'JetBrains Mono', monospace; font-size:1.12rem; }
.brand__cursor{
  display:inline-block; width:9px; height:1.05em; margin-left:4px;
  background:var(--accent); vertical-align:-2px;
  animation:blink 1.15s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

.nav__links{ display:flex; gap:26px; margin-left:auto; font-size:.93rem; color:var(--text-2); }
.nav__links a{ position:relative; padding:4px 0; transition:color .25s var(--ease); }
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1.5px; width:0;
  background:var(--accent); transition:width .3s var(--ease);
}
.nav__links a:hover{ color:var(--text); }
.nav__links a:hover::after{ width:100%; }

.nav__actions{ display:flex; align-items:center; gap:12px; }

.lang{
  display:flex; padding:3px; gap:2px;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
}
.lang__btn{
  border:0; background:none; color:var(--text-3);
  font-size:.76rem; font-weight:700; letter-spacing:.06em;
  padding:5px 11px; border-radius:999px;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.lang__btn.is-active{ background:var(--accent); color:var(--accent-ink); }
.lang__btn:not(.is-active):hover{ color:var(--text); }

/* ─────────────────────────────────────────── buttons */
.btn{
  --btn-bg:var(--surface);
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 22px; border-radius:999px; border:1px solid var(--line-2);
  background:var(--btn-bg); font-weight:600; font-size:.94rem;
  transition:transform .28s var(--ease), background .28s var(--ease),
             border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn--primary{
  background:linear-gradient(135deg, var(--accent), #c98a28);
  color:var(--accent-ink); border-color:transparent;
  box-shadow:0 12px 34px -14px rgba(224,166,60,.75);
}
.btn--primary:hover{ box-shadow:0 20px 44px -14px rgba(224,166,60,.9); }
.btn--ghost:hover{ background:var(--surface-2); border-color:var(--line-2); }
.btn__icon{ width:17px; height:17px; transition:transform .3s var(--ease); }
.btn:hover .btn__icon{ transform:translateX(4px); }

/* ─────────────────────────────────────────── hero */
.hero{ padding:clamp(56px, 9vw, 118px) 0 clamp(40px, 6vw, 72px); }
.hero__head{ max-width:820px; }

.pill{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px 7px 11px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line);
  font-size:.8rem; color:var(--text-2); letter-spacing:.01em;
}
.pill__dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 rgba(224,166,60,.55); animation:ping 2.4s var(--ease) infinite;
}
@keyframes ping{
  0%{ box-shadow:0 0 0 0 rgba(224,166,60,.5); }
  70%{ box-shadow:0 0 0 9px rgba(224,166,60,0); }
  100%{ box-shadow:0 0 0 0 rgba(224,166,60,0); }
}

.hero__title{
  margin:22px 0 20px;
  font-size:clamp(2.35rem, 6.4vw, 4.35rem);
  font-weight:700; letter-spacing:-.035em;
}
.hero__title-line{ display:block; }
.hero__title-line--accent{
  background:linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 55%, #7fb3ff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% 100%; animation:sheen 9s ease-in-out infinite;
}
@keyframes sheen{ 50%{ background-position:100% 0; } }

.hero__lede{ color:var(--text-2); font-size:clamp(1rem, 1.5vw, 1.12rem); max-width:60ch; }
.hero__lede strong{ color:var(--text); font-weight:600; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }

.hero__main{
  display:grid; gap:clamp(28px, 5vw, 56px); align-items:center;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
}
.hero__head{ max-width:none; }

.hero__sig{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  margin:0 0 22px; font-family:'JetBrains Mono', monospace; font-size:.92rem;
}
.hero__sig-name{
  color:var(--accent); font-weight:700; letter-spacing:.04em; font-size:1.05rem;
  text-shadow:0 0 22px rgba(224,166,60,.45);
}
.hero__sig-dollar{
  color:#ffcd6b; text-shadow:0 0 16px rgba(255,205,107,.85);
  animation:dollarPulse 3.4s ease-in-out infinite;
}
@keyframes dollarPulse{ 50%{ opacity:.65; } }
.hero__sig-sep{ color:var(--text-3); opacity:.55; }
.hero__sig-team{ color:var(--text-2); letter-spacing:.04em; }

.footer__handle{
  font-family:'JetBrains Mono', monospace; font-weight:700;
  color:var(--accent); letter-spacing:.05em;
}

/* ─────────────────────────────────────────── hero emblem */
.emblem{
  position:relative; justify-self:center;
  width:min(100%, 400px); aspect-ratio:1;
  display:grid; place-items:center;
  animation:emblemFloat 7.5s ease-in-out infinite;
}
@keyframes emblemFloat{ 50%{ transform:translateY(-14px); } }

.emblem__halo{
  position:absolute; inset:8%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(224,166,60,.30), rgba(79,201,163,.10) 52%, transparent 70%);
  filter:blur(28px);
  animation:haloPulse 5.5s ease-in-out infinite;
}
@keyframes haloPulse{ 50%{ opacity:.55; transform:scale(1.09); } }

.emblem__rings{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.emblem__rings .ring{
  fill:none; stroke:rgba(224,166,60,.30); stroke-width:1;
  transform-origin:50% 50%;
}
.ring--1{ stroke-dasharray:3 12; animation:spin 34s linear infinite; }
.ring--2{
  stroke:rgba(79,201,163,.26); stroke-dasharray:90 260; stroke-linecap:round;
  animation:spin 22s linear infinite reverse;
}
.ring--3{ stroke:rgba(255,255,255,.09); stroke-dasharray:1 9; animation:spin 48s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* 3D coin — arrastra para rotar, clic para girar */
.coin-stage{
  position:relative; width:74%; aspect-ratio:1;
  padding:0; border:0; background:none;
  perspective:1100px; touch-action:pan-y;
  cursor:grab;
}
.coin-stage.is-dragging{ cursor:grabbing; }

.coin{
  position:relative; display:block; width:100%; height:100%;
  transform-style:preserve-3d; will-change:transform;
}
.coin-face{
  position:absolute; inset:0; border-radius:26px; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border:1px solid rgba(224,166,60,.30);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9), inset 0 0 60px rgba(224,166,60,.08);
}
.coin-front img{ width:100%; height:100%; object-fit:cover; user-select:none; }
.coin-back{
  transform:rotateY(180deg);
  display:grid; place-items:center; gap:2px; align-content:center;
  background:
    radial-gradient(circle at 50% 38%, rgba(224,166,60,.16), transparent 62%),
    linear-gradient(160deg, #101a17, #070d0c);
}
.coin-back__ring{
  position:absolute; inset:9%; border-radius:50%;
  border:1px dashed rgba(224,166,60,.32);
  animation:spin 26s linear infinite;
}
.coin-back__ring--in{
  inset:17%; border-style:solid; border-color:rgba(79,201,163,.22);
  animation-duration:38s; animation-direction:reverse;
}
.coin-back__mark{
  position:relative; font-family:'JetBrains Mono', monospace; font-weight:700;
  font-size:clamp(1.2rem, 3.4vw, 1.9rem); letter-spacing:.06em; color:var(--accent);
  text-shadow:0 0 26px rgba(224,166,60,.6);
}
.coin-back__mark i{ font-style:normal; color:#ffcd6b; }
.coin-back__sub{
  position:relative; font-family:'JetBrains Mono', monospace;
  font-size:.62rem; letter-spacing:.26em; line-height:1.7;
  color:var(--text-2); text-align:center;
}
.coin-back__year{
  position:relative; margin-top:8px; padding:3px 12px; border-radius:999px;
  border:1px solid rgba(224,166,60,.3); background:rgba(224,166,60,.1);
  font-family:'JetBrains Mono', monospace; font-size:.66rem;
  letter-spacing:.16em; color:var(--accent);
}
.coin-stage:hover .coin-face{
  box-shadow:0 36px 80px -28px rgba(0,0,0,.95), 0 0 46px -10px rgba(224,166,60,.35);
}
.emblem__scan{
  position:absolute; left:0; right:0; height:34%;
  background:linear-gradient(180deg, transparent, rgba(224,166,60,.16), transparent);
  animation:scan 4.6s var(--ease) infinite;
  pointer-events:none;
}
@keyframes scan{
  0%{ transform:translateY(-120%); opacity:0; }
  18%{ opacity:1; }
  82%{ opacity:1; }
  100%{ transform:translateY(320%); opacity:0; }
}

.emblem__rings .tick{
  transform-box:view-box; transform-origin:200px 200px;
  filter:drop-shadow(0 0 6px currentColor);
}
.tick--a{ fill:var(--accent); color:var(--accent); animation:spin 14s linear infinite; }
.tick--b{ fill:var(--accent-2); color:var(--accent-2); animation:spin 21s linear infinite reverse; }

/* ─────────────────────────────────────────── stats */
.stats{
  display:grid; gap:14px; margin-top:clamp(44px, 6vw, 68px);
  grid-template-columns:repeat(auto-fit, minmax(178px, 1fr));
}
.stat{
  --c:var(--accent);
  position:relative; overflow:hidden;
  padding:24px 20px 18px; border-radius:var(--r);
  background:
    linear-gradient(158deg,
      color-mix(in srgb, var(--c) 20%, transparent) 0%,
      color-mix(in srgb, var(--c) 7%, transparent) 42%,
      rgba(255,255,255,.02) 100%),
    rgba(10,15,14,.5);
  border:1px solid color-mix(in srgb, var(--c) 30%, var(--line));
  box-shadow:0 16px 40px -30px color-mix(in srgb, var(--c) 90%, #000);
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.stat::before{
  content:''; position:absolute; left:0; right:0; top:0; height:2.5px;
  background:linear-gradient(90deg, var(--c), transparent 88%);
}
.stat::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),
             color-mix(in srgb, var(--c) 26%, transparent), transparent 62%);
  opacity:0; transition:opacity .35s var(--ease);
}
.stat:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb, var(--c) 60%, var(--line));
  box-shadow:0 26px 56px -32px color-mix(in srgb, var(--c) 100%, #000),
             0 0 36px -18px color-mix(in srgb, var(--c) 70%, transparent);
}
.stat:hover::after{ opacity:1; }

.stat:nth-child(1){ --c:#e0a63c; }
.stat:nth-child(2){ --c:#ff5f7e; }
.stat:nth-child(3){ --c:#4fc9a3; }
.stat:nth-child(4){ --c:#ff9142; }
.stat:nth-child(5){ --c:#a78bfa; }

.stat__key{
  position:relative; display:inline-block; margin-bottom:12px;
  padding:3px 9px; border-radius:7px;
  font-family:'JetBrains Mono', monospace; font-size:.62rem;
  letter-spacing:.14em; font-weight:700;
  color:color-mix(in srgb, var(--c) 80%, #fff);
  background:color-mix(in srgb, var(--c) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--c) 34%, transparent);
}
.stat__bar{
  position:relative; display:block; height:4px; margin-top:12px;
  border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden;
}
.stat__bar > i{
  display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--c) 60%, #fff), var(--c));
  box-shadow:0 0 12px color-mix(in srgb, var(--c) 70%, transparent);
  animation:statBar 1.3s var(--ease) both .35s;
}
@keyframes statBar{ to{ width:var(--w, 0%); } }

.stat__value{
  position:relative;
  font-family:'JetBrains Mono', monospace; font-weight:700;
  font-size:clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing:-.03em;
  background:linear-gradient(165deg, #fff 8%, color-mix(in srgb, var(--c) 78%, #fff) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 34px color-mix(in srgb, var(--c) 45%, transparent);
}
.stat__label{
  position:relative; margin-top:6px; font-size:.79rem;
  color:color-mix(in srgb, var(--c) 34%, var(--text-2)); line-height:1.4;
}

/* ─────────────────────────────────────────── distribution */
.dist{
  margin-top:26px; padding:24px 24px 20px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
}
.dist__head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; margin-bottom:16px; }
.dist__title{ font-size:1rem; font-weight:600; }
.dist__hint{ font-size:.78rem; color:var(--text-3); }

.dist__bar{
  display:flex; height:13px; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.05); gap:2px;
}
.dist__seg{
  width:0; border-radius:999px;
  animation:segGrow 1.05s var(--ease) both;
  transition:filter .3s var(--ease);
}
@keyframes segGrow{ from{ width:0; } to{ width:var(--w, 0%); } }
.dist__seg:hover{ filter:brightness(1.25); }

.dist__legend{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:16px; }
.dist__legend li{ display:flex; align-items:center; gap:8px; font-size:.83rem; color:var(--text-2); }
.dist__legend b{ color:var(--text); font-family:'JetBrains Mono', monospace; }
.dot{ width:9px; height:9px; border-radius:3px; flex:none; }

/* ─────────────────────────────────────────── sections */
.section{ padding:clamp(56px, 8vw, 104px) 0; }
.section--alt{ position:relative; }
.section--alt::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.022), transparent);
  pointer-events:none;
}

.section__head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:18px 40px; margin-bottom:32px;
}
.eyebrow{
  display:inline-block; font-family:'JetBrains Mono', monospace;
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
  margin-bottom:10px;
}
.section__title{ font-size:clamp(1.7rem, 3.6vw, 2.5rem); }
.section__desc{ max-width:46ch; color:var(--text-2); font-size:.95rem; }

/* ─────────────────────────────────────────── filters */
.toolbar{
  display:flex; flex-direction:column; gap:14px;
  margin-bottom:34px; padding:20px 22px;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.toolbar__row{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.toolbar__label{
  flex:none; width:88px;
  font-family:'JetBrains Mono', monospace; font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-3);
}
.toolbar__foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  padding-top:14px; border-top:1px solid var(--line);
}
.toolbar__count{
  font-family:'JetBrains Mono', monospace; font-size:.8rem; color:var(--text-2);
}
.toolbar__reset{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 13px; border-radius:999px;
  border:1px solid var(--line); background:none;
  font-size:.78rem; color:var(--text-3);
  transition:all .25s var(--ease);
}
.toolbar__reset svg{ width:14px; height:14px; }
.toolbar__reset:hover{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, transparent); }

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  --cc:var(--text);
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface);
  font-size:.85rem; color:var(--text-2); white-space:nowrap;
  transition:color .25s var(--ease), border-color .25s var(--ease),
             background .25s var(--ease), transform .25s var(--ease),
             box-shadow .25s var(--ease);
}
.chip:hover{
  color:var(--text); transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--cc) 45%, var(--line));
  background:color-mix(in srgb, var(--cc) 8%, var(--surface));
}
.chip.is-active{
  color:color-mix(in srgb, var(--cc) 72%, #fff);
  background:color-mix(in srgb, var(--cc) 17%, transparent);
  border-color:color-mix(in srgb, var(--cc) 62%, transparent);
  box-shadow:0 0 24px -10px color-mix(in srgb, var(--cc) 90%, transparent);
  font-weight:600;
}
.chip__ico{ display:inline-grid; place-items:center; color:var(--cc); flex:none; }
.chip__ico svg{ width:14px; height:14px; }
.chip__dot{
  width:8px; height:8px; border-radius:3px; flex:none;
  background:var(--cc);
  box-shadow:0 0 10px -1px color-mix(in srgb, var(--cc) 80%, transparent);
}
.chip__n{
  font-family:'JetBrains Mono', monospace; font-size:.72rem;
  padding:1px 7px; border-radius:999px;
  background:rgba(255,255,255,.08); color:var(--text-3);
}
.chip.is-active .chip__n{
  background:color-mix(in srgb, var(--cc) 26%, transparent);
  color:color-mix(in srgb, var(--cc) 80%, #fff);
}

.sort{ display:flex; align-items:center; gap:6px; margin-left:auto; }
.sort__label{
  font-family:'JetBrains Mono', monospace; font-size:.68rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); margin-right:2px;
}
.sort__btn{
  border:1px solid transparent; background:none; border-radius:999px;
  padding:5px 12px; font-size:.79rem; color:var(--text-3);
  transition:all .25s var(--ease);
}
.sort__btn:hover{ color:var(--text-2); }
.sort__btn.is-active{
  color:var(--accent);
  border-color:color-mix(in srgb, var(--accent) 40%, transparent);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
}

.search{
  display:flex; align-items:center; gap:9px;
  padding:9px 14px; min-width:250px; margin-left:auto;
  border-radius:999px; border:1px solid var(--line); background:var(--surface);
  transition:border-color .25s var(--ease), background .25s var(--ease),
             box-shadow .25s var(--ease);
}
.search:focus-within{
  border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  background:var(--surface-2);
  box-shadow:0 0 26px -12px color-mix(in srgb, var(--accent) 85%, transparent);
}
.search svg{ width:16px; height:16px; color:var(--text-3); flex:none; }
.search input{
  border:0; background:none; outline:none; color:var(--text);
  font-size:.9rem; width:100%; font-family:inherit;
}
.search input::placeholder{ color:var(--text-3); }
.search input::-webkit-search-cancel-button{ display:none; }
.search__clear{
  border:0; background:none; padding:0; display:grid; place-items:center;
  color:var(--text-3); transition:color .25s var(--ease);
}
.search__clear:hover{ color:var(--accent); }

/* ─────────────────────────────────────────── grid + cards */
.grid{
  display:grid; gap:24px;
  grid-template-columns:repeat(auto-fill, minmax(430px, 1fr));
}

.card{
  --sev:var(--info);
  --pc:#fff;
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; gap:18px;
  padding:30px 30px 24px; text-align:left; width:100%;
  border-radius:var(--r-lg);
  border:1px solid color-mix(in srgb, var(--sev) 26%, var(--line));
  background:
    linear-gradient(168deg,
      color-mix(in srgb, var(--sev) 9%, transparent) 0%,
      rgba(255,255,255,.035) 42%,
      rgba(255,255,255,.012) 100%),
    rgba(10,15,14,.55);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 18px 44px -30px color-mix(in srgb, var(--sev) 60%, #000);
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
/* top severity rail */
.card__rail{
  position:absolute; left:0; right:0; top:0; height:2.5px;
  background:linear-gradient(90deg, var(--sev), color-mix(in srgb, var(--pc) 70%, var(--sev)) 55%, transparent);
  opacity:.9;
}
.card::after{
  content:''; position:absolute; inset:0; z-index:-1; opacity:0;
  background:radial-gradient(560px circle at var(--mx,50%) var(--my,50%),
             color-mix(in srgb, var(--sev) 20%, transparent), transparent 62%);
  transition:opacity .4s var(--ease);
}
.card:hover{
  transform:translateY(-7px);
  border-color:color-mix(in srgb, var(--sev) 58%, var(--line));
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 34px 70px -34px color-mix(in srgb, var(--sev) 85%, #000),
    0 0 44px -16px color-mix(in srgb, var(--sev) 55%, transparent);
}
.card:hover::after{ opacity:1; }

.card__top{ display:flex; align-items:center; gap:14px; }
.mono{
  width:48px; height:48px; flex:none; border-radius:14px;
  display:grid; place-items:center;
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:.82rem;
  letter-spacing:-.02em;
  border:1px solid color-mix(in srgb, var(--pc,#fff) 45%, transparent);
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--pc,#fff) 26%, transparent),
    color-mix(in srgb, var(--pc,#fff) 8%, transparent));
  color:var(--pc,#fff);
  box-shadow:0 0 26px -10px color-mix(in srgb, var(--pc,#fff) 80%, transparent);
}
.card__prog{ min-width:0; }
.card__progname{ font-weight:600; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card__plat{
  font-size:.74rem; color:var(--accent); letter-spacing:.08em; text-transform:uppercase;
  font-family:'JetBrains Mono', monospace;
}
.card__meta-row{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.surface{
  --sc:var(--accent-2);
  display:inline-grid; place-items:center; flex:none;
  width:26px; height:26px; border-radius:9px;
  color:var(--sc);
  background:color-mix(in srgb, var(--sc) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--sc) 40%, transparent);
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.card:hover .surface{ transform:translateY(-1px); background:color-mix(in srgb, var(--sc) 22%, transparent); }
.surface svg{
  width:15px; height:15px; flex:none;
  filter:drop-shadow(0 0 5px color-mix(in srgb, var(--sc) 70%, transparent));
}

.card__title{
  font-size:1.2rem; font-weight:600; line-height:1.35; letter-spacing:-.018em;
}
.card__sum{ font-size:.92rem; color:var(--text-2); line-height:1.62; }

.card__facts{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
  gap:10px; margin:0;
}
.card__facts>div{
  padding:11px 13px; border-radius:12px;
  background:rgba(255,255,255,.035); border:1px solid var(--line);
}
.card__facts dt{
  font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-3); margin-bottom:4px;
}
.card__facts dd{ margin:0; font-size:.8rem; color:var(--text); line-height:1.4; }

.card__tags{ display:flex; flex-wrap:wrap; gap:7px; }
.tag{
  font-size:.73rem; padding:4px 11px; border-radius:999px;
  background:rgba(255,255,255,.055); border:1px solid var(--line);
  color:var(--text-2); white-space:nowrap;
}
.tag--c0{ background:rgba(224,166,60,.12);  border-color:rgba(224,166,60,.3);  color:#f0c97e; }
.tag--c1{ background:rgba(79,201,163,.12);  border-color:rgba(79,201,163,.3);  color:#82dcc0; }
.tag--c2{ background:rgba(122,162,255,.12); border-color:rgba(122,162,255,.3); color:#a8c1ff; }
.tag--c3{ background:rgba(191,136,255,.12); border-color:rgba(191,136,255,.3); color:#d0aaff; }

.card__foot{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:auto; padding-top:17px; padding-right:38px;
  border-top:1px solid var(--line);
}
.sev{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 12px 5px 9px; border-radius:999px;
  font-size:.76rem; font-weight:600; letter-spacing:.02em;
  background:color-mix(in srgb, var(--sev) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--sev) 45%, transparent);
  color:var(--sev);
}
.sev--lg{
  margin-left:auto; flex:none;
  padding:7px 15px 7px 11px; font-size:.82rem;
  box-shadow:0 0 26px -12px color-mix(in srgb, var(--sev) 90%, transparent);
}
.sev__score{ font-family:'JetBrains Mono', monospace; font-size:1.02em; font-weight:700; }

.status{
  --st:var(--accent);
  display:inline-flex; align-items:center; gap:6px;
  font-size:.73rem; font-weight:600; padding:4px 11px; border-radius:999px;
  background:color-mix(in srgb, var(--st) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--st) 38%, transparent);
  color:var(--st);
}
.status::before{
  content:''; width:6px; height:6px; border-radius:50%; background:currentColor;
}
.status--fixed{ --st:#46d39a; }
.status--validated{ --st:var(--accent); }
.status--duplicate{ --st:#bf88ff; }
.status--certified{ --st:var(--accent); }

.card__date{ font-size:.76rem; color:var(--text-3); font-family:'JetBrains Mono', monospace; }
.card__cert{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  font-size:.76rem; font-weight:600; color:var(--accent);
}
.card__cert svg{ width:15px; height:15px; }

.card__arrow{
  position:absolute; right:22px; bottom:20px; width:20px; height:20px;
  color:var(--sev); opacity:0; transform:translateX(-6px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.card:hover .card__arrow{ opacity:.9; transform:translateX(0); }

.empty{ text-align:center; color:var(--text-3); padding:56px 0; }

/* ─────────────────────────────────────────── method cards */
.cards3{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); }
.mcard{
  padding:28px 26px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--surface);
  transition:transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.mcard:hover{ transform:translateY(-5px); border-color:var(--line-2); background:var(--surface-2); }
.mcard__num{
  font-family:'JetBrains Mono', monospace; font-size:.82rem;
  color:var(--accent); margin-bottom:14px; letter-spacing:.1em;
}
.mcard h3{ font-size:1.08rem; margin-bottom:10px; }
.mcard p{ font-size:.9rem; color:var(--text-2); }

/* ─────────────────────────────────────────── footer */
.footer{
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, transparent, rgba(224,166,60,.035));
  padding:clamp(48px, 7vw, 78px) 0 26px;
}
.footer__grid{
  display:grid; gap:38px;
  grid-template-columns:minmax(260px, 1.35fr) repeat(auto-fit, minmax(210px, 1fr));
}
.footer__logo{ width:44px; height:44px; border-radius:12px; margin-bottom:16px; }
.footer__tag{ color:var(--text-2); font-size:.92rem; max-width:42ch; }
.footer__team{ margin-top:14px; font-size:.84rem; color:var(--text-3); }
.footer__team strong{ color:var(--accent); font-family:'JetBrains Mono', monospace; }

.footer__col h3{
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-3); margin-bottom:16px; font-weight:600;
}
.clist{ display:flex; flex-direction:column; gap:11px; }
.clist li{ display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--text-2); }
.clist svg{ width:17px; height:17px; flex:none; color:var(--text-3); }
.clist a{ transition:color .25s var(--ease); word-break:break-word; }
.clist a:hover{ color:var(--accent); }
.clist--plain li{ color:var(--text-2); }
.footer__note{ margin-top:16px; font-size:.78rem; color:var(--text-3); line-height:1.55; }

.footer__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px;
  margin-top:44px; padding-top:20px; border-top:1px solid var(--line);
  font-size:.78rem; color:var(--text-3);
}
.footer__sig{ font-family:'JetBrains Mono', monospace; }

/* ─────────────────────────────────────────── modal */
.modal{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:20px; }
.modal[hidden]{ display:none; }
.modal__backdrop{
  position:absolute; inset:0; background:rgba(3,5,8,.78);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  animation:fadeIn .3s var(--ease);
}
@keyframes fadeIn{ from{ opacity:0; } }

@property --mdang{ syntax:'<angle>'; initial-value:0deg; inherits:false; }

.modal__panel{
  --sevc:var(--accent);
  position:relative; width:min(100%, 880px); max-height:min(90vh, 980px);
  background:linear-gradient(170deg, #0e1413, #080c0b);
  border:1px solid transparent; border-radius:var(--r-lg);
  background-clip:padding-box;
  overflow:hidden;
  box-shadow:
    0 50px 110px -40px rgba(0,0,0,.95),
    0 0 70px -26px color-mix(in srgb, var(--sevc) 60%, transparent),
    0 1px 0 rgba(255,255,255,.06) inset;
  animation:panelIn .42s var(--ease), panelGlow 6s ease-in-out infinite 1s;
}
/* borde en degradado que gira despacio (solo el anillo, via mascara) */
.modal__panel::before{
  content:''; position:absolute; inset:0; z-index:3;
  border-radius:inherit; padding:1.5px; pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  background:conic-gradient(from var(--mdang),
    color-mix(in srgb, var(--sevc) 90%, transparent) 0deg,
    transparent 70deg,
    color-mix(in srgb, var(--accent) 70%, transparent) 150deg,
    transparent 230deg,
    color-mix(in srgb, var(--sevc) 70%, transparent) 320deg,
    color-mix(in srgb, var(--sevc) 90%, transparent) 360deg);
  animation:mdBorder 7s linear infinite;
}
/* sin @property el anillo se queda quieto, pero se ve igual */
@supports not (background: conic-gradient(from var(--mdang), red, blue)){
  .modal__panel::before{ background:linear-gradient(140deg, var(--sevc), transparent 45%, var(--accent)); }
}
/* halo interior que respira */
.modal__panel::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  border-radius:inherit;
  box-shadow:inset 0 0 90px -50px color-mix(in srgb, var(--sevc) 90%, transparent);
}
@keyframes mdBorder{ to{ --mdang:360deg; } }
@keyframes panelGlow{
  50%{ box-shadow:
    0 50px 110px -40px rgba(0,0,0,.95),
    0 0 92px -22px color-mix(in srgb, var(--sevc) 75%, transparent),
    0 1px 0 rgba(255,255,255,.06) inset; }
}
@keyframes panelIn{ from{ opacity:0; transform:translateY(22px) scale(.97); } }

.modal__close{
  position:absolute; top:14px; right:14px; z-index:3;
  width:36px; height:36px; display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--line);
  background:rgba(10,13,18,.85); color:var(--text-2);
  transition:all .25s var(--ease);
}
.modal__close:hover{ color:var(--text); border-color:var(--line-2); transform:rotate(90deg); }
.modal__close svg{ width:17px; height:17px; }

.modal__scroll{ max-height:min(90vh, 980px); overflow-y:auto; overscroll-behavior:contain; }
.modal__scroll::-webkit-scrollbar{ width:9px; }
.modal__scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:99px; }

/* modal content */
.md{ padding-bottom:38px; }

/* cabecera con degradado de criticidad */
.md__hero{
  position:relative; overflow:hidden;
  padding:34px clamp(22px,4vw,42px) 30px;
  background:
    linear-gradient(165deg,
      color-mix(in srgb, var(--sev) 22%, transparent) 0%,
      color-mix(in srgb, var(--sev) 7%, transparent) 45%,
      transparent 100%);
  border-bottom:1px solid var(--line);
}
.md__hero-glow{
  position:absolute; top:-60%; right:-10%; width:60%; height:180%;
  background:radial-gradient(circle, color-mix(in srgb, var(--pc) 22%, transparent), transparent 66%);
  filter:blur(60px); pointer-events:none;
}
.md__hero-top{ position:relative; display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.mono--lg{ width:58px; height:58px; border-radius:16px; font-size:.95rem; }
.md__ident{ min-width:0; }
.md__prog{ font-size:1.06rem; font-weight:600; }
.md__badges{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:5px; }

/* medidor circular */
.gaugewrap{
  margin-left:auto; flex:none;
  display:flex; flex-direction:column; align-items:center; gap:7px;
}
.gauge{ position:relative; width:78px; height:78px; display:grid; place-items:center; }
.gauge svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.gauge__track{ fill:none; stroke:rgba(255,255,255,.08); stroke-width:6; }
.gauge__fill{
  fill:none; stroke:var(--sev); stroke-width:6; stroke-linecap:round;
  filter:drop-shadow(0 0 8px color-mix(in srgb, var(--sev) 70%, transparent));
  animation:gaugeIn 1.1s var(--ease) both .15s;
}
@keyframes gaugeIn{ from{ stroke-dashoffset:214; } }
.gauge__score{
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:1.42rem;
  color:var(--sev); line-height:1; letter-spacing:-.02em;
}
.gauge--zero .gauge__fill{ opacity:.35; }
.gauge__sev{
  font-size:.64rem; letter-spacing:.14em; font-weight:600;
  text-transform:uppercase; color:var(--sev); opacity:.85; white-space:nowrap;
}

.md__title{ position:relative; font-size:clamp(1.35rem,2.9vw,1.95rem); letter-spacing:-.026em; }
.md__sum{ position:relative; margin-top:14px; color:var(--text-2); font-size:1rem; max-width:68ch; }
.md__dl{
  position:relative; display:flex; flex-wrap:wrap; align-items:center;
  gap:14px; margin-top:24px;
}
.md__code{
  display:inline-flex; flex-direction:column; gap:1px;
  padding:6px 14px; border-radius:10px;
  background:rgba(224,166,60,.08); border:1px solid rgba(224,166,60,.24);
}
.md__code span{
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3);
}
.md__code code{
  font-family:'JetBrains Mono', monospace; font-size:.78rem;
  color:var(--accent); letter-spacing:.04em;
}

/* fichas */
.md__facts{
  display:grid; gap:10px; padding:26px clamp(22px,4vw,42px) 4px;
  grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
}
.fact{
  position:relative; padding:12px 14px 12px 16px; border-radius:12px;
  background:rgba(255,255,255,.032); border:1px solid var(--line);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.fact::before{
  content:''; position:absolute; left:0; top:12px; bottom:12px; width:2px;
  border-radius:2px; background:color-mix(in srgb, var(--sev) 60%, transparent);
}
.fact:hover{ border-color:var(--line-2); background:rgba(255,255,255,.05); }
.fact__k{
  font-size:.64rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--text-3); margin-bottom:5px;
}
.fact__v{ font-size:.88rem; color:var(--text); word-break:break-word; }

/* vector CVSS desglosado */
.md__cvss{ margin:22px clamp(22px,4vw,42px) 0; padding:18px 20px; border-radius:var(--r);
  background:rgba(255,255,255,.028); border:1px solid var(--line); }
.md__cvss-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; margin-bottom:14px; }
.md__cvss-head code{
  font-family:'JetBrains Mono', monospace; font-size:.72rem; color:var(--text-3);
  word-break:break-all;
}
.md__cvss-grid{ display:grid; gap:8px; grid-template-columns:repeat(auto-fill, minmax(148px,1fr)); }
.cv{
  --cvc:var(--text-3);
  display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;
  padding:8px 11px; border-radius:10px;
  background:color-mix(in srgb, var(--cvc) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--cvc) 26%, transparent);
}
.cv b{ font-family:'JetBrains Mono', monospace; font-size:.72rem; color:var(--cvc); }
.cv i{ font-style:normal; font-size:.64rem; color:var(--text-3); letter-spacing:.04em;
  flex:1 1 100%; order:3; }
.cv em{ font-style:normal; font-size:.8rem; font-weight:600; color:var(--text); }
.cv--hi{ --cvc:var(--crit); }
.cv--mid{ --cvc:var(--med); }
.cv--lo{ --cvc:var(--info); }

/* cuerpo */
.md__body{ padding:6px clamp(22px,4vw,42px) 0; }
.md__sec{ animation:secIn .5s var(--ease) both; animation-delay:calc(var(--i) * 60ms + .1s); }
@keyframes secIn{ from{ opacity:0; transform:translateY(14px); } }
.md__body h3{
  font-size:1.04rem; margin:30px 0 12px;
  display:flex; align-items:center; gap:10px;
}
.md__body h3::before{
  content:''; width:16px; height:2px; border-radius:2px;
  background:var(--sev); box-shadow:0 0 12px color-mix(in srgb, var(--sev) 70%, transparent);
  flex:none;
}
.md__body p{ color:var(--text-2); font-size:.95rem; margin-bottom:12px; }
.md__body ul{ display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
.md__body li{
  position:relative; padding:10px 14px 10px 30px; border-radius:10px;
  background:rgba(255,255,255,.026); border:1px solid var(--line);
  color:var(--text-2); font-size:.94rem;
}
.md__body li::before{
  content:''; position:absolute; left:13px; top:1.15em;
  width:6px; height:6px; border-radius:2px; background:var(--sev);
  box-shadow:0 0 8px color-mix(in srgb, var(--sev) 80%, transparent);
}

.md__cert{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  margin:34px clamp(22px,4vw,42px) 0; padding:20px 22px; border-radius:var(--r);
  background:linear-gradient(120deg, rgba(224,166,60,.13), rgba(224,166,60,.03));
  border:1px solid rgba(224,166,60,.28);
}
.md__cert-txt{ flex:1 1 220px; }
.md__cert-txt strong{ display:block; font-size:.95rem; margin-bottom:3px; }
.md__cert-txt span{ font-size:.78rem; color:var(--text-3); font-family:'JetBrains Mono', monospace; }

/* ─────────────────────────────────────────── reveal */
.reveal{ opacity:0; transform:translateY(26px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--d, 0ms);
}
.card.reveal.is-in{ transition-duration:.6s; }

/* ─────────────────────────────────────────── responsive */
@media (max-width:960px){
  .hero__main{ grid-template-columns:1fr; }
  .emblem{ order:-1; width:min(74%, 300px); margin-inline:auto; }
}
@media (max-width:820px){
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  .section__head{ align-items:flex-start; }
  .grid{ grid-template-columns:1fr; }
  .search{ min-width:0; width:100%; }
  .filters__spacer{ display:none; }
}
@media (max-width:520px){
  .stats{ grid-template-columns:repeat(2, 1fr); }
  .stat__value{ font-size:1.6rem; }
  .md{ padding:30px 20px 34px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* ─────────────────────────────────────────── selector de vista */
.viewsw{
  display:flex; gap:3px; padding:3px; margin-left:auto;
  border:1px solid var(--line); border-radius:999px; background:var(--surface);
}
.viewsw__btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 13px; border:0; border-radius:999px; background:none;
  font-size:.78rem; color:var(--text-3); transition:all .25s var(--ease);
}
.viewsw__btn svg{ width:14px; height:14px; fill:currentColor; }
.viewsw__btn:hover{ color:var(--text-2); }
.viewsw__btn.is-active{ background:var(--accent); color:var(--accent-ink); font-weight:600; }
.sort{ margin-left:0; }

/* ─────────────────────────────────────────── tabla comparativa */
.tablewrap{
  overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
}
.ftable{ width:100%; border-collapse:collapse; min-width:900px; }
.ftable th{
  text-align:left; padding:15px 18px; white-space:nowrap;
  font-family:'JetBrains Mono', monospace; font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-3);
  border-bottom:1px solid var(--line);
}
.ftable td{
  padding:15px 18px; border-bottom:1px solid rgba(255,255,255,.05);
  font-size:.88rem; color:var(--text-2); vertical-align:middle;
}
.ftable tbody tr{
  cursor:pointer; position:relative;
  animation:rowIn .45s var(--ease) both; animation-delay:var(--d, 0ms);
  transition:background .25s var(--ease);
}
@keyframes rowIn{ from{ opacity:0; transform:translateY(8px); } }
.ftable tbody tr::after{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--sev); opacity:0; transition:opacity .25s var(--ease);
}
.ftable tbody tr:hover{ background:color-mix(in srgb, var(--sev) 8%, transparent); }
.ftable tbody tr:hover::after{ opacity:1; }
.ftable tbody tr:last-child td{ border-bottom:0; }
.ftable__title{ color:var(--text); font-weight:600; max-width:360px; line-height:1.4; }
.ftable__prog{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.ftable__prog i{ width:8px; height:8px; border-radius:3px; flex:none; }
.ftable__mono{ font-family:'JetBrains Mono', monospace; font-size:.76rem; color:var(--text-3); }
.ftable__cert{ color:var(--accent); display:inline-flex; }
.ftable__cert svg{ width:17px; height:17px; }

/* ─────────────────────────────────────────── arsenal */
.tools{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); }
.tool{
  --tc:var(--accent);
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:11px;
  padding:26px 24px 22px; border-radius:var(--r-lg);
  border:1px solid color-mix(in srgb, var(--tc) 24%, var(--line));
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--tc) 11%, transparent), rgba(255,255,255,.015)),
    rgba(10,15,14,.5);
  box-shadow:0 16px 44px -32px color-mix(in srgb, var(--tc) 90%, #000);
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.tool::before{
  content:''; position:absolute; left:0; right:0; top:0; height:2.5px;
  background:linear-gradient(90deg, var(--tc), transparent 85%);
}
.tool:hover{
  transform:translateY(-6px);
  border-color:color-mix(in srgb, var(--tc) 55%, var(--line));
  box-shadow:0 30px 64px -34px color-mix(in srgb, var(--tc) 100%, #000),
             0 0 40px -18px color-mix(in srgb, var(--tc) 60%, transparent);
}
.tool__top{ display:flex; align-items:center; gap:11px; }
.tool__icon{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  color:var(--tc);
  background:color-mix(in srgb, var(--tc) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--tc) 38%, transparent);
}
.tool__icon svg{ width:18px; height:18px; }
.tool__lang{
  margin-left:auto; font-family:'JetBrains Mono', monospace; font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tc);
  padding:3px 10px; border-radius:999px;
  background:color-mix(in srgb, var(--tc) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--tc) 30%, transparent);
}
.tool__name{ font-size:1.16rem; font-weight:600; letter-spacing:-.02em; }
.tool__tag{ font-size:.85rem; color:var(--tc); font-weight:500; margin-top:-4px; }
.tool__desc{ font-size:.9rem; color:var(--text-2); line-height:1.6; }
.tool__topics{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.tool__cta{
  display:inline-flex; align-items:center; gap:7px; margin-top:auto; padding-top:14px;
  font-size:.83rem; font-weight:600; color:var(--tc);
}
.tool__cta svg{ width:15px; height:15px; transition:transform .3s var(--ease); }
.tool:hover .tool__cta svg{ transform:translateX(4px); }

/* ─────────────────────────────────────────── paginador */
.pager{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:8px; margin-top:34px;
}
.pager__num,
.pager__nav{
  display:inline-grid; place-items:center;
  min-width:38px; height:38px; padding:0 12px;
  border-radius:12px; border:1px solid var(--line); background:var(--surface);
  font-family:'JetBrains Mono', monospace; font-size:.85rem; color:var(--text-2);
  transition:all .25s var(--ease);
}
.pager__nav svg{ width:16px; height:16px; }
.pager__num:hover:not(.is-active),
.pager__nav:hover:not([disabled]){
  color:var(--text); border-color:var(--line-2); transform:translateY(-2px);
  background:var(--surface-2);
}
.pager__num.is-active{
  background:linear-gradient(135deg, var(--accent), #c98a28);
  border-color:transparent; color:var(--accent-ink); font-weight:700;
  box-shadow:0 10px 26px -12px rgba(224,166,60,.8);
}
.pager__nav[disabled]{ opacity:.32; cursor:not-allowed; }
.pager__gap{ color:var(--text-3); padding:0 2px; font-family:'JetBrains Mono', monospace; }
.pager__info{
  width:100%; text-align:center; margin-top:6px;
  font-family:'JetBrains Mono', monospace; font-size:.74rem; color:var(--text-3);
}

/* ─────────────────────────────────────────── scroll de la tabla */
.tablewrap{
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb, var(--accent) 55%, transparent) transparent;
}
.tablewrap::-webkit-scrollbar{ height:9px; }
.tablewrap::-webkit-scrollbar-track{ background:rgba(255,255,255,.04); border-radius:99px; }
.tablewrap::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, transparent), color-mix(in srgb, var(--accent-2) 70%, transparent));
  border-radius:99px;
}
.tablewrap::-webkit-scrollbar-thumb:hover{ background:var(--accent); }

/* ─────────────────────────────────────────── tabla en móvil: cada fila, una ficha */
@media (max-width:860px){
  .tablewrap{ border:0; background:none; overflow-x:visible; }
  .ftable{ min-width:0; display:block; }
  .ftable thead{ display:none; }
  .ftable tbody, .ftable tr, .ftable td{ display:block; width:100%; }
  .ftable tbody tr{
    position:relative; margin-bottom:14px; padding:16px 18px 14px;
    border:1px solid color-mix(in srgb, var(--sev) 26%, var(--line));
    border-radius:var(--r);
    background:linear-gradient(168deg, color-mix(in srgb, var(--sev) 9%, transparent), rgba(255,255,255,.015));
  }
  .ftable tbody tr::after{ inset:0 auto 0 0; opacity:.9; border-radius:2px 0 0 2px; }
  .ftable td{
    display:flex; align-items:center; gap:12px;
    padding:7px 0; border-bottom:1px solid rgba(255,255,255,.05);
  }
  .ftable td:last-child{ border-bottom:0; }
  .ftable td::before{
    content:attr(data-th); flex:none; width:96px;
    font-family:'JetBrains Mono', monospace; font-size:.62rem;
    letter-spacing:.12em; text-transform:uppercase; color:var(--text-3);
  }
  .ftable td.ftable__title{
    font-size:1rem; line-height:1.35; max-width:none;
    align-items:flex-start; flex-direction:column; gap:5px;
  }
  .ftable td.ftable__title::before{ width:auto; }
}