/* ==========================================================================
   KINOVA PRODUTORA — PÁGINA INICIAL EM VIDRO
   --------------------------------------------------------------------------
   Este arquivo é usado SÓ pela index.html. As outras páginas (entrar,
   painel, meus-projetos, privacidade, projeto) continuam no css/style.css,
   que não foi tocado. Por isso ele repete as variáveis: é auto-suficiente
   de propósito, para que mexer aqui nunca quebre o painel.

   A ideia da página: o filme não sai da tela. Cada seção sobe como uma
   placa de vidro por cima dele. É isso que faz o vidro funcionar — vidro
   precisa de algo em movimento atrás para refratar.
   ========================================================================== */

: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;
  --f-display: 'Archivo','Helvetica Neue',Arial,sans-serif;
  --f-texto:   'Inter','Helvetica Neue',Arial,sans-serif;
  --grao: .028;
  --ease: cubic-bezier(.22,1,.36,1);
  --mola: cubic-bezier(.34,1.32,.5,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--f-texto); background:#05090B; color:var(--texto);
  font-weight:300; line-height:1.7; -webkit-font-smoothing:antialiased;
  height:100vh; height:100svh; overflow:hidden;
}
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; }
::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; color:var(--branco);
}

/* Foco visível para quem navega pelo teclado. Sem isto a pessoa se perde. */
:focus-visible{ outline:2px solid var(--acento-2); outline-offset:3px; }

/* ==========================================================================
   VIDRO LÍQUIDO
   --------------------------------------------------------------------------
   Vidro não é "fundo translúcido". São quatro coisas ao mesmo tempo:

   1. O que está atrás é DESFOCADO e mais SATURADO — vidro concentra a cor.
   2. A BORDA é mais clara que o miolo: é onde a luz entra de raspão.
   3. Um BRILHO ESPECULAR segue o ponteiro, como reflexo de verdade.
   4. A peça tem ESPESSURA — sombra por fora, luz na aresta de cima.

   Faltando qualquer um dos quatro, vira aquele retângulo cinza que por aí
   chamam de vidro.
   ========================================================================== */
.vl{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--r,100px);
  background:linear-gradient(150deg,
    rgba(255,255,255,.13) 0%,
    rgba(255,255,255,.05) 42%,
    rgba(143,180,196,.10) 100%);
  -webkit-backdrop-filter:blur(22px) saturate(190%) brightness(1.08);
          backdrop-filter:blur(22px) saturate(190%) brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(255,255,255,.13),
    0 18px 44px rgba(0,0,0,.42),
    0 2px 8px rgba(0,0,0,.28);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
}

/* Sem suporte a desfoque (navegador antigo), o vidro vira um fundo sólido
   escuro. Sem isto o texto ficaria por cima do vídeo, ilegível. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .vl{ background:rgba(16,26,31,.94); }
}

/* A luz entrando pela quina: a borda desfoca e clareia mais que o miolo.
   É o que dá espessura — sem isto o vidro parece adesivo colado na tela. */
.vl::before{
  content:''; position:absolute; inset:0; z-index:1; border-radius:inherit;
  -webkit-backdrop-filter:blur(5px) brightness(1.5) saturate(2.2);
          backdrop-filter:blur(5px) brightness(1.5) saturate(2.2);
  -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
          mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:7px; opacity:.55; pointer-events:none;
}

/* Reflexo que acompanha o ponteiro. Sem ele o vidro é a foto de um vidro. */
.vl::after{
  content:''; position:absolute; inset:0; z-index:2; border-radius:inherit;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,0%),
    rgba(255,255,255,.30) 0%, rgba(255,255,255,.09) 38%, transparent 68%);
  opacity:0; transition:opacity .35s var(--ease); pointer-events:none;
}
.vl:hover::after{ opacity:1; }
.vl > *{ position:relative; z-index:3; }

