/* NÖOK · menú del sitio y paso entre categorías.
   Lenguaje de la marca: papel crema, tinta, líneas gruesas de Mondrian y los tres
   colores primarios. El menú es un mapa del sitio: cada bloque es una parte. */
:root{
  --nkm-crema:#FAF5ED;
  --nkm-tinta:#0E0F10;
  --nkm-gris:#5E5850;
  --nkm-azul:#285DA2;
  --nkm-linea:clamp(5px,.6vw,8px);
  --nkm-display:'Montserrat','Arial Black',Arial,sans-serif;
  --nkm-texto:'DM Sans',Arial,Helvetica,sans-serif;
}

/* ---------- Botón "Menú" dentro de la barra de cada página ----------
   Toma el estilo del botón de esa página; esto solo quita lo que el navegador
   le pone a un <button> y que un enlace no tiene. */
:where(button[data-menu-abrir]){font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;line-height:inherit;background:transparent;border:0;padding:0;margin:0;cursor:pointer;-webkit-appearance:none;appearance:none}
html.nkm-abierto{overflow:hidden}

/* Barras de video y propuesta: WhatsApp y Menú juntos */
.nkm-par{display:flex;align-items:center;gap:8px;flex:none}
.wa.wa-menu{background:transparent;color:var(--crema);box-shadow:inset 0 0 0 1.5px var(--crema-tenue)}
.wa.wa-menu:hover{background:var(--crema);color:var(--negro)}

/* ---------- Menú ---------- */
dialog.nkm{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:var(--nkm-crema);color:var(--nkm-tinta);font-family:var(--nkm-texto);font-size:16px;line-height:1.45;
  overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;color-scheme:light;
  clip-path:circle(0% at var(--x,calc(100% - 48px)) var(--y,36px));
  transition:clip-path .65s cubic-bezier(.77,0,.18,1)}
dialog.nkm.abierto{clip-path:circle(150% at var(--x,calc(100% - 48px)) var(--y,36px))}
dialog.nkm::backdrop{background:transparent}
.nkm *{box-sizing:border-box}
.nkm a{color:inherit}
.nkm a:focus-visible,.nkm button:focus-visible{outline:3px solid var(--nkm-azul);outline-offset:3px}

.nkm-hoja{min-height:100%;display:flex;flex-direction:column;gap:clamp(14px,2.4vh,24px);
  padding:calc(16px + env(safe-area-inset-top,0px)) clamp(16px,3vw,32px) calc(16px + env(safe-area-inset-bottom,0px))}
.nkm-top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.nkm-logo{display:block;line-height:0}
.nkm-logo img{height:34px;width:auto;display:block}
.nkm-cerrar{font:800 12px/1 var(--nkm-display);letter-spacing:.18em;text-transform:uppercase;color:var(--nkm-tinta);
  background:transparent;border:2px solid var(--nkm-tinta);border-radius:999px;padding:10px 18px;cursor:pointer}
.nkm-cerrar:hover{background:var(--nkm-tinta);color:var(--nkm-crema)}

/* El mapa: la cuadrícula de tinta se dibuja con el fondo y el espacio entre bloques */
.nkm-mapa{flex:1;display:grid;gap:var(--nkm-linea);background:var(--nkm-tinta);border:var(--nkm-linea) solid var(--nkm-tinta);
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr) clamp(44px,6vw,96px);
  grid-template-rows:auto auto 1fr auto;
  grid-template-areas:"cats video video" "cats prop color" "cats prop color" "pie pie color"}
.nkm-bloque{--nkm-pad:clamp(16px,2.2vw,30px);background:var(--nkm-crema);padding:var(--nkm-pad);min-width:0;margin:0}
.nkm-cats{grid-area:cats;display:flex;flex-direction:column}
.nkm-video{grid-area:video}
.nkm-prop{grid-area:prop}
.nkm-color{grid-area:color;background:var(--acento);min-height:12px}
.nkm-pie{grid-area:pie}

.nkm-tit{margin:0 0 6px;font:800 12px/1.2 var(--nkm-display);letter-spacing:.2em;text-transform:uppercase;color:var(--nkm-gris)}

