/* ==========================================================================
   KINOVA PRODUTORA — PÁGINAS INTERNAS EM VIDRO
   --------------------------------------------------------------------------
   Usada por: entrar.html, meus-projetos.html, projeto.html, painel.html
   e privacidade.html.

   REGRA QUE GOVERNA ESTE ARQUIVO: os nomes das classes são os mesmos de
   antes. O JavaScript do painel monta as listas, os itens e as entregas
   escrevendo esses nomes na mão — se um nome mudar aqui sem mudar lá, a tela
   aparece sem estilo. Por isso aqui só trocou a ROUPA. Nenhuma lógica, nenhum
   formulário, nenhum upload, nenhuma permissão foi tocada.

   As folhas antigas (style.css e painel.css) continuam na pasta e não são
   mais carregadas por estas páginas. Ficaram para poder voltar atrás.
   ========================================================================== */

:root{
  --bg:        #0B1114;
  --bg-2:      #101A1F;
  --linha:     rgba(255,255,255,.10);
  --linha-2:   rgba(255,255,255,.06);
  --petroleo:  #222F37;
  --petroleo-2:#2E4250;
  --acento:    #8FB4C4;
  --acento-2:  #C3DCE7;
  --branco:    #FFFFFF;
  --texto:     #E7EDF0;
  --mudo:      #93A5AF;
  --erro:      #E06B5E;
  --ok:        #5FBF8A;
  --f-display: 'Archivo','Helvetica Neue',Arial,sans-serif;
  --f-texto:   'Inter','Helvetica Neue',Arial,sans-serif;
  --grao: .022;
  --ease: cubic-bezier(.22,1,.36,1);
  --mola: cubic-bezier(.34,1.32,.5,1);
  --topo-altura: 74px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--f-texto); background:#05090B; color:var(--texto);
  font-weight:300; line-height:1.7; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
::selection{ background:var(--acento); color:var(--bg); }
h1,h2,h3{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  letter-spacing:-.02em; line-height:1.05; color:var(--branco);
}
:focus-visible{ outline:2px solid var(--acento-2); outline-offset:3px; }

.shell{ width:100%; max-width:1440px; margin:0 auto; padding:0 clamp(16px,3vw,40px); }

/* ==========================================================================
   O QUE FICA ATRÁS DO VIDRO
   --------------------------------------------------------------------------
   Duas situações diferentes, de propósito:

   .palco  — telas do CLIENTE. O filme roda atrás, como na home. É a primeira
             coisa que ele vê ao entrar e é onde o impacto importa.

   .calmo  — o PAINEL. Ferramenta de trabalho usada por horas: vídeo ali
             cansaria e competiria com formulário. Fundo suave, com o símbolo
             da marca de água, que já dá ao vidro o que refratar.
   ========================================================================== */
.palco{ position:fixed; inset:0; z-index:0; overflow:hidden; background:#05090B; }
.palco .hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.palco__escuro{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(5,9,11,.35) 0%, rgba(5,9,11,.72) 65%, rgba(5,9,11,.9) 100%),
    linear-gradient(to bottom, rgba(5,9,11,.55), rgba(5,9,11,.5) 45%, rgba(5,9,11,.85));
}
.palco__grade{
  position:absolute; inset:0; opacity:.5;
  background-image:repeating-linear-gradient(to bottom, rgba(255,255,255,.02) 0 1px, transparent 1px 3px);
}

body.calmo{
  background:
    radial-gradient(1100px 700px at 18% -10%, rgba(46,66,80,.42), transparent 65%),
    radial-gradient(900px 600px at 92% 8%, rgba(143,180,196,.10), transparent 62%),
    #070C0F;
  background-attachment:fixed;
}
body.calmo::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:url("../assets/img/logo/simbolo-branco.png") no-repeat;
  background-position:right -5% bottom -12%;
  background-size:min(46vw,620px);
  opacity:.045;
}

/* O conteúdo precisa ficar acima do fundo fixo. */
.corpo, .topo, .entrada, .legal{ position:relative; z-index:1; }

