/*! © 2026 Kerb3r0ps · www.kerb3r0ps.com */
/* Cabecera común de todas las páginas: logotipo, Proyecto / Herramientas / Contacto en una cápsula central e idioma.
   Autónoma: no depende de las variables de cada página; --sn-w y --sn-g alinean su ancho con el contenido de cada una.
   Lenguaje propio de Kerb3r0ps (heredado de la primera versión): Unbounded en la marca, hueso y gris cálido,
   píldoras con borde y la línea con los tres colores de Cerbero. */
@font-face { font-family: "Unbounded"; font-weight: 200 900; font-display: swap; src: url("/assets/fonts/unbounded.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/instrument-sans.woff2") format("woff2"); }

.sn {
  --sn-fg: #F2F0EB; --sn-fg-2: #9C9CA6; --sn-line: rgba(242, 240, 235, .12);
  --sn-def: #3D8BFF; --sn-atk: #FF2A2A; --sn-int: #F8BE38;
  position: sticky; top: 0; z-index: 40;
  background: rgba(0, 0, 0, .8); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid transparent; transition: border-color .4s;
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--sn-fg);
}
.sn.scrolled { border-bottom-color: var(--sn-line); }
/* progreso de lectura con los tres colores de Cerbero (animación ligada al scroll, sin JavaScript) */
.sn::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--sn-def), var(--sn-atk), var(--sn-int)); }
@supports (animation-timeline: scroll()) {
  .sn::after { animation: sn-progress linear both; animation-timeline: scroll(root); }
}
@keyframes sn-progress { to { transform: scaleX(1); } }

.sn-in { width: min(var(--sn-w, 70rem), 100% - 2 * var(--sn-g, clamp(1.25rem, 5vw, 3rem))); margin-inline: auto; height: 3.75rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }

/* logotipo: el /k y "kerb3r0ps" en Unbounded, con el cero tachado de la marca */
.sn-brand { display: inline-flex; align-items: center; gap: .6rem; justify-self: start; color: var(--sn-fg, #F2F0EB); text-decoration: none; }
.sn-logo { display: block; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 8px; background: #000 url("/assets/img/logo-k.png") center / 135% no-repeat; box-shadow: inset 0 0 0 1px rgba(242, 240, 235, .22); transition: box-shadow .25s; }
.sn-word { font-family: "Unbounded", "Arial Black", system-ui, sans-serif; font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; line-height: 1; white-space: nowrap; }
.sn-word .z { position: relative; display: inline-block; }
.sn-word .z::after { content: ""; position: absolute; left: 50%; top: 52%; width: .1em; height: .62em; background: currentColor; transform: translate(-50%, -50%) rotate(30deg); }
.sn-brand:hover .sn-logo { box-shadow: inset 0 0 0 1px rgba(242, 240, 235, .55); }

/* cápsula central */
.sn-c { display: flex; align-items: center; gap: .15rem; padding: .22rem; border: 1px solid var(--sn-line); border-radius: 999px; background: rgba(242, 240, 235, .03); }
.sn-l, .sn-btn { display: inline-flex; align-items: center; gap: .4rem; height: 2.1rem; padding: 0 1rem; border: 0; border-radius: 999px; background: transparent; color: var(--sn-fg-2); font: 500 .86rem/1 "Instrument Sans", system-ui, sans-serif; text-decoration: none; cursor: pointer; transition: color .2s, background .2s; }
.sn-l:hover, .sn-btn:hover, .sn-btn[aria-expanded="true"] { color: var(--sn-fg); background: rgba(242, 240, 235, .07); }
.sn-l[aria-current="page"], .sn-btn.on { color: var(--sn-fg); background: rgba(242, 240, 235, .1); }
.sn-menu { position: relative; }
.sn-btn svg { width: .65rem; height: .65rem; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.sn-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.sn-list {
  position: absolute; top: calc(100% + .7rem); left: 50%; translate: -50% 0; min-width: 18rem; list-style: none; margin: 0; padding: .4rem;
  background: rgba(16, 16, 18, .94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid var(--sn-line); border-radius: 18px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9);
  animation: sn-drop .4s cubic-bezier(.16, 1, .3, 1);
}
.sn-list[hidden] { display: none; }
@keyframes sn-drop { from { opacity: 0; transform: translateY(-4px); } }
.sn-list a { position: relative; display: grid; gap: .12rem; padding: .7rem .9rem .7rem 1.2rem; border-radius: 12px; color: var(--sn-fg); text-decoration: none; transition: background .2s; }
.sn-list a::before { content: ""; position: absolute; left: .5rem; top: .8rem; bottom: .8rem; width: 2px; border-radius: 2px; background: var(--sn-fg); opacity: 0; transition: opacity .2s; }
.sn-list strong { font-family: "Unbounded", system-ui, sans-serif; font-weight: 600; font-size: .86rem; letter-spacing: -.01em; }
.sn-list small { color: var(--sn-fg-2); font-size: .8rem; }
.sn-list a:hover, .sn-list a:focus-visible { background: rgba(242, 240, 235, .06); }
.sn-list a:hover::before { opacity: .35; } .sn-list a[aria-current="page"]::before { opacity: 1; }
.sn-list a[aria-current="page"] { background: rgba(242, 240, 235, .06); }

/* idioma: el selector de la primera versión, con la línea bajo el activo */
.sn-lang { justify-self: end; display: inline-flex; border: 1px solid var(--sn-line); border-radius: 9px; overflow: hidden; }
.sn-lang button { min-width: 2.4rem; height: 2rem; padding: 0 .55rem; border: 0; background: transparent; color: var(--sn-fg-2); font: 700 .72rem "Instrument Sans", system-ui, sans-serif; letter-spacing: .05em; cursor: pointer; transition: color .2s, background .2s; }
.sn-lang button + button { border-left: 1px solid var(--sn-line); }
.sn-lang button:hover { color: var(--sn-fg); }
.sn-lang button[aria-pressed="true"] { color: var(--sn-fg); background: rgba(242, 240, 235, .08); box-shadow: inset 0 -2px 0 var(--sn-fg); }
.sn :focus-visible { outline: 2px solid var(--sn-fg); outline-offset: 2px; border-radius: 8px; }

@media (max-width: 720px) {
  .sn-hide { display: none; }
  .sn-c { padding: .18rem; }
  .sn-list { width: min(18rem, calc(100vw - 2rem)); min-width: 0; }
}
@media (max-width: 420px) {
  .sn-word { display: none; }
}
@media (pointer: coarse) {
  .sn-l, .sn-btn { height: 40px; }
  .sn-lang button { height: 40px; min-width: 2.7rem; }
  .sn-list a { padding-block: .85rem; }
}
@media print { .sn { display: none; } }
@media (prefers-reduced-motion: reduce) { .sn-list { animation: none; } .sn-btn svg { transition: none; } }