/* ---------- Pílula ---------- */
.pilula{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 22px; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(231,237,240,.82); cursor:pointer; white-space:nowrap;
}
.pilula:hover{ color:var(--branco); transform:translateY(-1px); }
.pilula:active{ transform:scale(.96) translateY(0); }
.pilula:active::before{ opacity:.85; }
.pilula.is-on{
  color:var(--bg);
  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 10px 26px rgba(0,0,0,.4);
}
.pilula.is-on::before{ opacity:0; }

/* ==========================================================================
   O PALCO — o filme nunca sai da tela
   ========================================================================== */
.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%, transparent 0%, rgba(5,9,11,.55) 70%, rgba(5,9,11,.85) 100%),
    linear-gradient(to bottom, rgba(5,9,11,.38), rgba(5,9,11,.25) 45%, rgba(5,9,11,.82));
}
.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);
}
.palco__marca{
  position:absolute; right:-4%; bottom:-8%; width:min(46vw,620px);
  opacity:.05; pointer-events:none;
}

/* ==========================================================================
   A CHAMADA DO CENTRO
   ========================================================================== */
.capa{
  position:fixed; inset:0; z-index:5; display:grid; align-content:center;
  padding:0 clamp(24px,6vw,90px); pointer-events:none;
  transition:opacity .5s var(--ease), transform .6s var(--ease), filter .5s var(--ease);
}
body.tem-painel .capa{ opacity:0; transform:scale(1.04); filter:blur(6px); }
.capa__olho{
  display:flex; align-items:center; gap:14px; margin-bottom:22px;
  font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; color:var(--acento);
}
.capa__olho i{ display:block; width:44px; height:1px; background:var(--acento); opacity:.6; font-style:normal; }
.hero__title{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  letter-spacing:-.02em; line-height:.95; color:var(--branco);
  font-size:clamp(2.4rem,7.4vw,6.2rem);
}
.hero__title .accent{ color:var(--acento-2); }
.hero__text{
  margin-top:24px; max-width:44ch; font-size:clamp(.95rem,1.5vw,1.08rem);
  color:rgba(231,237,240,.78);
}
.capa__botoes{ display:flex; gap:10px; margin-top:34px; flex-wrap:wrap; pointer-events:auto; }
.capa__botoes .pilula{ padding:15px 28px; font-size:.7rem; }
.capa__botoes .pilula--forte{
  color:var(--bg);
  background:linear-gradient(150deg, rgba(255,255,255,.96), rgba(215,232,240,.9));
}
.capa__botoes .pilula--forte::before{ opacity:0; }

/* A dica de rolagem. O site não rola — mas muita gente rola por reflexo ao
   entrar, e um site que não responde a isso parece quebrado. Aqui a roda do
   mouse (e o deslize para cima) abrem o portfólio, e este aviso conta isso. */
.dica{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:6;
  width:max-content; white-space:nowrap;
  display:flex; align-items:center; gap:10px;
  font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(231,237,240,.5);
  pointer-events:none; transition:opacity .4s var(--ease);
}
.dica i{ display:block; width:1px; height:22px; background:linear-gradient(rgba(255,255,255,.5), transparent);
  animation:desce 2.2s var(--ease) infinite; font-style:normal; }
@keyframes desce{ 0%{ transform:translateY(-8px); opacity:0; } 40%{ opacity:1; } 100%{ transform:translateY(8px); opacity:0; } }
body.tem-painel .dica{ opacity:0; }

/* ==========================================================================
   A BARRA — cada menu é a peça de vidro que vira a seção
   ========================================================================== */
/* width:max-content não é enfeite. Numa caixa fixa com "left:50%", o espaço
   disponível que o navegador considera é só o que sobra do meio da tela para
   a direita — metade. Sem esta linha a barra é espremida em 756px numa tela
   de 1512 e a última pílula ("Área do cliente") aparece cortada. */