/* Granulação de cinema, igual à da home. */
.grao{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:var(--grao); mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23r)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
@media (min-resolution:2dppx){ .grao{ background-size:150px 150px; opacity:calc(var(--grao) * 1.25); } }

/* ==========================================================================
   VIDRO
   --------------------------------------------------------------------------
   Na home existe uma classe .vl que eu aplico onde quero. Aqui não dá: quem
   escreve a marcação das listas é o JavaScript do painel, e ele só conhece os
   nomes antigos. Então o vidro vem pelos próprios nomes das peças.

   São as mesmas quatro camadas da home: desfoque com saturação, borda mais
   clara que o miolo, brilho especular e espessura.
   ========================================================================== */
.topo,
.abas,
.cartao,
.item,
.modal__caixa,
.entrada__caixa,
.entrega,
.projeto-capa,
.aviso.is-on,
.legal__caixa{
  position:relative; isolation:isolate;
  background:linear-gradient(150deg,
    rgba(255,255,255,.11) 0%,
    rgba(255,255,255,.04) 42%,
    rgba(143,180,196,.09) 100%);
  -webkit-backdrop-filter:blur(20px) saturate(180%) brightness(1.06);
          backdrop-filter:blur(20px) saturate(180%) brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(255,255,255,.11),
    0 14px 36px rgba(0,0,0,.38);
}

/* Sem suporte a desfoque o vidro vira fundo sólido: texto por cima de vídeo
   sem nada atrás seria ilegível. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topo, .abas, .cartao, .item, .modal__caixa, .entrada__caixa,
  .entrega, .projeto-capa, .aviso.is-on, .legal__caixa{ background:rgba(16,26,31,.95); }
}

/* ==========================================================================
   BARRA DE CIMA — flutuante
   ========================================================================== */
.topo{
  position:fixed; top:14px; left:14px; right:14px; z-index:60;
  border-radius:100px; padding:11px 10px 11px 20px;
}
.topo__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.topo__esq{ display:flex; align-items:center; gap:16px; min-width:0; }
.topo__logo img{ height:22px; width:auto; display:block; }
.topo__quem{
  font-size:.78rem; color:var(--mudo); display:flex; align-items:center; gap:10px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topo__quem strong{ color:var(--branco); font-weight:500; }
.topo__acoes{ display:flex; align-items:center; gap:4px; flex:0 0 auto; }

/* Empurra o conteúdo para baixo da barra flutuante. */
.corpo{ padding:calc(var(--topo-altura) + 26px) 0 90px; }

.selo{
  display:inline-block; padding:4px 12px; border-radius:100px;
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--acento-2); background:rgba(143,180,196,.14);
  border:1px solid rgba(143,180,196,.28);
}

/* ==========================================================================
   PÍLULAS — o vocabulário de botão do site inteiro
   ========================================================================== */
.link-topo, .mini, .btn, .aba, .baixar, .entrada__voltar{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border-radius:100px; white-space:nowrap; cursor:pointer;
  border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  -webkit-backdrop-filter:blur(10px) saturate(150%);
          backdrop-filter:blur(10px) saturate(150%);
  color:rgba(231,237,240,.86);
  transition:color .25s var(--ease), background .25s var(--ease),
             border-color .25s var(--ease), transform .2s var(--ease);
}
.link-topo:hover, .mini:hover, .btn:hover, .aba:hover, .baixar:hover, .entrada__voltar:hover{
  color:var(--branco); border-color:rgba(255,255,255,.26); transform:translateY(-1px);
}
.link-topo:active, .mini:active, .btn:active, .aba:active, .baixar:active{ transform:scale(.97); }

