/* Estilos do site público da Visiodei Creative.
 *
 * Arquivo único para todas as páginas: com o site repartido, manter
 * uma cópia do CSS dentro de cada HTML faria uma troca de cor virar
 * cinco edições - e a quinta seria esquecida.
 */
:root{
    --bg:#0a0a0a; --bg2:#121212; --card:#181816; --border:#2b2724;
    --text:#f5f2ec; --muted:#9d968c; --accent:#c5a073; --accent2:#e3c9a2;
    --grad: linear-gradient(120deg, var(--accent), var(--accent2));
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg); color:var(--text);
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height:1.5;
  }
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
  header{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);
    background:rgba(10,10,10,.78);border-bottom:1px solid var(--border);}
  nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0;}
  .logo img{height:38px;display:block;}
  .hero-logo{height:120px;margin:0 auto 28px;display:block;}
  @media(max-width:600px){.hero-logo{height:88px;}}
  .nav-links{display:flex;gap:28px;font-size:14px;color:var(--muted);}
  .nav-links a:hover{color:var(--text);}
  .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:999px;
    font-weight:600;font-size:14px;border:1px solid var(--border);cursor:pointer;}
  /* Texto escuro sobre o dourado. Branco sobre #c5a073 fica com contraste
     de 1,9:1 - abaixo de qualquer limite legivel, e por isso a palavra
     "sumia". Com #1a1408 sobe para cerca de 9:1, e e o mesmo tom que o
     botao da tela de login ja usava. */
  .btn-primary{background:var(--grad);border:none;color:#1a1408;font-weight:700;}
  .btn-ghost{background:transparent;color:var(--text);}
  .btn-ghost:hover{border-color:var(--accent);}
  section{padding:96px 0;}
  .hero{padding-top:120px;text-align:center;position:relative;overflow:hidden;}
  .hero::before{content:"";position:absolute;top:-200px;left:50%;transform:translateX(-50%);
    width:900px;height:600px;background:radial-gradient(circle, rgba(197,160,115,.25), transparent 70%);
    pointer-events:none;}
  .hero h1{font-size:clamp(36px,6vw,64px);font-weight:800;margin:0 0 20px;letter-spacing:-1px;}
  .hero h1 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .hero p{color:var(--muted);font-size:18px;max-width:560px;margin:0 auto 36px;}
  .hero .cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
  .eyebrow{color:var(--accent);font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;}
  /* h1 e h2 dividem o estilo: nas paginas internas o titulo da secao
     virou o <h1> da pagina, e ele nao pode mudar de tamanho por isso. */
  h1.section-title, h2.section-title{font-size:32px;font-weight:800;
    margin:0 0 12px;text-align:center;}
  p.section-sub{color:var(--muted);text-align:center;max-width:520px;margin:0 auto 56px;}
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  @media(max-width:820px){.grid3{grid-template-columns:1fr;}}
  .card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:32px;}
  .card .icon{width:48px;height:48px;border-radius:12px;background:var(--grad);
    display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:20px;}
  .card h3{margin:0 0 10px;font-size:18px;}
  .card p{color:var(--muted);font-size:14px;margin:0;}
  .logos{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;}
  .logo-card{background:var(--card);border:1px solid var(--border);border-radius:16px;
    padding:20px 28px;display:flex;align-items:center;gap:12px;min-width:180px;}
  .logo-card img{width:40px;height:40px;border-radius:8px;object-fit:cover;}
  .logo-card .ph{width:40px;height:40px;border-radius:8px;background:var(--grad);
    display:flex;align-items:center;justify-content:center;font-weight:700;}
  .logo-card b{font-size:14px;}
  .logo-card small{color:var(--muted);display:block;font-size:12px;}
  form.candidatura{max-width:560px;margin:0 auto;display:grid;gap:16px;}
  .field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;}
  .field input, .field select, .field textarea{
    width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--border);
    background:var(--bg2);color:var(--text);font-size:14px;font-family:inherit;}
  .field textarea{min-height:100px;resize:vertical;}
  .tabs{display:flex;gap:8px;justify-content:center;margin-bottom:28px;}
  .tab{padding:8px 18px;border-radius:999px;border:1px solid var(--border);cursor:pointer;font-size:13px;color:var(--muted);}
  .tab.active{background:var(--grad);color:#1a1408;border:none;}
  .msg{font-size:14px;padding:12px 14px;border-radius:10px;display:none;}
  .msg.ok{display:block;background:rgba(60,200,120,.12);color:#5ee19c;border:1px solid rgba(60,200,120,.3);}
  .msg.err{display:block;background:rgba(255,80,80,.1);color:#ff8080;border:1px solid rgba(255,80,80,.3);}
  footer{border-top:1px solid var(--border);padding:40px 0;text-align:center;color:var(--muted);font-size:13px;}
  footer a{color:var(--muted);}
  footer a:hover{color:var(--text);}
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
  @media(max-width:820px){.contact-grid{grid-template-columns:1fr;}}
  .contact-item{display:flex;gap:14px;margin-bottom:20px;}
  .contact-item .icon{width:40px;height:40px;flex-shrink:0;border-radius:10px;background:var(--card);
    border:1px solid var(--border);display:flex;align-items:center;justify-content:center;}

/* === refinamento visual v2 === */
  html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
  body{ font-family:"Inter","Segoe UI Variable Text",-apple-system,"Segoe UI",Roboto,
        Helvetica,Arial,sans-serif; letter-spacing:.005em; }

  /* Hierarquia tipográfica mais clara */
  h1{ letter-spacing:-.02em; font-weight:700; }
  h2{ letter-spacing:-.01em; }

  /* Superfícies com profundidade sutil em vez de borda seca */
  .section, .stat, .card, .mcard, .kcard, .quick, .desk, .logo-card{
    box-shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .section:hover, .stat:hover{ border-color:rgba(197,160,115,.28); }
  .quick:hover, .mcard:hover, .logo-card:hover{
    transform:translateY(-2px);
    box-shadow:0 2px 4px rgba(0,0,0,.4), 0 16px 32px -14px rgba(0,0,0,.8);
  }

  /* Navegação lateral: marcador dourado e transição */
  .nav-item{ transition:background .15s ease, color .15s ease; position:relative; }
  .nav-item.active::after{
    content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
    width:3px; height:18px; border-radius:0 3px 3px 0; background:var(--grad);
  }

  /* Campos: foco visível (acessibilidade) e transição suave */
  input, select, textarea{ transition:border-color .15s ease, box-shadow .15s ease; }
  input:focus, select:focus, textarea:focus{
    outline:none; border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(197,160,115,.16);
  }
  input::placeholder, textarea::placeholder{ color:rgba(157,150,140,.65); }

  /* Botões com resposta ao toque */
  .btn{ transition:transform .12s ease, filter .18s ease, box-shadow .18s ease;
        letter-spacing:.01em; }
  .btn:hover{ filter:brightness(1.06); box-shadow:0 6px 18px -8px rgba(197,160,115,.7); }
  .btn:active{ transform:translateY(1px); }
  .btn-outline:hover{ border-color:var(--accent); filter:none; box-shadow:none; }
  .btn-danger:hover{ background:rgba(255,80,80,.08); filter:none; box-shadow:none; }

  /* Tabelas mais legíveis */
  table{ border-collapse:separate; border-spacing:0; }
  th{ letter-spacing:.06em; }
  tbody tr{ transition:background .12s ease; }
  tbody tr:last-child td{ border-bottom:none; }

  /* Selo/etiqueta com contorno suave */
  .tag{ letter-spacing:.02em; }

  /* Barras de progresso arredondadas com brilho do dourado */
  .progress{ box-shadow:inset 0 1px 2px rgba(0,0,0,.5); }
  .progress b{ box-shadow:0 0 12px -2px rgba(197,160,115,.8); }

  /* Balões de conversa mais naturais */
  .bubble{ line-height:1.45; box-shadow:0 2px 8px -4px rgba(0,0,0,.6); }
  .bubble.me{ border-bottom-right-radius:4px; color:#1a1408; font-weight:500; }
  .bubble.other{ border-bottom-left-radius:4px; }
  .bubble small a{ color:inherit; opacity:.85; }
  .bubble small a:hover{ opacity:1; }

  /* Rolagem discreta, combinando com o tema escuro */
  *{ scrollbar-width:thin; scrollbar-color:rgba(197,160,115,.35) transparent; }
  *::-webkit-scrollbar{ width:10px; height:10px; }
  *::-webkit-scrollbar-thumb{ background:rgba(197,160,115,.3); border-radius:99px;
    border:3px solid transparent; background-clip:content-box; }
  *::-webkit-scrollbar-thumb:hover{ background:rgba(197,160,115,.55); background-clip:content-box; }
  *::-webkit-scrollbar-track{ background:transparent; }

  /* Estado vazio: deixa de parecer erro */
  .muted:only-child{ opacity:.85; }

  /* Entrada suave dos painéis ao trocar de aba */
  .panel.active{ animation:surge .22s ease both; }
  @keyframes surge{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

  /* Respeita quem prefere menos movimento */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  }


/* ==========================================================================
   BRILHO QUE ACOMPANHA O CURSOR
   ==========================================================================
   Mesmo halo dourado do topo da home, agora seguindo a pessoa. Fica ATRÁS
   de tudo (z-index 0 com o conteúdo em 1) e não intercepta clique. */
.brilho-cursor{
  position:fixed; top:0; left:0; width:520px; height:520px;
  pointer-events:none; z-index:0; opacity:0;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(197,160,115,.16) 0%,
    rgba(197,160,115,.07) 35%,
    transparent 68%);
  transition:opacity .5s ease, width .35s ease, height .35s ease;
  will-change:transform;
}
.brilho-cursor.perto{ width:660px; height:660px; }

/* O conteúdo precisa ficar acima do brilho, senão ele lava o texto. */
header, section, footer, .wrap{ position:relative; z-index:1; }

/* ==========================================================================
   CELULAR
   ==========================================================================
   O CSS antigo fazia `.nav-links{display:none}` abaixo de 820px. Numa página
   só isso era tolerável - dava para rolar. Com o site repartido em páginas,
   o celular ficaria SEM como navegar: nenhum caminho para Sobre, Portfólio
   ou Contato. Por isso o menu vira um painel que abre. */

.abrir-menu{
  display:none; background:none; border:1px solid var(--border);
  border-radius:10px; width:42px; height:42px; cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
  padding:0; flex-shrink:0;
}
.abrir-menu span{
  display:block; width:18px; height:2px; background:var(--text);
  border-radius:2px; transition:transform .22s ease, opacity .22s ease;
}
.abrir-menu[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.abrir-menu[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.abrir-menu[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width: 860px){
  html.com-menu .abrir-menu{ display:flex; }

  nav{ gap:12px; flex-wrap:wrap; }
  .logo img{ height:32px; }

  /* Reserva para quando o site.js nao roda: sem o botao, o menu continua
     sendo a linha de links de sempre - mas apertada e quebrando linha, em
     vez de vazar para fora da tela. Feia e navegavel ganha de bonita e
     inalcancavel. */
  .nav-links{ gap:14px; font-size:13px; flex-wrap:wrap; }

  /* O menu deixa de ser linha e vira painel abaixo do cabeçalho - mas só
     depois de o site.js criar o botão que o abre (é ele quem põe
     `com-menu` no <html>). Sem essa condição, um site.js que não
     carregasse deixaria o celular com `max-height:0` e nenhum botão:
     menu invisível e sem como chamar. */
  html.com-menu .nav-links{
    display:flex !important; flex-direction:column; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background:var(--bg2); border-bottom:1px solid var(--border);
    max-height:0; overflow:hidden; transition:max-height .28s ease;
  }
  html.com-menu .nav-links.aberto{ max-height:340px; }
  html.com-menu .nav-links a{
    padding:15px 24px; border-bottom:1px solid var(--border);
    font-size:15px; color:var(--text);
  }
  html.com-menu .nav-links a:last-child{ border-bottom:none; }

  /* "Entrar" some do cabeçalho e reaparece dentro do painel: no celular
     não há espaço para logo + menu + dois botões sem apertar tudo. O que
     fica é o botão que traz cliente. */
  html.com-menu nav > div:last-child > a[href="/login"]{ display:none; }
  .btn{ padding:9px 15px; font-size:13px; }

  section{ padding:56px 0; }
  .hero{ padding-top:88px; }
  .wrap{ padding:0 18px; }
  h2.section-title{ font-size:25px; }
  .grid3, .atalhos{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; gap:26px; }
  .card, .atalho{ padding:22px; }

  /* Botões do hero em coluna e largos: alvo de dedo, não de mouse. */
  .hero .cta{ flex-direction:column; align-items:stretch; }
  .hero .cta .btn{ justify-content:center; padding:14px 20px; font-size:15px; }

  /* Tabela e conteúdo largo rolam dentro de si, nunca empurram a página. */
  table{ display:block; overflow-x:auto; white-space:nowrap; }
}

@media (max-width: 480px){
  .hero h1{ font-size:30px; }
  .hero p{ font-size:16px; }
  .hero-logo{ height:74px; }
  .eyebrow{ font-size:11px; letter-spacing:1.4px; }
  footer{ font-size:12px; }
}

/* Toque: alvos de no mínimo 44px, que é o tamanho de um dedo. Abaixo
   disso a pessoa erra o botão e culpa o site. */
@media (pointer: coarse){
  .btn, .tab, .nav-links a{ min-height:44px; display:inline-flex;
    align-items:center; }
  /* O rodape do site guarda o WhatsApp, o e-mail e o Instagram - os links
     que a pessoa mais toca no celular. Com 16px de altura o dedo erra. */
  footer a{ display:inline-block; padding:9px 3px; }
  input, select, textarea{
    font-size:16px;   /* menor que 16px faz o iPhone dar zoom sozinho ao focar */
    padding:13px 14px;
  }
}

/* Sem mouse não há brilho a seguir. */
@media (pointer: coarse), (prefers-reduced-motion: reduce){
  .brilho-cursor{ display:none; }
}


/* === Conta logada no topo do site ===================================
   Quem já entrou chegava na home e continuava vendo "Entrar", sem
   caminho de volta para o próprio painel. Este bloco troca aquele link
   pelo nome da pessoa e pelo que ela pode fazer dali. */
/* O cabecalho e as secoes compartilham z-index:1 no site. Como a secao
   vem DEPOIS no HTML, ela pinta por cima - e o menu de conta abria atras
   do logo do hero, legivel pela metade. Subir o cabecalho resolve aqui e
   tambem para o painel de menu do celular, que cai do mesmo lugar. */
header{ z-index:40; }
.conta-topo{ position:relative; display:inline-flex; }
.conta-topo > button{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  background:none; border:1px solid var(--border); border-radius:999px;
  padding:6px 14px 6px 6px; color:var(--muted); font-size:14px;
  font-family:inherit; transition:border-color .15s, color .15s;
}
.conta-topo > button:hover{ border-color:var(--accent); color:var(--text); }
.conta-topo .avatar{
  width:28px; height:28px; border-radius:999px; flex-shrink:0;
  background:var(--grad,linear-gradient(135deg,#c5a073,#e0c9a6)); color:#1a1408;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:11px; letter-spacing:.02em;
}
.conta-topo .nome{
  max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.conta-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:212px; z-index:60;
  background:var(--bg2); border:1px solid var(--border); border-radius:12px;
  padding:6px; box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.conta-menu .quem{
  padding:9px 11px 10px; border-bottom:1px solid var(--border); margin-bottom:5px;
  line-height:1.35;
}
.conta-menu .quem b{ display:block; font-size:13px; }
.conta-menu .quem span{
  font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em;
}
.conta-menu a, .conta-menu button{
  display:block; width:100%; text-align:left; padding:9px 11px; border-radius:8px;
  font-size:13.5px; color:var(--muted); background:none; border:none;
  cursor:pointer; font-family:inherit;
}
.conta-menu a:hover, .conta-menu button:hover{ background:var(--card); color:var(--text); }
.conta-menu .sair{ color:#e08585; }

/* No celular o menu do site vira painel de largura cheia; o de conta
   acompanha, senão encostaria fora da tela pela direita. */
@media (max-width: 860px){
  .conta-topo .nome{ max-width:92px; }
  .conta-menu{ right:auto; left:0; }
}

/* Na largura de celular o cabecalho ja carrega logo, botao e hamburguer.
   O nome ao lado do avatar empurrava tudo para uma segunda linha e ainda
   quebrava "Quero ser visto" em duas - entao fica so o avatar, que e o
   suficiente para a pessoa reconhecer que esta logada. O nome inteiro
   continua no menu, ao abrir. */
@media (max-width: 560px){
  .conta-topo .nome{ display:none; }
  .conta-topo > button{ padding:5px; border-radius:999px; }
  .conta-menu{ min-width:200px; }
}