.barra{
  position:fixed; z-index:60; left:50%; top:20px; transform:translateX(-50%);
  --r:100px; display:flex; align-items:center; gap:4px; padding:6px;
  width:max-content; max-width:calc(100vw - 28px);
}
.barra__logo{ padding:0 14px 0 10px; flex:0 0 auto; }
.barra__logo img{ height:17px; width:auto; }
.barra__itens{ display:flex; gap:3px; overflow-x:auto; scrollbar-width:none; }
.barra__itens::-webkit-scrollbar{ display:none; }
/* flex:0 0 auto é obrigatório: sem isso as pílulas encolhem e o texto é
   decepado no celular, em vez de a barra rolar de lado. */
.barra .pilula{ padding:10px 17px; font-size:.67rem; letter-spacing:.14em; flex:0 0 auto; }
.barra .pilula--cliente{ color:var(--acento-2); }
/* a pílula acesa fica branca: o texto precisa virar escuro, inclusive esta */
.barra .pilula.is-on, .barra .pilula--cliente.is-on{ color:var(--bg); }

/* ==========================================================================
   OS PAINÉIS
   ========================================================================== */
.camada{ position:fixed; inset:0; z-index:50; display:none; }
.camada.is-on{ display:block; }
.camada__fundo{
  position:absolute; inset:0; background:rgba(5,9,11,.42);
  opacity:0; transition:opacity .4s var(--ease);
}
.camada.is-aberto .camada__fundo{ opacity:1; }

.painel{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  --r:30px; width:min(1180px,92vw); height:min(780px,80vh);
  display:none; flex-direction:column; will-change:transform;
}
/* Durante a troca as DUAS placas ficam na tela por um instante: a que sai
   encolhendo para a pílula dela e a que entra crescendo da pílula nova. É
   essa sobreposição curta que transforma o corte em movimento. */
.painel.is-atual{ display:flex; z-index:2; }
.painel.is-saindo{ display:flex; z-index:1; pointer-events:none; }
.painel[data-tam="medio"]{ width:min(760px,92vw); }

.painel__topo{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:34px 36px 20px; flex:0 0 auto;
}
.painel__olho{
  display:block; margin-bottom:12px;
  font-size:.64rem; letter-spacing:.26em; text-transform:uppercase; color:var(--acento);
}
.painel__topo h2{ font-size:clamp(1.7rem,3.6vw,2.9rem); }
.painel__corpo{
  flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
  padding:0 36px 52px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent;
  /* o conteúdo se dissolve na aresta de baixo em vez de ser decepado por ela */
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 42px), transparent 100%);
          mask-image:linear-gradient(to bottom, #000 calc(100% - 42px), transparent 100%);
}
.painel__corpo::-webkit-scrollbar{ width:6px; }
.painel__corpo::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); border-radius:8px; }

/* O conteúdo não voa junto com a placa: aparece quando ela para. */
.painel__topo, .painel__corpo{
  opacity:0; transform:translateY(16px);
  transition:opacity .34s var(--ease) .18s, transform .38s var(--ease) .18s;
}
.painel.is-mostrando .painel__topo,
.painel.is-mostrando .painel__corpo{ opacity:1; transform:none; }

/* Na saída o texto some primeiro e depressa — precisa sumir ANTES de a placa
   encolher, senão as letras se espremem no caminho e ficam ilegíveis. */
.painel.is-saindo .painel__topo,
.painel.is-saindo .painel__corpo{
  opacity:0; transform:translateY(-10px);
  transition:opacity .16s var(--ease), transform .22s var(--ease);
}

.fechar{
  flex:0 0 auto; width:44px; height:44px; --r:50%; display:grid; place-items:center;
  font-size:1.25rem; line-height:1; color:var(--branco);
}
.fechar:hover{ transform:rotate(90deg); }

/* ---------- Conteúdo dos painéis ---------- */
.duas{ display:grid; grid-template-columns:1fr 1fr; gap:44px; }
.duas p{ color:rgba(231,237,240,.8); font-size:.96rem; }
.duas p + p{ margin-top:16px; }

.numeros{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.num{ --r:20px; padding:24px 30px; flex:1 1 180px; }
.num strong{ display:block; font-family:var(--f-display); font-size:2.6rem; color:var(--branco); line-height:1; }
.num span{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mudo); }