.link-topo{ padding:9px 17px; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; }
.mini{ padding:8px 15px; font-size:.66rem; letter-spacing:.1em; }
.btn{ padding:15px 30px; font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.btn--bloco{ width:100%; }

/* Ação principal: branca cheia, como na home. */
.btn--solid, .mini--forte, .baixar{
  color:var(--bg); border-color:transparent;
  background:linear-gradient(150deg, rgba(255,255,255,.96), rgba(215,232,240,.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 24px rgba(0,0,0,.34);
}
.btn--solid:hover, .mini--forte:hover, .baixar:hover{ color:var(--bg); border-color:transparent; }
.btn--line{ background:transparent; }
.mini--perigo{ color:#F0938A; border-color:rgba(224,107,94,.34); }
.mini--perigo:hover{ color:#fff; background:rgba(224,107,94,.22); border-color:rgba(224,107,94,.5); }
.mini--seta{ padding:8px 13px; }
.btn[disabled], .mini[disabled], .baixar[disabled]{ opacity:.45; pointer-events:none; }

.baixar{ padding:11px 20px; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; }
.baixar__seta{ font-size:.9rem; }

/* ==========================================================================
   ABAS FLUTUANTES
   ========================================================================== */
.abas{
  position:sticky; top:calc(var(--topo-altura) + 12px); z-index:40;
  display:flex; gap:3px; padding:6px; border-radius:100px;
  width:max-content; max-width:100%; margin:0 auto 30px;
  overflow-x:auto; scrollbar-width:none;
}
.abas::-webkit-scrollbar{ display:none; }
.aba{
  padding:10px 18px; font-size:.67rem; letter-spacing:.14em; text-transform:uppercase;
  flex:0 0 auto;
}
.aba.is-on{
  color:var(--bg); border-color:transparent;
  background:linear-gradient(150deg, rgba(255,255,255,.96), rgba(215,232,240,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 20px rgba(0,0,0,.36);
}
.aba.is-on:hover{ color:var(--bg); }

/* ==========================================================================
   CARTÕES E SEÇÕES
   ========================================================================== */
.cartao{ border-radius:26px; padding:30px 28px; }
.cartao__titulo{ font-size:1.02rem; margin-bottom:22px; }

.painel-grid{ display:grid; grid-template-columns:400px 1fr; gap:34px; align-items:start; }

.secao-topo{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  margin-bottom:18px; flex-wrap:wrap;
}
.secao-titulo{ font-size:1.3rem; }
.secao-sub{ font-size:.84rem; color:var(--mudo); margin-top:5px; }

/* ==========================================================================
   LISTAS E ITENS
   --------------------------------------------------------------------------
   Antes eram linhas separadas por um risco. Agora cada uma é uma placa de
   vidro solta — as colunas do grid continuam idênticas, porque o JavaScript
   conta com elas para encaixar capa, texto e botões.
   ========================================================================== */
.lista{ display:grid; gap:8px; }
.lista--salvando{ opacity:.55; pointer-events:none; }

/* Linha em FLEX, não em grid de colunas fixas — e isto conserta um defeito
   que já existia antes deste redesenho.

   O punho de arrastar (⠿) é retirado do HTML em duas situações reais: quando
   quem está logado não tem permissão para reordenar (Editor, Cliente) e
   quando a biblioteca de arrastar não carrega. Só que a classe
   .item--arrastavel continua na linha. Com colunas fixas, some um filho e
   todo o resto escorrega uma casa: a capa ia parar na faixa de 26px do punho
   e o texto era espremido em 64px.

   Em flex, cada peça pede o seu tamanho e a falta de uma não desloca as
   outras. Serve para trabalho, projeto e marca, com ou sem punho, com ou sem
   capa. */
.item{
  display:flex; align-items:center; gap:16px;
  border-radius:18px; padding:14px 18px;
  transition:transform .2s var(--ease), box-shadow .25s var(--ease);
}
a.item:hover{ transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.4),
  inset 0 0 0 1px rgba(255,255,255,.16), 0 18px 40px rgba(0,0,0,.46); }
.item__arrasta{ flex:0 0 auto; }
/* O bloco de texto é o único filho SEM ATRIBUTO class — por isso :not([class]).
   Escrever :not(.item__acoes) foi o erro que esticou a caixa da logo: ela
   também é uma <div>, então casava com a regra e crescia até ocupar a linha. */
.item > div:not([class]){ flex:1 1 auto; min-width:0; }
.item__acoes{ margin-left:auto; }
.item--fantasma{ opacity:.35; }
.item--fantasma *{ visibility:hidden; }

.item__arrasta{
  background:none; border:0; padding:6px 2px; line-height:1;
  font-size:1rem; color:#5B6E7B; cursor:grab;
  touch-action:none;              /* no celular o dedo arrasta em vez de rolar */
  transition:color .2s;
}
.item__arrasta:hover{ color:var(--acento); }
.item__arrasta:active{ cursor:grabbing; }
.item__arrasta:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }

/* Miniaturas: tamanho travado em pixel e overflow escondido.

   Só "max-width:100%" não basta. A caixa da logo era um grid, e porcentagem
   de altura dentro de grid nem sempre encontra uma altura definida para se
   medir — o navegador então trata como se não houvesse limite, e um PNG alto
   escapa da caixa. Com flex, medida fixa e overflow:hidden, nenhuma logo
   consegue vazar, seja ela quadrada, deitada ou em pé. */
.item__capa{
  flex:0 0 64px; width:64px; aspect-ratio:2/3; object-fit:cover; border-radius:10px;
  background:var(--petroleo); border:1px solid var(--linha-2);
}
.item__logo{
  flex:0 0 64px; width:64px; height:44px; overflow:hidden; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.05); border:1px solid var(--linha-2); padding:6px;
}
.item__logo img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; filter:brightness(1.8);
}
/* o "sem logo" é um <span> DENTRO da caixa acima: só preenche, não vira caixa */
.item__semlogo{
  display:grid; place-items:center; width:100%; height:100%;
  font-size:.58rem; line-height:1.2; text-align:center; color:var(--mudo);
}
.item__nome{ font-weight:500; color:var(--branco); font-size:.95rem; line-height:1.3; }
.item__meta{ font-size:.76rem; color:var(--mudo); margin-top:3px; }
.item__acoes{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; }

.carregando, .vazio{
  padding:26px 4px; font-size:.88rem; color:var(--mudo); text-align:center;
}

.etiqueta{
  display:inline-block; padding:4px 11px; border-radius:100px;
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--linha);
}
.etiqueta--ok{ color:var(--ok); border-color:rgba(95,191,138,.36); background:rgba(95,191,138,.12); }
.etiqueta--espera{ color:var(--acento-2); border-color:rgba(143,180,196,.34); background:rgba(143,180,196,.12); }
.etiqueta--rascunho{ color:var(--mudo); background:rgba(255,255,255,.05); }

/* ==========================================================================
   FORMULÁRIOS
   ========================================================================== */
.campo{ margin-bottom:16px; }
.campo label{
  display:block; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mudo); margin-bottom:7px;
}
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo input[type="url"],
.campo input[type="number"],
.campo input[type="file"],
.campo select,
.campo textarea{
  width:100%; padding:13px 16px; border-radius:14px;
  background:rgba(255,255,255,.05); border:1px solid var(--linha);
  color:var(--branco); font-size:.94rem; outline:none;
  transition:border-color .25s, background .25s, box-shadow .25s;
}
.campo textarea{ min-height:104px; resize:vertical; line-height:1.6; }
.campo select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%238FB4C4' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; }
.campo input:focus, .campo select:focus, .campo textarea:focus{
  border-color:var(--acento); background:rgba(255,255,255,.08);
  box-shadow:0 0 0 3px rgba(143,180,196,.14);
}
.campo input[type="file"]{ padding:11px 14px; font-size:.84rem; color:var(--mudo); cursor:pointer; }
.campo input[type="file"]::file-selector-button{
  margin-right:12px; padding:7px 14px; border-radius:100px; cursor:pointer;
  border:1px solid var(--linha); background:rgba(255,255,255,.08); color:var(--texto);
  font:inherit; font-size:.76rem;
}
.campo input[type="checkbox"]{ width:auto; accent-color:var(--acento); }
.campo__dica{ font-size:.74rem; color:var(--mudo); margin-top:7px; line-height:1.5; }

/* ---------- Escolher pessoas: busca + fichas ---------- */
.escolher{ position:relative; }
.escolher__lista{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:30;
  border-radius:16px; overflow:hidden; padding:5px;
  background:rgba(16,26,31,.97); border:1px solid var(--linha);
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 20px 44px rgba(0,0,0,.5);
  max-height:240px; overflow-y:auto;
}
.escolher__op{
  display:block; width:100%; text-align:left; padding:10px 13px; border-radius:11px;
  font-size:.85rem; color:var(--texto); transition:background .18s;
}
.escolher__op:hover{ background:rgba(255,255,255,.09); color:var(--branco); }
.escolher__nada{ padding:11px 13px; font-size:.8rem; color:var(--mudo); }

.fichas{ display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }
.fichas__vazio{ font-size:.78rem; color:var(--mudo); font-style:italic; }
.ficha{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 8px 7px 15px; border-radius:100px; font-size:.82rem; color:var(--branco);
  background:rgba(143,180,196,.16); border:1px solid rgba(143,180,196,.3);
}
.ficha__x{
  width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  font-size:1rem; line-height:1; color:var(--acento-2);
  background:rgba(255,255,255,.08); transition:background .2s, color .2s;
}
.ficha__x:hover{ background:var(--erro); color:#fff; }
.linha-campos{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ==========================================================================
   AVISOS
   ========================================================================== */
.aviso{ display:none; }
.aviso.is-on{
  display:block; padding:14px 18px; margin-bottom:20px; border-radius:16px;
  font-size:.87rem; line-height:1.5;
  border-left:3px solid var(--acento);
}
.aviso--erro{ border-left-color:var(--erro); }
.aviso--ok{ border-left-color:var(--ok); }

/* ==========================================================================
   CAIXA DE CONFIRMAÇÃO
   ========================================================================== */
.modal{
  position:fixed; inset:0; z-index:300; display:none; place-items:center; padding:24px;
  background:rgba(5,9,11,.55);
  -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);
}
.modal.is-on{ display:grid; }
.modal__caixa{
  width:100%; max-width:430px; padding:34px 30px; border-radius:26px;
  animation:caixa-entra .45s var(--mola) both;
}
@keyframes caixa-entra{ from{ opacity:0; transform:scale(.92) translateY(12px); } to{ opacity:1; transform:none; } }
.modal__titulo{ font-size:1.05rem; margin-bottom:12px; }
.modal__texto{ font-size:.9rem; color:var(--mudo); line-height:1.6; }
.modal__acoes{ display:flex; gap:10px; margin-top:26px; justify-content:flex-end; flex-wrap:wrap; }

/* ==========================================================================
   ENTRAR — a porta de entrada do cliente
   ========================================================================== */
.entrada{
  min-height:100vh; min-height:100svh;
  display:grid; place-items:center; padding:40px 20px;
}
.entrada__mark{ display:none; }   /* o palco já traz a marca d'água */
.entrada__caixa{
  width:100%; max-width:430px; padding:42px 36px; border-radius:30px; text-align:center;
  animation:caixa-entra .55s var(--mola) both;
}
.entrada__logo{ height:26px; width:auto; margin:0 auto 30px; }
.entrada__titulo{ font-size:1.5rem; }
.entrada__sub{ font-size:.86rem; color:var(--mudo); margin:10px 0 26px; line-height:1.55; }
.entrada__caixa .campo{ text-align:left; }
.entrada__rodape{
  display:flex; justify-content:center; gap:22px; margin-top:20px;
  font-size:.8rem; color:var(--mudo); flex-wrap:wrap;
}
.entrada__rodape a:hover{ color:var(--acento-2); }
.entrada__voltar{
  margin-top:26px; padding:10px 20px; font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase;
}
.entrada__legal{ font-size:.72rem; color:var(--mudo); margin-top:20px; line-height:1.6; }
.entrada__legal a{ color:var(--acento-2); text-decoration:underline; text-underline-offset:3px; }

/* Botões de entrar com Google e companhia */
.social{ display:none; }
.social.is-on{ display:block; margin-bottom:6px; }
.social__btn{
  position:relative; width:100%;
  display:flex; align-items:center; justify-content:center;
  padding:13px 46px; margin-bottom:9px; border-radius:100px;
  background:rgba(255,255,255,.06); border:1px solid var(--linha);
  color:var(--branco); font-size:.88rem; font-weight:500; cursor:pointer;
  transition:background .25s, border-color .25s;
}
.social__btn:hover{ background:rgba(255,255,255,.1); border-color:var(--acento); }
.social__btn[disabled]{ opacity:.55; pointer-events:none; }
.social__btn svg{
  position:absolute; left:20px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; display:block;
}
.social__ou{
  display:flex; align-items:center; gap:14px; margin:18px 0 16px;
  font-size:.63rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mudo);
}
.social__ou::before, .social__ou::after{ content:''; flex:1; height:1px; background:var(--linha-2); }

/* ==========================================================================
   VAGAS DE MÍDIA — aba Site do painel
   ========================================================================== */
.vaga{
  display:grid; grid-template-columns:180px 1fr; gap:22px;
  padding:22px 0; border-top:1px solid var(--linha-2);
}
.vaga:first-child{ border-top:0; padding-top:0; }
.vaga__titulo{ font-size:.88rem; color:var(--branco); font-weight:500; }
.vaga__desc{ font-size:.76rem; color:var(--mudo); margin-top:5px; line-height:1.5; }
.vaga__previa{
  width:100%; max-height:180px; object-fit:cover; border-radius:14px;
  border:1px solid var(--linha-2); background:rgba(255,255,255,.04);
}
.vaga__previa--vazia{
  display:grid; place-items:center; min-height:96px;
  border:1px dashed var(--linha); font-size:.76rem; color:var(--mudo);
}
.vaga__arquivo{ margin-top:12px; }
.vaga__dica{ font-size:.72rem; color:var(--mudo); margin-top:8px; }
.vaga__estado{ font-size:.76rem; color:var(--acento-2); margin-top:8px; }
.vaga__estado--erro{ color:var(--erro); }

/* ==========================================================================
   PROJETO DO CLIENTE
   ========================================================================== */
.projeto-capa{ border-radius:26px; padding:30px 28px; margin-bottom:22px; }
.projeto-capa__titulo{ font-size:clamp(1.4rem,3vw,2rem); }
.projeto-capa__status{ margin-top:12px; }
.projeto-capa__desc{ font-size:.92rem; color:rgba(231,237,240,.8); margin-top:16px; line-height:1.65; }

.entregas{ display:grid; gap:10px; }
.entrega{ border-radius:20px; padding:20px 22px; }
.entrega__cabeca{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.entrega__titulo{ font-size:.95rem; color:var(--branco); font-weight:500; }
.entrega__obs{ font-size:.78rem; color:var(--mudo); margin-top:5px; }
.entrega__player{
  margin-top:16px; border-radius:14px; overflow:hidden; aspect-ratio:16/9; background:#000;
}
.entrega__player iframe{ width:100%; height:100%; border:0; display:block; }

/* ==========================================================================
   PÁGINA DE PRIVACIDADE
   ========================================================================== */
.legal{ padding:calc(var(--topo-altura) + 40px) 0 90px; }
/* Linha de leitura curta. Texto jurídico atravessando 1300px de tela ninguém
   consegue acompanhar — o olho perde onde estava ao voltar para a esquerda. */
.legal__topo, .legal__corpo{ max-width:860px; margin-left:auto; margin-right:auto; }
.legal__caixa{
  max-width:860px; margin:0 auto; border-radius:30px; padding:44px clamp(22px,4vw,52px);
}
.legal__topo{ margin-bottom:30px; }
.legal__etiqueta{
  display:inline-block; padding:5px 14px; border-radius:100px; margin-bottom:16px;
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--acento); background:rgba(143,180,196,.12); border:1px solid rgba(143,180,196,.26);
}
.legal__titulo{ font-size:clamp(1.6rem,4vw,2.4rem); }
.legal__data{ font-size:.78rem; color:var(--mudo); margin-top:12px; }
.legal__corpo h2{
  font-size:1rem; margin:34px 0 12px; color:var(--branco);
  text-transform:none; letter-spacing:0; line-height:1.4;
}
.legal__corpo h3{ font-size:.9rem; margin:22px 0 8px; text-transform:none; letter-spacing:0; }
.legal__corpo p, .legal__corpo li{ font-size:.92rem; color:rgba(231,237,240,.8); line-height:1.75; }
.legal__corpo p{ margin-bottom:12px; }
.legal__corpo ul{ margin:0 0 14px 4px; }
.legal__corpo li{ padding-left:18px; position:relative; margin-bottom:7px; }
.legal__corpo li::before{
  content:''; position:absolute; left:0; top:11px; width:6px; height:1px; background:var(--acento);
}
.legal__corpo a{ color:var(--acento-2); text-decoration:underline; text-underline-offset:3px; }
.legal__tabela{ width:100%; border-collapse:collapse; margin:14px 0 20px; font-size:.86rem; }
.legal__tabela th, .legal__tabela td{
  text-align:left; padding:11px 12px; border-bottom:1px solid var(--linha-2); vertical-align:top;
}
.legal__tabela th{ color:var(--branco); font-weight:500; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; }
.legal__tabela td{ color:rgba(231,237,240,.78); }
.legal__voltar{
  display:inline-flex; align-items:center; gap:8px; margin-top:34px;
  padding:11px 22px; border-radius:100px; font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--linha); background:rgba(255,255,255,.06);
  transition:background .25s, border-color .25s;
}
.legal__voltar:hover{ background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.24); }