/* Categorías: como las filas del menú original */
.nkm-lista{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column;justify-content:center}
.nkm-cat{display:grid;grid-template-columns:2.4em minmax(0,1fr) auto;align-items:center;gap:12px;padding:clamp(7px,1.3vh,14px) 0;
  border-bottom:2px solid var(--nkm-tinta);text-decoration:none}
.nkm-lista li:first-child .nkm-cat{border-top:2px solid var(--nkm-tinta)}
.nkm-cat small{font:800 13px/1 var(--nkm-display);letter-spacing:.15em}
.nkm-cat b{font:800 clamp(21px,3.3vw,46px)/1 var(--nkm-display);text-transform:uppercase;letter-spacing:-.01em;hyphens:auto;overflow-wrap:anywhere}
.nkm-cat i{justify-self:end;width:20px;height:20px;background:var(--c);transition:width .3s cubic-bezier(.2,.8,.2,1),transform .2s}
.nkm-cat:hover i,.nkm-cat:focus-visible i{transform:scale(1.35)}

.nkm-otros{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px}
.nkm-otros a{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font:800 13px/1.2 var(--nkm-display);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:6px 0}
.nkm-otros a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}

/* Portafolio de video y propuesta: el sitio y sus secciones */
.nkm-sitio-t{display:flex;flex-direction:column;gap:4px;text-decoration:none}
.nkm-sitio-t b{font:800 clamp(18px,1.9vw,26px)/1.05 var(--nkm-display);text-transform:uppercase;letter-spacing:-.005em}
.nkm-sitio-d{font-size:14px;color:var(--nkm-gris)}
.nkm-sitio-t:hover b{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:3px}
.nkm-hijos{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.nkm-hijos a{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:7px 13px;border:2px solid var(--nkm-tinta);border-radius:999px;
  font:800 11px/1 var(--nkm-display);letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.nkm-hijos small{font:inherit;opacity:.55}
.nkm-hijos a:hover{background:var(--nkm-tinta);color:var(--nkm-crema)}

/* ---------- Estás aquí ----------
   El lugar actual se llena con su color (--mf) mientras el menú se abre, el texto pasa
   a --mt y aparece la etiqueta. Es el único bloque de color dentro del mapa, aparte de
   la franja lateral con el mismo color. */
.nkm-cat[aria-current="page"],.nkm-otros a[aria-current="page"],.nkm-sitio.nkm-actual{
  background:linear-gradient(var(--mf),var(--mf)) left/0% 100% no-repeat var(--nkm-crema);
  transition:background-size .6s cubic-bezier(.2,.8,.2,1) .25s,color .2s .45s}
.nkm.abierto .nkm-cat[aria-current="page"],.nkm.abierto .nkm-otros a[aria-current="page"],.nkm.abierto .nkm-actual{
  background-size:100% 100%;color:var(--mt)}
/* La fila de la categoría llega hasta las líneas del bloque */
.nkm-cat[aria-current="page"]{margin-inline:calc(-1 * var(--nkm-pad));padding-inline:var(--nkm-pad)}
.nkm-otros a[aria-current="page"]{padding:6px 6px 6px 14px;border-radius:999px;gap:12px}
.nkm-otros a[aria-current="page"]:hover{text-decoration:none}
.nkm-actual .nkm-sitio-d{color:inherit;opacity:.85}
.nkm-actual .nkm-hijos a{border-color:currentColor}
.nkm-actual .nkm-hijos a:hover{background:var(--mt);color:var(--mf)}
.nkm-aqui{flex:none;justify-self:end;align-self:center;font:800 11px/1 var(--nkm-display);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  color:var(--mf);background:var(--mt);border-radius:999px;padding:8px 12px;opacity:0;transform:scale(.6);
  transition:opacity .2s .55s,transform .35s cubic-bezier(.3,1.6,.5,1) .55s}
.nkm.abierto .nkm-aqui{opacity:1;transform:none}
.nkm-sitio-t .nkm-aqui{align-self:flex-start;margin-bottom:10px}

.nkm-pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;font-size:14px}
.nkm-pie p{margin:0}
.nkm-pie p a{text-underline-offset:3px}
.nkm-texto{font:inherit;color:inherit;background:none;border:0;padding:6px 0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.nkm-cta{margin-left:auto;font:800 12px/1 var(--nkm-display);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  color:var(--nkm-crema);background:var(--nkm-tinta);border-radius:999px;padding:15px 24px}
.nkm .nkm-cta{color:var(--nkm-crema)}
.nkm-cta:hover{background:var(--nkm-azul)}

@media (max-width:760px){
  .nkm-mapa{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"color" "cats" "video" "prop" "pie"}
  .nkm-color{min-height:10px}
  .nkm-lista{justify-content:flex-start}
  .nkm-cat{grid-template-columns:2em minmax(0,1fr) auto;gap:6px 10px}
  .nkm-cat b{font-size:clamp(17px,5.4vw,30px)}
  /* En el celular la etiqueta va bajo el nombre para no apretarlo */
  .nkm-cat .nkm-aqui{grid-column:2;justify-self:start}
  .nkm-cta{margin-left:0}
}

/* ---------- Botón flotante (barras que se van con el scroll) ---------- */
.nkm-flota{position:fixed;z-index:45;top:calc(12px + env(safe-area-inset-top,0px));right:calc(14px + env(safe-area-inset-right,0px));
  display:inline-flex;align-items:center;gap:10px;font:800 11px/1 var(--nkm-display);letter-spacing:.18em;text-transform:uppercase;
  color:var(--nkm-crema);background:var(--nkm-tinta);border:0;border-radius:999px;padding:12px 16px;cursor:pointer;
  box-shadow:0 0 0 2px var(--nkm-crema)}
.nkm-flota i{width:22px;height:7px;background:linear-gradient(90deg,#C2192E 0 33%,#ECC328 33% 66%,#285DA2 66%)}
.nkm-flota:hover{background:var(--nkm-azul)}
.nkm-flota:focus-visible{outline:3px solid #ECC328;outline-offset:3px}

/* ---------- Siguiente categoría (al final de cada categoría) ---------- */
.nks{position:relative;z-index:1;display:grid;gap:16px;padding:clamp(48px,9vh,110px) clamp(16px,4vw,48px) clamp(20px,4vh,40px);font-family:var(--nkm-texto)}
.nks-sig{display:grid;gap:clamp(14px,2.4vh,24px);text-decoration:none;color:var(--fg);
  background:var(--franja) top left/100% clamp(8px,.9vw,12px) no-repeat,var(--bg);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 16%,transparent);
  padding:clamp(28px,4vw,52px) clamp(20px,3.4vw,44px) clamp(22px,3vw,40px)}
/* Las páginas fijan el color de sus enlaces con #v-…; el color va en los hijos, que esas reglas no tocan. */
.nks-top,.nks-nombre,.nks-frase{color:var(--fg)}
.nks-top{display:flex;justify-content:space-between;align-items:center;gap:12px;font:800 12px/1 var(--nkm-display);letter-spacing:.2em;text-transform:uppercase}
.nks-num{display:inline-flex;align-items:center;gap:10px}
.nks-num i{width:16px;height:16px;background:var(--franja)}
.nks-nombre{font:900 clamp(38px,8.5vw,120px)/.92 var(--nkm-display);text-transform:uppercase;letter-spacing:-.02em;text-wrap:balance;overflow-wrap:anywhere;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.nks-frase{font-size:clamp(16px,1.6vw,19px);line-height:1.45;max-width:46ch;opacity:.85}
.nks-sig:hover .nks-nombre,.nks-sig:focus-visible .nks-nombre{transform:translateX(clamp(6px,1vw,14px))}
.nks-sig:focus-visible{outline:3px solid var(--fg);outline-offset:4px}
.nks-ant{margin:0;font-size:15px}
.nks-ant a{color:inherit;font-weight:700;text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){
  dialog.nkm,.nkm-cat i,.nks-nombre,.nkm-aqui,.nkm-cat[aria-current="page"],.nkm-otros a[aria-current="page"],.nkm-sitio.nkm-actual{transition:none}
}