/* ============================================================================
   O TOPO DO DESENHO APROVADO — as 6 pranchetas de site, uma folha so.

   Fonte: C:\Claude\Documentos\Revisao-CRM\desenho\project\Site*.dc.html
          (fotos ao lado, em ..\fotos\Site*.png)

   POR QUE UMA FOLHA COMPARTILHADA E NAO SEIS BLOCOS <style>: o menu ja estava
   copiado seis vezes, byte a byte, dentro das seis paginas — 5.6 KB cada. Toda
   correcao no topo era seis correcoes, e em 29/09/2026 a de capital de giro ja
   tinha divergido das outras cinco (faltava um comentario). O topo e o mesmo
   desenho nas seis pranchetas: passa a ser o mesmo arquivo.

   OS VALORES SAO OS DO KIT DO CRM (C:\Claude\CRM\src\estilo\kit-do-desenho.css),
   copiados e nao reinterpretados, para o site e o CRM falarem a mesma lingua.
   O site NAO carrega aquele arquivo: ele tem estrutura propria (menu no topo,
   nao lateral), entao vieram os VALORES, nao o arquivo.
   ============================================================================ */

/* ---- OS TOKENS DAS PRANCHETAS -------------------------------------------
   Identicos nas 79 pranchetas do desenho. Os nomes antigos do site (--red,
   --paper, --ink, --line, --gray, --mut, --card) continuam existindo e
   APONTAM para estes: centenas de regras ja escritas os usam, e trocar o
   valor num lugar so foi o que deixou o site inteiro virar de cor junto com
   o topo. Sem isso o topo ficaria #8C1D24 e o resto da pagina #6E1423 — dois
   vermelhos, que e pior que qualquer um dos dois. */