.rodape-mini{
  position:relative; z-index:1;
  text-align:center; padding:0 20px 46px;
  font-size:.72rem; color:rgba(231,237,240,.45); letter-spacing:.04em;
}
.rodape-mini a{ color:rgba(231,237,240,.68); text-decoration:underline; text-underline-offset:3px; }
.rodape-mini a:hover{ color:var(--branco); }

/* ==========================================================================
   CELULAR
   As regras vêm depois das de base para vencê-las: com a mesma força, ganha
   a que está escrita mais abaixo.
   ========================================================================== */
@media (max-width:900px){
  :root{ --topo-altura:66px; }

  .topo{ top:10px; left:10px; right:10px; padding:9px 9px 9px 16px; border-radius:26px; }
  .topo__inner{ gap:10px; }
  .topo__logo img{ height:19px; }
  .topo__quem{ font-size:.72rem; gap:7px; }
  /* o cargo não cabe ao lado do nome e dos botões: aparecia cortado no meio
     da palavra. Some no celular — o nome é a informação que importa ali. */
  .topo__quem .selo{ display:none; }
  .link-topo{ padding:8px 13px; font-size:.62rem; }

  .corpo{ padding:calc(var(--topo-altura) + 20px) 0 70px; }

  .abas{ top:calc(var(--topo-altura) + 8px); margin:0 0 24px; width:auto;
         max-width:none; justify-content:flex-start; }

  .painel-grid{ grid-template-columns:1fr; gap:22px; }
  .linha-campos{ grid-template-columns:1fr; }
  .vaga{ grid-template-columns:1fr; gap:14px; }

  .cartao{ padding:24px 20px; border-radius:22px; }
  .item{ padding:13px 15px; gap:13px; }
  .item__acoes{ gap:5px; }
  .secao-titulo{ font-size:1.12rem; }

  .entrada__caixa{ padding:34px 24px; border-radius:26px; }
  .legal__caixa{ padding:32px 22px; border-radius:24px; }
  .modal__caixa{ padding:28px 22px; }
}

/* Em telas estreitas os botões descem para a linha de baixo, em vez de
   espremerem o texto até quebrar palavra por palavra. */
@media (max-width:560px){
  .item{ flex-wrap:wrap; gap:12px; }
  .item__acoes{ width:100%; margin-left:0; justify-content:flex-start; }
  .item__capa{ flex-basis:52px; width:52px; }
  .item__logo{ flex-basis:52px; width:52px; height:38px; }
}

@media (prefers-reduced-motion:reduce){
  .entrada__caixa, .modal__caixa{ animation:none; }
  .item, .btn, .mini, .aba, .link-topo{ transition:none; }
}