.cartoes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:14px; }
.cartao{ --r:22px; padding:26px; }
.cartao__num{ font-family:var(--f-display); font-size:.72rem; letter-spacing:.2em; color:var(--acento); }
.cartao h3{ font-size:1.02rem; margin:12px 0 10px; }
.cartao p{ font-size:.88rem; color:rgba(231,237,240,.72); line-height:1.6; }
.etiquetas{ display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.etiquetas li{
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mudo);
  border:1px solid rgba(255,255,255,.14); padding:5px 11px; border-radius:100px;
}

.contact-list{ display:grid; gap:10px; }
.contact-row{ --r:20px; display:flex; align-items:center; gap:20px; padding:20px 26px; }
.contact-row__label{ flex:0 0 auto; width:110px; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mudo); }
.contact-row__value{ flex:1; font-size:1rem; color:var(--branco); word-break:break-word; }
.contact-row__go{ color:var(--acento); transition:transform .3s var(--ease); }
.contact-row:hover .contact-row__go{ transform:translateX(6px); }
.zap{
  --r:100px; display:inline-flex; align-items:center; gap:10px; margin-top:22px;
  padding:16px 30px; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bg); background:linear-gradient(150deg,#fff,#D7E8F0);
}
.zap::before{ display:none; }

/* ==========================================================================
   PORTFÓLIO
   --------------------------------------------------------------------------
   A marcação .tile é gerada pelo js/portfolio.js a partir do painel. Os
   nomes de classe daqui têm que continuar batendo com os de lá — mexer num
   sem mexer no outro deixa o portfólio sem estilo.
   ========================================================================== */
.filters{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:22px; }

.strip{ display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:12px; }
.tile{
  position:relative; aspect-ratio:2/3; overflow:hidden; border-radius:18px;
  background:var(--petroleo); cursor:pointer;
  transition:transform .16s var(--ease);
}
.tile.is-hidden{ display:none; }
/* Afunda um fio no clique, como um botão de verdade — é o instante do dedo. */
.tile:active{ transform:scale(.98); }
.tile img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.5) brightness(.72);
  transition:transform .9s var(--ease), filter .6s var(--ease);
}
.tile::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(11,17,20,.95) 0%, rgba(11,17,20,.12) 58%, transparent 100%);
}
.tile:hover img{ transform:scale(1.06); filter:grayscale(0) brightness(1); }
.tile__play{
  position:absolute; z-index:3; inset:0; margin:auto; width:52px; height:52px;
  border:1px solid rgba(255,255,255,.7); border-radius:50%;
  display:grid; place-items:center; background:rgba(11,17,20,.35);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; transform:scale(.85); transition:all .45s var(--ease);
}
.tile__play::before{
  content:''; width:0; height:0; margin-left:4px;
  border-left:11px solid var(--branco);
  border-top:6.5px solid transparent; border-bottom:6.5px solid transparent;
}
.tile:hover .tile__play{ opacity:1; transform:scale(1); }
.tile__meta{ position:absolute; z-index:3; left:0; right:0; bottom:0; padding:18px 16px; }
.tile__cat{ display:block; font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--acento); margin-bottom:6px; }
.tile__title{ font-family:var(--f-display); font-weight:800; font-size:.92rem; text-transform:uppercase; line-height:1.1; color:var(--branco); }
.tile__client{ font-size:.72rem; color:var(--mudo); margin-top:4px; line-height:1.35; }

/* ==========================================================================
   A JANELA DO TRABALHO — o card sobe e para flutuando
   ========================================================================== */