:root {
  --fundo: #F5F6F8;
  --superficie: #FFFFFF;
  --linha: #DFE4EA;
  --tinta: #16202A;
  --apoio: #5A6875;
  --apagado: #93A2B0;
  --marca: #8C1D24;
  --marca-hover: #6E161C;
  --chip: #E6EAEF;
  --sombra: 0 1px 2px rgba(22,32,42,.05);

  /* O degrade do cabecalho, igual nas seis pranchetas. */
  --topo-degrade: linear-gradient(160deg, #16202A 0%, #2A1015 55%, #6E161C 100%);
  /* A altura que o degrade cobre e a altura da barra. A barra grudada no topo
     pinta a FATIA DE CIMA deste mesmo degrade (ver .topnav), e por isso
     precisa saber as duas: sem isso a barra e o hero seriam dois degrades
     diferentes e apareceria uma emenda.
     O site-desenho.js MEDE as duas e reescreve estes valores — aqui fica um
     chute FOLGADO de proposito, para o intervalo entre o primeiro desenho da
     tela e o script. Chute grande demais so deixa o fim do degrade menos
     quente; chute pequeno demais deixa o pe do hero no fundo claro, com o
     botao branco sumindo dentro dele. Na duvida, sobra. */
  --topo-altura: 460px;
  --topo-barra: 72px;
}

/* O tema noturno do site ja existia com o seletor html[data-theme="dark"] e o
   botao da lua no menu. Os valores abaixo sao os do mesmo kit, coluna escura. */
html[data-theme="dark"] {
  --fundo: #1A1817;
  --superficie: #242120;
  --linha: #3A3634;
  --tinta: #EFECE9;
  --apoio: #A39D98;
  --apagado: #948E89;
  --marca: #8A2433;
  --marca-hover: #E7A9B2;
  --chip: #322E2C;
  --sombra: 0 1px 2px rgba(0,0,0,.5);
}

body {
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* PULAR PARA O CONTEUDO e o link do rodape: moravam no mesmo bloco <style> do
   menu antigo e vieram junto quando ele saiu das seis paginas. O "pular" fica
   fora da tela ate receber foco pelo teclado — sem esta regra ele aparece
   escrito em cima do site. */
.skip {
  position: absolute; left: -999px; top: 8px; z-index: 300;
  background: #FFFFFF; color: var(--marca); font-weight: 700; font-size: 14px;
  padding: 10px 14px; border-radius: 8px; text-decoration: none;
}
.skip:focus { left: 8px; outline: 2px solid var(--marca); outline-offset: 2px }
#conteudo:focus { outline: none }
.foot__consultor { display: inline-block; margin-top: 8px; opacity: .6; font-size: 12px; text-decoration: underline }
.foot__consultor:hover { opacity: 1 }

/* ============================ A BARRA DO MENU ============================= */

/* CONTINUA GRUDADA NO TOPO, e a prancheta nao contradiz isso: ela mostra a
   pagina parada no inicio, onde barra grudada e barra normal sao iguais. As
   paginas de solucao tem 3 a 5 mil pixels de altura; tirar o menu de vista
   seria perder navegacao sem o desenho ter pedido.
   O `background-size` e o truque que faz a barra e o hero parecerem um bloco
   so: a barra pinta o MESMO degrade, esticado na altura do cabecalho inteiro,
   e como ela esta no topo dele mostra justamente a fatia de cima. */
.topnav {
  position: sticky; top: 0; z-index: 200;
  background: var(--topo-degrade);
  background-size: 100% var(--topo-altura);
  background-repeat: no-repeat;
  color: #FFFFFF;
}
.topnav__inner {
  width: 1160px; max-width: calc(100% - 40px); margin: 0 auto;
  display: flex; align-items: center; gap: 28px; padding: 18px 0;
}

/* O SELO "A" E O NOME. Na prancheta o logo e um quadrado arredondado com a
   letra, e embaixo do nome vem "ITAUNA" em versalete. */
.topnav__logo { display: flex; align-items: center; gap: 11px; text-decoration: none; color: #FFFFFF; flex: none }
.topnav__selo {
  width: 36px; height: 36px; border-radius: 10px; background: var(--marca);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 700; font-size: 18px;
}
.topnav__nome { display: block; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 700; font-size: 17px; line-height: 1 }
.topnav__cidade { display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .8 }

/* AS ABAS. Na prancheta nao sao botoes: sao palavras, e a ativa ganha um
   sublinhado branco. O desenho desfez o "abas com cara de botao" de agosto —
   ali o problema era nao parecer clicavel sobre um bordo chapado; aqui o
   contraste do degrade escuro com o branco ja resolve, e o sublinhado da ativa
   diz "voce esta aqui" sem encher a barra de caixas. */
.topnav__links { display: flex; gap: 22px; align-items: center; overflow-x: auto; scrollbar-width: none }
.topnav__links::-webkit-scrollbar { display: none }
.topnav__links a {
  font-size: 15px; font-weight: 500; color: rgba(255,255,255,.82); text-decoration: none;
  border-bottom: 2px solid transparent; padding-bottom: 3px; white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.topnav__links a:hover { color: #FFFFFF; border-bottom-color: rgba(255,255,255,.45) }
.topnav__links a.ativo { font-weight: 700; color: #FFFFFF; border-bottom-color: #FFFFFF }
.topnav__links a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px }

/* A FICHA DE QUEM ATENDE, no canto direito. E o lugar que a prancheta deu a
   ela nas seis telas. Antes deste desenho esse canto tinha "Area do Consultor"
   e "Trabalhe com a gente"; as duas desceram para o rodape (ver o relatorio de
   30/09/2026) porque sao portas de quem ja e de dentro, e o desenho reservou o
   canto para o visitante saber, de cara, com quem ele esta falando.
   O conteudo e reescrito pelo site-pessoas.js no site de cada pessoa. */
/* O grupo da direita inteiro. A lua fica FORA de [data-pessoal="chip"] de
   proposito: o site-pessoas.js reescreve o conteudo da ficha no site de cada
   pessoa, e o botao dentro dela sumiria na primeira troca. */
.topnav__dir { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none }
.topnav__ficha { display: flex; align-items: center; gap: 12px; flex: none }
.topnav__av {
  width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
  flex: none; overflow: hidden;
}
.topnav__av img { width: 100%; height: 100%; object-fit: cover }
.topnav__quem { font-size: 13px; line-height: 1.3 }
.topnav__quem b { font-weight: 600; display: block }
.topnav__quem span { opacity: .8; display: block }

/* O botao da lua, que o site ja tinha e a prancheta nao mostra (ela desenha um
   estado so). Fica discreto, do lado da ficha, em vez de sumir: e uma funcao
   que ele usa, nao um enfeite que o desenho tenha recusado. */
.topnav__tema {
  flex: none; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  color: #FFFFFF; font-size: 14px; width: 32px; height: 32px; border-radius: 9px;
  cursor: pointer; line-height: 1; padding: 0;
}
.topnav__tema:hover { background: rgba(255,255,255,.28) }

/* ============================== O HERO ==================================== */

.topo {
  background: var(--topo-degrade);
  background-size: 100% var(--topo-altura);
  background-repeat: no-repeat;
  color: #FFFFFF;
  /* O degrade comeca na barra, que esta ACIMA deste bloco: puxar o fundo para
     cima pela mesma altura da barra faz as duas fatias se encaixarem. */
  background-position: 0 calc(-1 * var(--topo-barra));
}
.topo__in {
  width: 1160px; max-width: calc(100% - 40px); margin: 0 auto;
  padding: 26px 0 40px; display: flex; gap: 40px; align-items: center;
}
.topo__texto { flex: 1.15; min-width: 0 }
.topo__texto h1 {
  margin: 0 0 12px; font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: 42px; font-weight: 700; line-height: 1.12; color: #FFFFFF;
}
.topo__texto p { margin: 0 0 20px; font-size: 17px; line-height: 1.6; opacity: .9; max-width: 560px; text-align: left }
.topo__acoes { display: flex; gap: 12px; align-items: center; flex-wrap: wrap }
.topo__acoes a {
  text-decoration: none; border-radius: 11px; font-size: 16px; font-weight: 600;
  padding: 14px 26px; display: inline-block;
}
.topo__acoes .b1 { background: var(--marca); color: #FFFFFF }
.topo__acoes .b1:hover { background: #7A181F; color: #FFFFFF }
.topo__acoes .b2 { background: rgba(255,255,255,.12); color: #FFFFFF; border: 1px solid rgba(255,255,255,.3); padding: 13px 22px }
.topo__acoes .b2:hover { background: rgba(255,255,255,.22); color: #FFFFFF }
.topo__acoes a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px }

/* ---- O CARTAO "SIMULE EM 30 SEGUNDOS" ------------------------------------
   Na prancheta os tres campos aparecem preenchidos. AQUI ELES SAO CAMPOS DE
   VERDADE, com aqueles valores como ponto de partida: um cartao que parece um
   formulario e nao aceita nada seria mentira numa pagina publica. O que o
   botao faz esta no site-desenho.js. */
.cartao30 {
  flex: .85; min-width: 0;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px; padding: 20px 22px;
}
.cartao30__t { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .75; margin-bottom: 12px }
.cartao30 label { display: block; font-size: 12.5px; opacity: .75; margin-bottom: 4px }
.cartao30__c { margin-bottom: 11px }
.cartao30 input, .cartao30 select {
  width: 100%; background: rgba(255,255,255,.14); border: 1px solid transparent;
  border-radius: 9px; padding: 11px 13px; font: inherit; font-size: 15.5px; font-weight: 600;
  color: #FFFFFF; -webkit-appearance: none; appearance: none;
}
/* A setinha do <select>, desenhada no proprio fundo: o `appearance:none` acima
   e o que permite o campo ter a mesma cara do <input> ao lado, e leva a seta
   nativa junto. */
.cartao30 select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px;
}
.cartao30 select option { color: #16202A; background: #FFFFFF }
.cartao30 input::placeholder { color: rgba(255,255,255,.55); font-weight: 400 }
.cartao30 input:focus, .cartao30 select:focus { outline: 0; border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.2) }
.cartao30__btn {
  width: 100%; margin-top: 6px; background: #FFFFFF; color: var(--marca);
  border: 0; border-radius: 10px; padding: 12px 0; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.cartao30__btn:hover { background: #F2E8E9 }
.cartao30__btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px }

/* ============================ OS TRES PILARES ============================= */

.pilares {
  width: 1160px; max-width: calc(100% - 40px); margin: 0 auto; padding: 26px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.pilar { background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; padding: 18px 20px }
.pilar__i {
  width: 38px; height: 38px; border-radius: 10px; background: var(--chip);
  display: flex; align-items: center; justify-content: center; margin-bottom: 11px;
}
/* O traco dos icones e o vermelho da marca, e no tema noturno o #8C1D24 some
   contra o fundo escuro: `currentColor` no SVG deixa a cor vir daqui. */
.pilar__i svg { stroke: var(--marca); display: block }
html[data-theme="dark"] .pilar__i svg { stroke: #D68893 }
.pilar h3 { font-family: 'Barlow Semi Condensed', sans-serif; font-size: 19px; font-weight: 700; margin: 0 0 5px; color: var(--tinta) }
.pilar p { font-size: 14.5px; color: var(--apoio); line-height: 1.55; margin: 0 }

/* ========================= A FAIXA DE QUEM ATENDE ========================= */

.faixa-quem {
  width: 1160px; max-width: calc(100% - 40px); margin: 22px auto 0;
  display: flex; align-items: center; gap: 16px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; padding: 18px 22px;
}
.faixa-quem__quem { display: flex; align-items: center; gap: 16px; min-width: 0 }
.faixa-quem__av {
  width: 52px; height: 52px; border-radius: 50%; background: var(--marca); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px;
  flex: none; overflow: hidden;
}
.faixa-quem__av img { width: 100%; height: 100%; object-fit: cover }
.faixa-quem__t { font-size: 16.5px; font-weight: 600; color: var(--tinta) }
.faixa-quem__s { font-size: 14px; color: var(--apoio) }
.faixa-quem__btn {
  margin-left: auto; background: var(--marca); color: #FFFFFF; text-decoration: none;
  border-radius: 10px; padding: 12px 22px; font-size: 15px; font-weight: 600; white-space: nowrap; flex: none;
}
.faixa-quem__btn:hover { background: var(--marca-hover); color: #FFFFFF }

/* O AVISO LEGAL que fecha as seis pranchetas NAO virou uma faixa nova: ele
   entrou na primeira linha do rodape que cada pagina ja tinha. A prancheta e
   uma tela so, entao ali o rodape aparece logo abaixo da faixa; nas paginas
   de verdade, que tem milhares de pixels, uma segunda tarja de aviso a 900px
   do topo e outro rodape la embaixo seriam dois avisos disputando o mesmo
   papel — e o de baixo ja diz mais. */

/* ============================== O CELULAR ================================= */
/* A prancheta desenha uma tela de 1440. O celular e meu, e a regra dele e
   "facil de mexer, no computador E no celular": uma coluna so, o cartao
   embaixo do texto, e os campos com altura de dedo. Medido a 375px. */
@media (max-width: 1100px) {
  .topo__in { gap: 26px }
  .topo__texto h1 { font-size: 34px }
}
@media (max-width: 900px) {
  :root { --topo-altura: 760px }
  .topo__in { flex-direction: column; align-items: stretch; padding: 22px 0 28px }
  .topo__texto h1 { font-size: 30px }
  .topo__texto p { font-size: 16px; max-width: none }
  .cartao30 { flex: none }
  .pilares { grid-template-columns: 1fr }
}
@media (max-width: 680px) {
  /* QUEM ROLA E A BARRA INTEIRA, e nao so as abas: o achado de agosto/2026
     continua valendo. Logo, ficha e lua nao encolhem; sem isto eles empurram
     a PAGINA e o site inteiro passa a rolar de lado. */
  .topnav__inner {
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    gap: 16px; padding: 12px 0;
  }
  .topnav__inner::-webkit-scrollbar { display: none }
  .topnav__links { overflow: visible; gap: 16px }
  .topnav__links a { font-size: 14px }
  .topnav__nome { font-size: 15px }
  /* No celular a ficha fica so a bolinha: o nome por extenso somado as seis
     abas faria a barra rolar o dobro antes de chegar na ultima aba. O nome
     continua na faixa "Quem vai te atender", logo abaixo. */
  .topnav__quem { display: none }
  .topnav__ficha { gap: 8px }
  /* A DICA DE QUE TEM MAIS MENU A DIREITA — achado da vistoria de 22/08/2026 e
     mantido no desenho novo: a barra rola de lado no celular, a barra de
     rolagem esta escondida, e nada avisava. Um degrade com uma seta, que some
     quando o menu chega ao fim; a classe `topnav--fim` e ligada pelo script
     que mora ao lado do menu em cada pagina. O degrade termina na cor da
     barra NAQUELE PONTO (a direita do topo do cabecalho), nao no bordo chapado
     de antes. */
  .topnav::after {
    content: '\203A'; position: absolute; top: 0; right: 0; bottom: 0; width: 40px;
    display: flex; align-items: center; justify-content: flex-end; padding-right: 9px;
    color: rgba(255,255,255,.9); font-size: 24px; line-height: 1; pointer-events: none;
    background: linear-gradient(to right, rgba(31,19,25,0), #23141A 60%);
  }
  .topnav--fim::after { display: none }
  .topo__texto h1 { font-size: 27px }
  .topo__acoes { gap: 10px }
  .topo__acoes a { flex: 1 1 100%; text-align: center; padding: 13px 18px; font-size: 15px }
  .faixa-quem { flex-direction: column; text-align: center; gap: 12px }
  .faixa-quem__btn { margin-left: 0; width: 100%; text-align: center }
}
@media (max-width: 420px) {
  :root { --topo-altura: 800px }
  .topo__texto h1 { font-size: 25px }
}