*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--bg-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--text-primary);
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

/* ── Chips ── */
.chip {
  display: inline-flex; align-items: center;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
}

.chip-cat--seguridad    { background:var(--cat-seguridad-bg);    color:var(--cat-seguridad-text); }
.chip-cat--ia           { background:var(--cat-ia-bg);           color:var(--cat-ia-text); }
.chip-cat--servidores   { background:var(--cat-servidores-bg);   color:var(--cat-servidores-text); }
.chip-cat--email        { background:var(--cat-email-bg);        color:var(--cat-email-text); }
.chip-cat--herramientas { background:var(--cat-herramientas-bg); color:var(--cat-herramientas-text); }
.chip-cat--noticias     { background:var(--cat-noticias-bg);     color:var(--cat-noticias-text); }

.chip-sev--critica { background:var(--sev-critica-bg); color:var(--sev-critica-text); }
.chip-sev--alta    { background:var(--sev-alta-bg);    color:var(--sev-alta-text); }
.chip-sev--media   { background:var(--sev-media-bg);   color:var(--sev-media-text); }
.chip-sev--baja    { background:var(--sev-baja-bg);    color:var(--sev-baja-text); }

/* ── Botones ── */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer; border: none;
  transition: var(--transition);
  text-decoration: none;
}
.btn-primary {
  background: var(--gray-900); color: var(--gray-0);
}
.btn-primary:hover { background: var(--gray-700); text-decoration: none; }

.btn-ghost {
  background: transparent; color: var(--text-primary);
  border: 1.5px solid var(--border-strong);
}
.btn-ghost:hover { background: var(--bg-elevated); text-decoration: none; }

/* ── Search ── */
.search-form { position: relative; }
.search-input-wrap {
  display: flex; align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--bg-base);
  overflow: hidden;
  transition: border-color var(--transition);
}
.search-input-wrap:focus-within { border-color: var(--border-strong); }
.search-input {
  border: none; background: transparent; outline: none;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--text-sm);
  color: var(--text-primary);
  width: 200px;
}
.search-input::placeholder { color: var(--text-muted); }
.search-btn {
  background: none; border: none; cursor: pointer;
  padding: var(--sp-2) var(--sp-3);
  color: var(--text-muted);
  display: flex; align-items: center;
}
.search-btn:hover { color: var(--text-primary); }

/* ── Visualmente oculto (accesibilidad) ── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}