/* ===========================================================================
   machado.group — GlassNav (o NavBar default, v3)
   ---------------------------------------------------------------------------
   O vidro é UMA peça. A silhueta — pastilhas unidas por filetes côncavos — é
   calculada das células vivas e entra como `clip-path: path()` num único
   elemento que carrega tinta E blur, logo os dois coincidem por construção.
   Nada de filtro SVG no caminho: `backdrop-filter` não sobrevive dentro de um
   elemento com `filter` (o filtro cria um backdrop root e o blur deixa de ver o
   que está atrás) — era essa a origem da disparidade no vão, quando a tinta
   gooey e o blur eram duas camadas com silhuetas diferentes.
   As folgas: --gnav-gap (vão) · --gnav-r (raio) · --gnav-neck (raio do filete,
   menor = pescoço mais cavado) · --gnav-tint · --gnav-blur. A geometria mora no
   JS porque depende de medição (navigation/GlassNav.jsx); estas classes são o
   canônico visual. Ref: refs/index.md — nav "anima" (uploads 22.54–22.58).
   =========================================================================== */
.gnav-bar{position:relative;z-index:50;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-5)}
.gnav-bar--fixed{position:fixed;top:0;left:0;right:0;z-index:100}
.gnav{--gnav-h:44px;--gnav-gap:5px;--gnav-r:11px;--gnav-neck:7px;--gnav-tint:.05;--gnav-blur:7px;position:relative;display:inline-flex;animation:gnav-in .6s var(--ease-out) backwards}
.gnav--contact{animation-delay:.12s}
.gnav--contact .gnav__cell--gap{margin-left:14px}
@keyframes gnav-in{from{opacity:0;transform:translateY(-10px)}}
/* ---- o vidro: uma peça só — tinta e blur no mesmo recorte --------------- */
.gnav__glass{position:absolute;inset:0;z-index:0;pointer-events:none;background:color-mix(in srgb,var(--ink) calc(var(--gnav-tint) * 100%),transparent);backdrop-filter:blur(var(--gnav-blur)) saturate(140%);-webkit-backdrop-filter:blur(var(--gnav-blur)) saturate(140%);transition:background var(--dur-base) var(--ease-standard)}
.gnav:hover .gnav__glass{background:color-mix(in srgb,var(--ink) calc((var(--gnav-tint) + .04) * 100%),transparent)}
/* no light o saturate marca borda no paper — sai; e a tinta precisa de mais 40%
   para o mesmo peso sobre o paper (não é token de tema, é folga do componente) */
