/* Header del sitio: el mismo en la portada, el blog, la privacidad y el 404. Única fuente; las páginas lo enlazan.
   Usa las variables de color y tipografía que define cada página (--tinta, --hueso, --cobre, --c-dia, --serif, --sans, --mono, --top) */
.top{position:fixed;inset:0 0 auto;z-index:30;height:var(--top);display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:env(safe-area-inset-top,0px) clamp(16px,3vw,32px) 0;background:var(--tinta);color:var(--hueso);box-shadow:inset 0 -2px 0 var(--cobre)}
.marca{display:inline-flex;align-items:center;gap:11px;min-height:44px;color:inherit;text-decoration:none;white-space:nowrap}
/* Marca: un mini roadmap. Tres equipos llegan a la misma fecha y se enciende el rombo de lanzamiento, el mismo de la pantalla del día */
.hito{flex:none;position:relative;overflow:hidden;width:38px;height:38px;border-radius:8px;background:#15110e;box-shadow:inset 0 0 0 1.5px rgba(245,241,234,.22)}
.hito s{position:absolute;left:6px;height:4px;border-radius:2px;transform-origin:left;transform:scaleX(0);animation:crece .7s cubic-bezier(.2,.8,.2,1) .3s forwards}
.hito s:nth-child(1){top:9px;width:17px;background:#48c08a}.hito s:nth-child(2){top:17px;left:10px;width:15px;background:#7fa6ff;animation-delay:.45s}.hito s:nth-child(3){top:25px;left:8px;width:14px;background:#ffb45c;animation-delay:.6s}
.hito em{position:absolute;right:5px;top:6px;bottom:6px;border-left:1.5px dashed rgba(245,241,234,.55)}
.hito q{position:absolute;right:2px;bottom:3px;width:7px;height:7px;background:#e08a4a;box-shadow:0 0 10px #e08a4a;transform:rotate(45deg) scale(0);animation:lanza .4s 1.05s cubic-bezier(.3,1.6,.5,1) forwards}
.marca .pila{display:grid;line-height:1.05}
.marca .nom{font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:-.005em}.marca .nom b{font-weight:600}
.marca .cargo{margin-top:3px;font:500 13px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(245,241,234,.78)}
/* En la portada el cargo se toca para explicar qué es un TPM */
.marca .cargo[data-tpm]{cursor:help;text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 50%,transparent)}
.top nav{display:flex;align-items:center;gap:clamp(10px,2vw,18px)}

/* Gambito, Daemon y LinkedIn: solo círculos con ícono, cada uno en el color de su destino (el mismo en todo el sitio). Sin texto: se descubren */
.ir-col,.contacto{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:44px;min-height:44px;padding:3px;border-radius:999px;background:var(--hueso);color:var(--tinta);text-decoration:none;font:700 15px/1 var(--sans);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.ir-col::before,.contacto::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s ease}
.ir-col svg,.contacto i{flex:none;width:36px;height:36px;border-radius:50%;animation:latido 2.8s ease-in-out infinite;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.ir-col svg{padding:0;box-sizing:border-box;color:#fff}
/* Íconos en pixel art: grilla de 12 x 12 con 3 de margen en el viewBox (18 x 18 en 36 px: 2 px por bloque). Sin padding: Safari recorta el contenido de un SVG redondeado a su caja interior */
.ir-col[data-col=gambito]{--neon:#48c08a}.ir-col[data-col=gambito] svg{background:var(--c-dia)}
.ir-col[data-col=daemon]{--neon:#b46cff}.ir-col[data-col=daemon] svg{background:#3a2a6e}
/* En el blog, la columna que se está leyendo */
.ir-col[aria-current]{box-shadow:0 0 0 2px var(--neon)}
.contacto{--neon:#3cc8f0}
.contacto i{display:grid;place-items:center;background:#0e5f7a;color:#fff}
.contacto svg{width:16px;height:16px}
.ir-col:hover{transform:translateY(-2px);box-shadow:0 12px 26px -14px var(--neon)}.contacto:hover{transform:translateY(-2px);box-shadow:0 12px 26px -14px var(--neon)}
.ir-col:hover::before,.contacto:hover::before{transform:translateX(120%)}
.ir-col:hover svg{animation:pulso .55s cubic-bezier(.3,1.5,.5,1) both;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 0 22px 2px var(--neon)}
.contacto:hover i{animation:pulso .55s cubic-bezier(.3,1.5,.5,1) both;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 0 22px 2px var(--neon)}
@media (max-width:600px){
  .top nav{gap:8px}.marca{gap:9px}.hito{width:34px;height:34px}.marca .nom{font-size:18px}
  .marca .cargo{font-family:var(--sans);letter-spacing:.01em;text-transform:none}
}
@media (max-width:400px){.marca .cargo{font-size:12px}}
@media (max-width:374px){.hito{display:none}}
@media (max-width:359px){.marca .nom{font-size:16px}.marca .cargo{font-size:11px}}

@keyframes crece{to{transform:scaleX(1)}}
@keyframes lanza{to{transform:rotate(45deg) scale(1)}}
@keyframes latido{0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 8px -3px var(--neon,#e08a4a)}50%{box-shadow:0 0 0 1px rgba(255,255,255,.1),0 0 18px 1px var(--neon,#e08a4a)}}
/* Al pasar, el ícono late una vez y queda un poco más grande */
@keyframes pulso{0%{transform:scale(1)}45%{transform:scale(1.16)}100%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.hito s,.hito q{animation-duration:.01ms;animation-delay:0s}.ir-col svg,.contacto i{animation:none!important}}