/* ==========================================================================
   NEZELLO — estilos globais do site público (portado do protótipo)
   Estética dark techno monocromática. Estilos de elemento ficam inline no
   index.php; aqui vão apenas os globais, keyframes e estados dirigidos por JS.
   ========================================================================== */
/* Cor de destaque da identidade (amarelo ácido) — usada só como sinal:
   ao vivo / ativo / agora. Nunca em superfícies grandes nem em títulos. */
:root{
  --nz-acid:#CEDE00;
  --nz-acid-soft:rgba(206,222,0,.12);  /* fundos de chip */
  --nz-acid-line:rgba(206,222,0,.35);  /* bordas */
  --nz-acid-glow:rgba(206,222,0,.45);  /* box-shadow */
  --nz-on-acid:#08080a;                /* texto sobre amarelo */
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:#08080a;color:#f4f2f5;font-family:'Space Grotesk',system-ui,sans-serif;overflow-x:hidden;cursor:none}
::selection{background:var(--nz-acid);color:var(--nz-on-acid)}
/* Touch/sem hover: cursor nativo e some com o cursor custom (ele travaria no centro) */
@media (hover:none),(pointer:coarse){
  body,.nz-track,#nzWave,.nz-tab{cursor:auto}
  [data-cursor]{cursor:auto!important} /* vence o cursor:none inline do index.php */
  #nzRing,#nzDot{display:none!important}
}
a{color:inherit}

@keyframes nz-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.nz-ticker:hover .nz-ticktrack{animation-play-state:paused}
@keyframes nz-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes nz-spin{to{transform:rotate(360deg)}}
@keyframes nz-pulse{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes nz-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.nz-reveal{opacity:0}
.nz-reveal.nz-in{animation:nz-rise .9s cubic-bezier(.2,.7,.2,1) forwards}

::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#08080a}
::-webkit-scrollbar-thumb{background:#26262c;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--nz-acid)}

/* Borda reativa à luz do cursor */
.nz-glow{position:relative}
.nz-glow::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(190px circle at var(--lx,-700px) var(--ly,-700px), rgba(255,255,255,.10), rgba(255,255,255,.03) 50%, rgba(255,255,255,0) 75%);pointer-events:none}
.nz-glow::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(200px circle at var(--lx,-700px) var(--ly,-700px), rgba(206,222,0,.75), rgba(255,255,255,.22) 45%, rgba(255,255,255,0) 72%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:3}

/* Hover de linhas da agenda (substitui style-hover do protótipo) */
.nz-show{transition:background .25s ease,padding .25s ease}
.nz-show:hover{background:rgba(255,255,255,.06);padding-left:18px;padding-right:18px}
/* Hover dos cards de projeto */
.nz-proj{transition:transform .3s ease,border-color .3s ease}
.nz-proj:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.11)}
/* confirmação de envio do formulário de booking */
#nzFormOk[data-show="1"]{display:flex!important;animation:nzOkEntra .45s cubic-bezier(.2,.8,.3,1) both}
@keyframes nzOkEntra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.nz-ok-selo{animation:nzOkSelo .5s cubic-bezier(.2,1.4,.4,1) .06s both}
@keyframes nzOkSelo{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.nz-ok-risco{stroke-dasharray:32;stroke-dashoffset:32;animation:nzOkRisco .5s ease .3s forwards}
@keyframes nzOkRisco{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  #nzFormOk[data-show="1"],.nz-ok-selo,.nz-ok-risco{animation:none}
  .nz-ok-risco{stroke-dashoffset:0}
}

/* card da imprensa quando tem link da matéria */
.nz-press{transition:transform .3s ease,border-color .3s ease}
.nz-press:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.18)}
.nz-press:hover span{color:#fff}
/* Links com hover de cor branca */
.nz-hoverwhite{transition:color .2s,border-color .2s}
.nz-hoverwhite:hover{color:#fff !important;border-color:rgba(255,255,255,.45) !important}

/* Player: linha de faixa ativa/inativa (JS alterna .active) */
.nz-track{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:8px;cursor:none;transition:background .2s;background:transparent}
.nz-track .tnum{font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(244,242,245,.4);width:22px}
.nz-track .ttitle{font-size:14.5px;font-weight:500;color:rgba(244,242,245,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nz-track .tdur{font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(244,242,245,.4)}
.nz-track:hover{background:rgba(255,255,255,.05)}
.nz-track.active{background:rgba(255,255,255,.10)}
.nz-track.active .tnum{color:var(--nz-acid)}
.nz-track.active .ttitle{color:#fff}
/* Faixa sem arquivo de áudio enviado no painel */
.nz-track.no-audio .ttitle,.nz-track.no-audio .tnum,.nz-track.no-audio .tdur{opacity:.45}
.nz-track.no-audio .ttitle::after{content:' · sem áudio';font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em}
#nzWave{cursor:none}

/* Cards de vídeo — tratamento preto e branco padrão (sem gradiente por item).
   A thumbnail entra em escala de cinza e ganha cor suave no hover. */
.nz-vthumb{position:absolute;inset:0;background-color:#111;background-size:cover;background-position:center;
  filter:grayscale(1) contrast(1.08) brightness(.82);transition:filter .45s ease,transform .45s ease}
.nz-vveil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,10,.10) 0%,rgba(8,8,10,.40) 55%,rgba(8,8,10,.82) 100%)}
.nz-vcard:hover .nz-vthumb{filter:grayscale(.15) contrast(1.05) brightness(.95);transform:scale(1.04)}

/* Menu: link da seção visível (JS alterna .nz-cur) ganha um traço fino */
.nz-navlinks a:not(.nz-book){position:relative;transition:color .25s}
.nz-navlinks a:not(.nz-book)::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--nz-acid);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.nz-navlinks a.nz-cur{color:#fff !important}
.nz-navlinks a.nz-cur::after{transform:scaleX(1)}

/* Formulário de booking: foco com anel amarelo suave */
#nzForm input,#nzForm select,#nzForm textarea{transition:border-color .2s,box-shadow .2s}
#nzForm input:focus,#nzForm select:focus,#nzForm textarea:focus{border-color:var(--nz-acid-line) !important;box-shadow:0 0 0 3px var(--nz-acid-soft)}
#nzLgpd{accent-color:var(--nz-acid) !important}

/* Abas de plataforma */
.nz-tab{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;padding:11px 20px;border-radius:100px;cursor:none;transition:all .25s;background:transparent;color:rgba(244,242,245,.6);border:1px solid rgba(255,255,255,.14)}
.nz-tab.active{background:#f4f2f5;color:#08080a;font-weight:600;border-color:#f4f2f5}

/* ==========================================================================
   ANTI-OVERFLOW — colunas de grade podem encolher abaixo do min-content
   (senão iframes/waveform empurram os blocos para fora da viewport).
   Sobrescreve os grid-template-columns inline com minmax(0, …).
   ========================================================================== */
.nz-g2-sobre{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr) !important}
.nz-g2-sets,.nz-g2-contato{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important}
.nz-g2{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.nz-g3{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
.nz-g2-sobre>*,.nz-g2-sets>*,.nz-g2-contato>*,.nz-g2>*,.nz-g3>*{min-width:0;max-width:100%}
.nz-g2-sets iframe,#nzPlatforms iframe,#home img{max-width:100%}
#nzWave{overflow:hidden}
#nzPlatforms,#nzPlatforms *{min-width:0}

/* ==========================================================================
   RESPONSIVO — escalonado (inline styles são sobrescritos com !important)
   ========================================================================== */

/* Tablet largo: grades de 3 colunas viram 2; reduz folgas grandes */
@media (max-width:1100px){
  .nz-g3{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .nz-g2-sobre{gap:44px !important}
  .nz-g2-contato{gap:40px !important}
  .nz-g2-sets{gap:22px !important}
  section{padding-left:28px !important;padding-right:28px !important}
  nav{padding-left:28px !important;padding-right:28px !important}
}

/* Tablet estreito / mobile grande: uma coluna; a foto do hero desce para
   baixo do texto (em vez de sumir) e o menu vira só o botão de booking. */
@media (max-width:820px){
  .nz-navlinks a:not(.nz-book){display:none}
  #home{grid-template-columns:1fr !important;min-height:auto !important;align-items:start !important;padding:108px 20px 40px !important}
  /* Hero: a altura de 88vh do desktop viraria um vão enorme empilhada; aqui a
     imagem se ajusta ao próprio tamanho e fica limitada pela viewport. */
  .nz-hero-img{height:auto !important;margin-top:40px}
  .nz-hero-img img{height:auto !important;width:auto !important;max-width:78% !important;max-height:58vh}
  .nz-g2-sobre,.nz-g2-sets,.nz-g2-contato,.nz-g3,.nz-g2{grid-template-columns:minmax(0,1fr) !important;gap:28px !important}
  .nz-g2-sobre > div:first-child{margin-bottom:20px}
  /* "SOBRE" sai do recuo negativo (encostava na borda da tela) e vira rótulo
     acima da foto; o selo entra para dentro do card pelo mesmo motivo. */
  .nz-sobre-eyebrow{position:static !important;margin-bottom:14px}
  .nz-sobre-badge{right:12px !important;bottom:-16px !important}
  section{padding-top:80px !important;padding-bottom:80px !important;padding-left:20px !important;padding-right:20px !important}
  nav{padding-left:20px !important;padding-right:20px !important}
}

/* Mobile: cada show vira um bloco de 3 linhas — data + país + status em cima,
   cidade e local embaixo. Os 4 filhos são reposicionados por nth-child. */
@media (max-width:640px){
  .nz-show{grid-template-columns:auto 1fr auto !important;gap:10px 12px !important;padding:22px 4px !important;align-items:center !important}
  .nz-show > *:nth-child(1){grid-area:1/1;font-size:16px !important;letter-spacing:.04em}
  .nz-show > *:nth-child(3){grid-area:1/2;justify-self:start;font-size:11px !important}
  .nz-show > *:nth-child(4){grid-area:1/3;justify-self:end;white-space:nowrap;padding:7px 13px !important;font-size:10px !important}
  .nz-show > *:nth-child(2){grid-column:1/-1;grid-row:2}
  .nz-show > *:nth-child(2) > *:first-child{font-size:19px !important}
}

/* Mobile: campos do formulário empilhados */
@media (max-width:560px){
  #nzForm div[style*="gap:14px"]{flex-direction:column !important}
  .nz-hero-stats{gap:24px !important}
  .nz-hero-img img{max-width:86% !important;max-height:52vh}
  nav{padding:14px 18px !important}
}