[data-theme="light"] .gnav__glass{background:color-mix(in srgb,var(--ink) calc(var(--gnav-tint) * 140%),transparent);backdrop-filter:blur(var(--gnav-blur));-webkit-backdrop-filter:blur(var(--gnav-blur))}
[data-theme="light"] .gnav:hover .gnav__glass{background:color-mix(in srgb,var(--ink) calc((var(--gnav-tint) + .03) * 140%),transparent)}
.gnav__row{display:flex;align-items:stretch;height:var(--gnav-h)}
.gnav__row--live{position:relative;z-index:1}
/* ---- células ----------------------------------------------------------- */
.gnav__cell{position:relative;display:inline-flex;align-items:center;padding:0 16px;font-family:var(--font-mono);font-size:var(--fs-label);text-transform:uppercase;letter-spacing:var(--tracking-wide);font-weight:var(--weight-medium);color:var(--ink-secondary);white-space:nowrap}
.gnav__cell--gap{margin-left:var(--gnav-gap)}
.gnav__cell>a,.gnav__cell>button{display:inline-flex;align-items:center;align-self:stretch;margin:0 -16px;padding:0 16px;background:none;border:none;cursor:pointer;font:inherit;text-transform:inherit;color:inherit;text-decoration:none;transition:var(--transition-colors)}
.gnav__cell>button{letter-spacing:inherit}
.gnav__cell>a:hover,.gnav__cell>button:hover{color:var(--ink)}
.gnav__cell>a:focus-visible,.gnav__cell>button:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--gnav-r)}
.gnav__link[aria-current="page"]{color:var(--ink)}
.gnav__cell--brand{color:var(--ink)}
.gnav__cell--icon{width:var(--gnav-h);padding:0;justify-content:center;font-weight:var(--weight-regular);font-size:1.25em;line-height:1}
/* ---- slots colapsáveis (desktop): largura determinística em ch (mono), stagger ---- */
.gnav__slot{display:block;flex:none;overflow:hidden;width:0;height:var(--gnav-h);transition:width .5s var(--ease-out) var(--gnav-d,0s);font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--tracking-wide)}
.gnav__clip{display:flex;width:max-content;height:100%}
.gnav__slot .gnav__cell{opacity:0;transition:opacity .35s var(--ease-standard) calc(var(--gnav-d,0s) + .08s)}
.gnav--open .gnav__slot{width:var(--gnav-w,max-content)}
.gnav--open .gnav__slot .gnav__cell{opacity:1}
/* ---- cluster CONTACT: repouso conectado (pescoço), hover separa --------- */
.gnav--contact .gnav__cell--icon{transform:translateX(-10px);transition:transform var(--dur-base) var(--ease-out)}
.gnav--contact:hover .gnav__cell--icon{transform:none}
.gnav--contact:hover .gnav__cell{color:var(--ink)}
.gnav--contact:active .gnav__row--live{transform:scale(.98)}
.gnav__hit{cursor:pointer;text-decoration:none}
.gnav__hit:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--gnav-r)}
/* ---- sheet mobile: pills soltas empilhadas, entrada em cascata ---------- */
.gnav__sheet{position:absolute;top:calc(100% + 10px);left:0;display:none;flex-direction:column;align-items:flex-start;gap:10px;z-index:1}
.gnav__sheet-item{display:inline-flex;align-items:center;height:var(--gnav-h);padding:0 18px;border-radius:var(--gnav-r);font-family:var(--font-mono);font-size:var(--fs-label);text-transform:uppercase;letter-spacing:var(--tracking-wide);font-weight:var(--weight-medium);color:var(--ink);text-decoration:none;background:color-mix(in srgb,var(--ink) 13%,transparent);backdrop-filter:blur(var(--gnav-blur)) saturate(140%);-webkit-backdrop-filter:blur(var(--gnav-blur)) saturate(140%);opacity:0;transform:translateY(-8px);visibility:hidden;transition:opacity .4s var(--ease-out) var(--gnav-d,0s),transform .4s var(--ease-out) var(--gnav-d,0s),visibility 0s linear calc(var(--gnav-d,0s) + .4s)}
[data-theme="light"] .gnav__sheet-item{background:color-mix(in srgb,var(--ink) 9%,transparent)}
.gnav--open .gnav__sheet-item{opacity:1;transform:none;visibility:visible;transition:opacity .4s var(--ease-out) var(--gnav-d,0s),transform .4s var(--ease-out) var(--gnav-d,0s),visibility 0s linear var(--gnav-d,0s)}
.gnav__sheet-item:hover{background:color-mix(in srgb,var(--ink) 18%,transparent)}
.gnav__sheet-item:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
/* o contato mora na barra; abaixo de 480px muda-se para o sheet — ver a mq */
.gnav__sheet-item--contact{display:none;gap:12px}
.gnav__sheet-item--contact i{font-style:normal;font-size:1.25em;line-height:1;color:var(--ink-tertiary)}
/* ---- mobile ------------------------------------------------------------- */
@media (max-width:760px){
.gnav-bar{padding:var(--space-3) var(--space-4)}
.gnav__slot{display:none}
.gnav__sheet{display:flex}
.gnav__cell{padding:0 13px}
.gnav__cell>a,.gnav__cell>button{margin:0 -13px;padding:0 13px}
.gnav__cell--icon{padding:0}
}
/* ---- ≪480px: o cluster de CONTACT não cabe -----------------------------
   `.gnav-bar` é flex sem wrap com células em nowrap: quando a soma dos dois
   clusters passa da viewport, o da direita SAI DA TELA em vez de refluir.
   Medido num consumidor com `contactLabel="Drop some lines"`: 19px fora a
   375px, 34px fora a 360px — orçamento intrínseco de 414px no padding mobile.
   Em vez de terceirizar a conta de caracteres para o consumidor, o contato
   passa a última linha do sheet.
   ----------------------------------------------------------------------- */
@media (max-width:480px){
.gnav--contact{display:none}
.gnav__sheet-item--contact{display:inline-flex}
}
@media (prefers-reduced-motion:reduce){
.gnav{animation:none}
.gnav__slot,.gnav__slot .gnav__cell,.gnav__sheet-item,.gnav--contact .gnav__cell--icon{transition:none}
}