.janela{ position:fixed; inset:0; z-index:120; display:none; }
.janela.is-on{ display:block; }
.janela__fundo{
  position:absolute; inset:0; background:rgba(5,9,11,.5);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  opacity:0; transition:opacity .38s var(--ease);
}
.janela.is-aberto .janela__fundo{ opacity:1; }
.janela__caixa{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  overflow:hidden; border-radius:26px; background:var(--petroleo);
  box-shadow:0 40px 120px rgba(0,0,0,.72),
             inset 0 1px 0 rgba(255,255,255,.3),
             inset 0 0 0 1px rgba(255,255,255,.12);
  will-change:transform; transition:width .55s var(--ease), height .55s var(--ease);
}
.janela__capa{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .35s var(--ease); }
.janela__veu{
  position:absolute; inset:0; transition:opacity .35s var(--ease);
  background:linear-gradient(to top, rgba(11,17,20,.95) 0%, rgba(11,17,20,.15) 55%, transparent 100%);
}
.janela__meta{
  position:absolute; z-index:3; left:0; right:0; bottom:0; padding:30px;
  opacity:0; transform:translateY(14px);
  transition:opacity .34s var(--ease) .16s, transform .34s var(--ease) .16s;
}
.janela.is-aberto .janela__meta{ opacity:1; transform:none; }
.janela__cat{ display:block; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--acento); margin-bottom:9px; }
.janela__titulo{ font-family:var(--f-display); font-weight:800; font-size:1.45rem; text-transform:uppercase; line-height:1.08; color:var(--branco); }
.janela__cliente{ font-size:.86rem; color:var(--mudo); margin-top:6px; }
.janela__assistir{
  --r:100px; display:inline-flex; align-items:center; gap:11px; margin-top:20px;
  padding:13px 24px; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--branco);
}
.janela__assistir i{
  display:block; width:0; height:0; font-style:normal;
  border-left:9px solid currentColor;
  border-top:5.5px solid transparent; border-bottom:5.5px solid transparent;
}
.janela__player{
  position:absolute; inset:0; z-index:4; opacity:0; pointer-events:none; background:#000;
  transition:opacity .3s var(--ease) .22s;
}
.janela__player iframe{ width:100%; height:100%; border:0; display:block; }
.janela.is-video .janela__player{ opacity:1; pointer-events:auto; }
.janela.is-video .janela__capa,
.janela.is-video .janela__veu,
.janela.is-video .janela__meta{ opacity:0; transition-delay:0s; pointer-events:none; }
.janela__fechar{
  position:absolute; z-index:6; top:14px; right:14px; width:42px; height:42px; --r:50%;
  display:grid; place-items:center; font-size:1.2rem; color:var(--branco);
  opacity:0; transition:opacity .3s var(--ease) .3s;
}
.janela.is-aberto .janela__fechar{ opacity:1; }

/* ==========================================================================
   FAIXA DE MARCAS
   A marcação vem do js/marcas.js. Fica no rodapé da capa, como prova social,
   e sai de cena junto com a chamada quando um painel abre.
   ========================================================================== */
.marquee{
  position:fixed; left:0; right:0; bottom:64px; z-index:4;
  overflow:hidden; pointer-events:none;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  transition:opacity .45s var(--ease);
}
body.tem-painel .marquee{ opacity:0; }
.marquee__titulo, .marquee__linha{ display:none; }
.marquee__track{ display:flex; width:max-content; animation:desfila 42s linear infinite; }
.marquee__group{ display:flex; align-items:center; gap:52px; padding-right:52px; }
.marquee__group img{ height:24px; width:auto; opacity:.42; filter:grayscale(1) brightness(1.6); }
.marquee__link{ pointer-events:auto; }
@keyframes desfila{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } }

/* ==========================================================================
   RODAPÉ MÍNIMO E WHATSAPP
   ========================================================================== */
.rodape{
  position:fixed; left:24px; bottom:22px; z-index:6;
  font-size:.64rem; letter-spacing:.08em; color:rgba(231,237,240,.42);
  transition:opacity .4s var(--ease);
}
.rodape a{ color:rgba(231,237,240,.62); text-decoration:underline; text-underline-offset:3px; }
.rodape a:hover{ color:var(--branco); }
body.tem-painel .rodape{ opacity:0; pointer-events:none; }

