/* One floating navigation layer: white ink inverts against the actual scene. */
header.piloko-adaptive-nav {
  --nav-ink: #fff;
  color: var(--nav-ink) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mix-blend-mode: difference;
  isolation: auto;
  pointer-events: none;
}
header.piloko-adaptive-nav :is(a, button, .umbral-now) {
  color: var(--nav-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
header.piloko-adaptive-nav :is(a, button) { pointer-events: auto; }
header.piloko-adaptive-nav a { border-color: currentColor !important; }
/* Fer's continuously lit green room needs dark ink rather than a colour inverse. */
header.room-site-header.piloko-adaptive-nav {
  --nav-ink: #111;
  mix-blend-mode: normal;
}
header.piloko-adaptive-nav :is(a:hover, a[aria-current]) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
header.piloko-adaptive-nav .umbral-trigger {
  border: 1px solid currentColor !important;
  border-radius: 3px;
}
header.piloko-adaptive-nav :is(.umbral-trigger:hover, .umbral-trigger[aria-pressed="true"]) {
  outline: 1px solid currentColor;
  outline-offset: 2px;
}
header.piloko-adaptive-nav :is(a, button):focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 4px;
}
header.piloko-adaptive-nav .sep { background: currentColor !important; }
/* David, 2026-11-01: el logo es siempre rojo. El original queda invisible dentro de la capa
   invertida (sigue siendo el enlace) y navigation.js lo dibuja encima con una copia fija en rojo. */
header.piloko-adaptive-nav :is(.brand, .piloko-wordmark).piloko-brand-ghost,
header.piloko-adaptive-nav :is(.brand, .piloko-wordmark).piloko-brand-ghost * { color: transparent !important; }
.piloko-brand-red {
  position: fixed;
  box-sizing: border-box;
  margin: 0;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
  text-decoration: none;
  color: #d8232f;
  mix-blend-mode: normal;
}
.piloko-brand-red * { color: #d8232f !important; }
@supports not (mix-blend-mode: difference) {
  header.piloko-adaptive-nav {
    --nav-ink: #111;
    background: #fff !important;
    border-color: #aaa !important;
  }
}
@media (forced-colors: active), (prefers-contrast: more) {
  header.piloko-adaptive-nav {
    --nav-ink: CanvasText !important;
    mix-blend-mode: normal;
    background: Canvas !important;
    border: 1px solid CanvasText !important;
  }
}

/* Contacto lives in the red contact panel, outside the upper navigation. */
:is(header.top,header.room-site-header,header.header.piloko-floating) :is(a[href="/contacto/"],a[href^="/contacto/?"],a[data-nav="contacto"]){display:none!important}

/* Social links share the right-hand menu with Blog and Contratar. */
header.piloko-social-header>nav{margin-left:auto;justify-content:flex-end;align-items:center}
header.piloko-social-header .piloko-menu-end{display:flex;align-items:center;gap:16px}
header.piloko-social-header>.piloko-socials{margin-left:auto}
header.piloko-social-header .piloko-socials{display:flex;align-items:center;gap:4px;flex:none}
header.piloko-social-header .piloko-social-link{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:36px;min-height:36px;padding:0;margin:0;border:0;background:transparent;color:inherit;text-decoration:none;pointer-events:auto}
header.piloko-social-header .piloko-social-link svg{display:block;width:16px;height:16px;fill:currentColor}
header.piloko-social-header .piloko-social-link:hover{opacity:.7}
header.piloko-social-header .piloko-social-link:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.piloko-public .header.piloko-floating.piloko-social-header{grid-template-columns:auto minmax(0,1fr) auto auto auto}
.piloko-public .header.piloko-floating .piloko-navigation>.piloko-socials{grid-area:1/5}
@media(max-width:760px){
 .piloko-public .header.piloko-floating.piloko-social-header{grid-template-columns:minmax(0,1fr) auto auto auto;column-gap:12px}
 .piloko-public .header.piloko-floating .piloko-navigation>.piloko-socials{grid-area:1/4}
}
@media(max-width:600px){
 header.piloko-social-header .piloko-social-link{width:28px}
 header.top.piloko-social-header{column-gap:12px;padding-left:20px;padding-right:20px}
 header.piloko-social-header:has(>.identity){height:auto;min-height:54px;flex-wrap:wrap;padding:8px 0;gap:6px}
 header.piloko-social-header>.identity+nav{max-width:100%;flex-wrap:wrap}
}

/* Shared studio introduction on the hiring page. */
.piloko-studio-heading{display:flex;align-items:flex-start;gap:18px 32px;max-width:1120px;margin:0 0 26px}
.piloko-studio-heading .h1{flex:1 1 0;min-width:0;margin:0;max-width:14ch!important;font-size:clamp(48px,6.8vw,92px);line-height:1.02;letter-spacing:-.045em}
.piloko-studio-tag{flex:none;margin-top:14px;color:#6c6264;font:500 11px/1.5 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase}
.page .intro.piloko-studio-intro{max-width:65ch;font-size:clamp(18px,2vw,23px);line-height:1.55}
@media(max-width:620px){.piloko-studio-heading{display:block;margin-bottom:24px}.piloko-studio-heading .h1{font-size:clamp(45px,12vw,64px)}.piloko-studio-heading .piloko-studio-tag{display:block;margin-top:16px}.piloko-studio-tag{margin-top:0}}