.wa{
  position:fixed; right:22px; bottom:22px; z-index:70;
  width:54px; height:54px; border-radius:50%;
  background:#25D366; color:#fff; display:grid; place-items:center;
  box-shadow:0 8px 26px rgba(37,211,102,.35);
  transition:transform .3s var(--ease), opacity .35s var(--ease);
}
.wa:hover{ transform:scale(1.08); }
.wa svg{ width:29px; height:29px; }

/* Granulação de cinema. Por cima de tudo e sem interceptar clique. */
.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); } }

/* ==========================================================================
   ÁREA DO CLIENTE — pop-up
   --------------------------------------------------------------------------
   Continua sendo o <dialog> do navegador, com o mesmo js/entrar-modal.js de
   antes: ele já entrega Esc para fechar, teclado preso dentro da caixa e
   fundo bloqueado. Só a aparência virou vidro. Mexer na lógica do login para
   ganhar uma animação não valeria o risco.
   ========================================================================== */
.dlg{
  border:0; padding:0; background:none;
  max-width:440px; width:calc(100% - 40px);
  color:var(--texto); overflow:visible;
  /* O reset zera a margem de TUDO, e é a margem automática que centraliza um
     <dialog>. Sem esta linha ele cola no canto da tela. */
  margin:auto;
}
.dlg::backdrop{
  background:rgba(5,9,11,.5);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
          backdrop-filter:blur(16px) saturate(140%);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .dlg::backdrop{ background:rgba(5,9,11,.92); }
}
.dlg[open] .dlg__caixa{ animation:caixa-entra .5s var(--mola) both; }
@keyframes caixa-entra{ from{ opacity:0; transform:scale(.9) translateY(14px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .dlg[open] .dlg__caixa{ animation:none; } }

.dlg__caixa{
  position:relative; --r:28px; padding:40px 34px 30px; text-align:center;
}
.dlg__fechar{
  position:absolute; top:14px; right:16px; width:38px; height:38px;
  border-radius:50%; font-size:1.5rem; line-height:1; color:var(--branco);
  opacity:.7; transition:opacity .3s, transform .3s;
}
.dlg__fechar:hover{ opacity:1; transform:rotate(90deg); }
.dlg__logo{ height:26px; width:auto; margin:0 auto 22px; }
.dlg__titulo{ font-size:1.4rem; }
.dlg__sub{ font-size:.86rem; color:var(--mudo); margin:8px 0 24px; }

.dlg .campo{ text-align:left; margin-bottom:12px; }
.dlg .campo label{
  display:block; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mudo); margin-bottom:6px;
}
.dlg .campo input{
  width:100%; padding:14px 16px; border-radius:14px;
  background:rgba(255,255,255,.06); border:1px solid var(--linha);
  color:var(--branco); font:inherit; font-size:.95rem; outline:none;
  transition:border-color .25s, background .25s;
}
.dlg .campo input:focus{ border-color:var(--acento); background:rgba(255,255,255,.1); }

.dlg .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 30px; border-radius:100px; border:1px solid transparent;
  font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  transition:all .3s var(--ease); cursor:pointer;
}
.dlg .btn--solid{ background:linear-gradient(150deg,#fff,#D7E8F0); color:var(--bg); }
.dlg .btn--solid:hover{ transform:translateY(-2px); }
.dlg .btn--bloco{ width:100%; margin-top:8px; }
.dlg .btn[disabled]{ opacity:.5; pointer-events:none; }

.dlg .aviso{
  display:none; padding:12px 15px; margin-bottom:18px; border-radius:14px;
  font-size:.85rem; line-height:1.5; text-align:left;
  border-left:3px solid var(--acento); background:rgba(143,180,196,.10);
}
.dlg .aviso.is-on{ display:block; }
.dlg .aviso--erro{ border-left-color:#E06B5E; background:rgba(224,107,94,.10); }
.dlg .aviso--ok{ border-left-color:#5FBF8A; background:rgba(95,191,138,.10); }

.dlg .social{ display:none; }
.dlg .social.is-on{ display:block; margin-bottom:8px; }
.dlg .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-family:var(--f-texto); font-size:.88rem; font-weight:500;
  cursor:pointer; transition:background .25s, border-color .25s;
}
.dlg .social__btn:hover{ background:rgba(255,255,255,.1); border-color:var(--acento); }
.dlg .social__btn[disabled]{ opacity:.55; pointer-events:none; }
.dlg .social__btn svg{
  position:absolute; left:20px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; display:block;
}
.dlg .social__ou{
  display:flex; align-items:center; gap:14px; margin:18px 0 14px;
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mudo);
}
.dlg .social__ou::before, .dlg .social__ou::after{ content:''; flex:1; height:1px; background:var(--linha-2); }

.dlg__rodape{
  display:flex; justify-content:center; gap:22px; margin-top:20px;
  font-size:.78rem; color:var(--mudo);
}
.dlg__rodape a:hover{ color:var(--acento-2); }

body.tem-dialogo{ overflow:hidden; }

/* ==========================================================================
   CELULAR
   As regras abaixo precisam vir DEPOIS das de base para vencê-las: com a
   mesma força, ganha a que está escrita mais abaixo.
   ========================================================================== */
@media (max-width:900px){
  .barra{
    top:auto; bottom:calc(14px + env(safe-area-inset-bottom));
    left:12px; right:12px; transform:none; max-width:none;
    /* desfaz o width:max-content do computador: aqui a barra tem que caber na
       tela e deixar as pílulas rolarem por dentro, não transbordar para fora */
    width:auto;
  }
  .barra__logo{ display:none; }
  .barra__itens{ width:100%; }

  .painel{
    width:calc(100vw - 18px); height:calc(100svh - 132px);
    top:calc(50% - 34px);
  }
  .painel[data-tam="medio"]{ width:calc(100vw - 18px); }
  .painel__topo{ padding:24px 20px 14px; }
  .painel__corpo{ padding:0 20px 40px; }
  .fechar{ width:40px; height:40px; }

  .duas{ grid-template-columns:1fr; gap:22px; }
  .cartoes{ grid-template-columns:1fr; }
  /* dois por linha: um card por linha vira uma rolagem sem fim */
  .strip{ grid-template-columns:1fr 1fr; gap:9px; }
  .tile__title{ font-size:.8rem; }
  .tile__client{ font-size:.66rem; }
  .tile__meta{ padding:13px 12px; }
  /* filtros rolam de lado em vez de empilhar em três fileiras */
  .filters{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -20px 18px; padding:0 20px 2px; }
  .filters::-webkit-scrollbar{ display:none; }
  .filters .pilula{ flex:0 0 auto; }

  .contact-row{ padding:16px 18px; gap:12px; }
  .contact-row__label{ width:84px; }
  .contact-row__value{ font-size:.88rem; }

  .marquee{ bottom:calc(96px + env(safe-area-inset-bottom)); }
  .marquee__group{ gap:34px; padding-right:34px; }
  .marquee__group img{ height:19px; }

  .dica{ display:none; }
  .rodape{ left:14px; bottom:calc(76px + env(safe-area-inset-bottom)); font-size:.58rem; }
  .wa{ right:14px; bottom:calc(76px + env(safe-area-inset-bottom)); width:48px; height:48px; }
  .wa svg{ width:26px; height:26px; }
  /* No computador o botão fica fora da placa. No celular a placa ocupa a tela
     inteira e ele pousaria em cima do conteúdo — some enquanto ela está aberta. */
  body.tem-painel .wa{ opacity:0; pointer-events:none; }

  .capa{ align-content:center; padding-bottom:120px; }
  .capa__botoes{ margin-top:26px; }
  .janela__meta{ padding:22px; }
  .janela__titulo{ font-size:1.15rem; }
}

/* Telas curtas e deitadas: a placa não pode passar da tela. */
@media (max-height:620px){
  .painel{ height:calc(100svh - 110px); }
}

@media (prefers-reduced-motion:reduce){
  .painel, .janela__caixa, .capa{ transition:none !important; }
  .dica i{ animation:none; }
}