/* O SISTEMA DE MARCA — os tokens moram aqui, e só aqui.
 *
 * 🚨 ATÉ 20/09/2026 ESTA PALETA ESTAVA COPIADA EM 10 PÁGINAS. Trocar
 * uma cor exigia editar dez arquivos, e bastava esquecer um para o
 * portal ficar com dois azuis levemente diferentes — o tipo de defeito
 * que ninguém reporta e todo mundo sente.
 *
 * Regra: cor, tipografia e espaçamento vêm daqui. Página define só o
 * que é dela.
 *
 * ── as cores, e o que cada uma SIGNIFICA ──────────────────────────
 *
 * Isto não é decoração: é vocabulário. Usar verde num aviso de risco
 * ou dourado num botão comum destrói o significado dos dois.
 *
 *   marinho  fundo institucional
 *   branco   painel, onde o conteúdo vive
 *   verde    ação e ciência validada
 *   ciano    tecnologia e ferramenta
 *   dourado  EXCLUSIVO do Ouro. Em mais nada.
 *   âmbar    atenção
 *   tijolo   erro e risco
 */

:root {
  /* institucional */
  --navy:        #061735;
  --navy-2:      #0B2450;
  --navy-3:      #0A1C3F;

  /* ação e ciência validada */
  --green:       #15A34A;
  --green-bright:#38C463;
  --green-bg:    rgba(21, 163, 74, .1);

  /* tecnologia */
  --blue:        #2E86DE;
  --blue-soft:   #7FB6EC;
  --ciano:       #22B8CF;
  --ciano-bg:    rgba(34, 184, 207, .12);

  /* 🚨 dourado: SÓ Ouro. Se aparecer num botão comum, perdeu o sentido. */
  --ouro:        #C79A2E;
  --ouro-claro:  #E8C567;
  --ouro-bg:     rgba(199, 154, 46, .13);

  /* estados */
  --ambar:       #B45309;
  --ambar-bg:    rgba(180, 83, 9, .12);
  --vermelho:    #9A3412;
  --vermelho-bg: rgba(154, 52, 18, .1);

  /* superfícies e texto — tema claro */
  --platinum:    #C6D3E4;
  --silver:      #8FA3BF;
  --paper:       #F6F9FD;
  --paper-2:     #EBF1F9;
  --card:        #FFFFFF;
  --ink:         #08111F;
  --ink-soft:    #40536E;
  --line:        #D8E2EF;
  --line-forte:  #B9C9DE;

  /* tipografia */
  --serifa:  Fraunces, Georgia, "Times New Roman", serif;
  --sans:    Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* 🚨 OS NÍVEIS DE EVIDÊNCIA — o vocabulário da casa.
   *
   * Estes nomes já existiam na biblioteca, e o sistema os ABSORVE em
   * vez de inventar um conjunto paralelo. Duas paletas para a mesma
   * ideia dariam duas cores para "aprovado" — e aí a etiqueta deixa de
   * significar coisa alguma.
   *
   *   apr  registro aprovado           est  em estudo
   *   ens  ensaio clínico em humanos   cos  uso cosmético
   *   pre  pré-clínico (animal/célula)
   */
  --ev-apr: #0F7B3A;  --ev-apr-bg: rgba(21, 163, 74, .12);
  --ev-ens: #1E6FB8;  --ev-ens-bg: rgba(46, 134, 222, .12);
  --ev-est: #6D4AA8;  --ev-est-bg: rgba(109, 74, 168, .12);
  --ev-cos: #996515;  --ev-cos-bg: rgba(153, 101, 21, .12);
  --ev-pre: #9A3412;  --ev-pre-bg: rgba(154, 52, 18, .11);

  /* largura e respiro das páginas largas */
  --maxw: 1120px;
  --pad:  clamp(18px, 4.5vw, 44px);

  /* ritmo */
  --raio:      20px;
  --raio-p:    14px;
  --respiro:   clamp(20px, 4.5vw, 32px);
}

/* ⚠️ Os dois blocos abaixo redefinem SÓ os tokens, nunca componentes.
   Cor cuja única definição mora dentro de um `@media` some no tema que
   não casar — é o defeito clássico de artefato ilegível. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:       #050D1C;
    --paper-2:     #0A1830;
    --card:        #0D1D3A;
    --ink:         #EAF1FA;
    --ink-soft:    #9FB3CE;
    --line:        #1B2F52;
    --line-forte:  #2A4570;
    --vermelho:    #F0A075;
    --vermelho-bg: rgba(200, 80, 40, .15);
    --ambar:       #F0B775;
    --ambar-bg:    rgba(180, 120, 20, .16);
    --ouro:        #E8C567;
    --ouro-bg:     rgba(199, 154, 46, .18);
    --ev-apr: #5FD98A;  --ev-apr-bg: rgba(21, 163, 74, .18);
    --ev-ens: #7FB6EC;  --ev-ens-bg: rgba(46, 134, 222, .18);
    --ev-est: #B79BEA;  --ev-est-bg: rgba(139, 108, 214, .18);
    --ev-cos: #E8BC70;  --ev-cos-bg: rgba(200, 150, 50, .16);
    --ev-pre: #F0A075;  --ev-pre-bg: rgba(200, 80, 40, .17);
  }
}
:root[data-theme="dark"] {
  --paper:       #050D1C;
  --paper-2:     #0A1830;
  --card:        #0D1D3A;
  --ink:         #EAF1FA;
  --ink-soft:    #9FB3CE;
  --line:        #1B2F52;
  --line-forte:  #2A4570;
  --vermelho:    #F0A075;
  --vermelho-bg: rgba(200, 80, 40, .15);
  --ambar:       #F0B775;
  --ambar-bg:    rgba(180, 120, 20, .16);
  --ouro:        #E8C567;
  --ouro-bg:     rgba(199, 154, 46, .18);
  --ev-apr: #5FD98A;  --ev-apr-bg: rgba(21, 163, 74, .18);
  --ev-ens: #7FB6EC;  --ev-ens-bg: rgba(46, 134, 222, .18);
  --ev-est: #B79BEA;  --ev-est-bg: rgba(139, 108, 214, .18);
  --ev-cos: #E8BC70;  --ev-cos-bg: rgba(200, 150, 50, .16);
  --ev-pre: #F0A075;  --ev-pre-bg: rgba(200, 80, 40, .17);
}

/* ── base ─────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--ink);
  min-height: 100vh;
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serifa);
  font-weight: 600;
  line-height: 1.16;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }
a { color: var(--blue); }

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--green-bright);
  outline-offset: 2px;
  border-radius: 6px;
}
[hidden] { display: none !important; }

/* Números que se comparam ficam alinhados — dose, preço, contagem. */
.num, .linhas span:last-child {
  font-variant-numeric: tabular-nums;
}

/* ── componentes que toda página usa ──────────────────────────────── */

.painel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--raio);
  padding: var(--respiro);
}

.marca-topo {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--serifa);
  font-weight: 600;
  font-size: 19px;
  color: #fff;
  text-decoration: none;
}
/* ⚠️ A logo pedia o dobro do tamanho: ela é 3D e some a 40px. */
.marca-topo img { width: 74px; height: 74px; object-fit: contain; }
@media (max-width: 560px) { .marca-topo img { width: 58px; height: 58px; } }

/* 🚨 O selo do Ouro é o ÚNICO lugar onde o dourado aparece. */
.selo-ouro {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border-radius: 100px;
  background: var(--ouro-bg);
  border: 1px solid var(--ouro);
  color: var(--ouro);
  font: 600 13px/1 var(--sans);
  white-space: nowrap;
}

/* As etiquetas de nível de evidência. Cada cor é uma afirmação sobre
   o que se sabe — por isso elas vêm dos tokens `--ev-*`, e não de
   verde/azul genéricos. */
.nivel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 100px;
  font: 600 11.6px/1.35 var(--sans);
  white-space: nowrap;
}
.nivel.apr { background: var(--ev-apr-bg); color: var(--ev-apr); border: 1px solid var(--ev-apr); }
.nivel.ens { background: var(--ev-ens-bg); color: var(--ev-ens); border: 1px solid var(--ev-ens); }
.nivel.est { background: var(--ev-est-bg); color: var(--ev-est); border: 1px solid var(--ev-est); }
.nivel.cos { background: var(--ev-cos-bg); color: var(--ev-cos); border: 1px solid var(--ev-cos); }
.nivel.pre { background: var(--ev-pre-bg); color: var(--ev-pre); border: 1px solid var(--ev-pre); }

button.acao {
  background: var(--green);
  color: #fff;
  border: 0;
  border-radius: 100px;
  padding: 15px 26px;
  cursor: pointer;
  font: 600 15.4px/1 var(--sans);
  transition: background .16s;
}
button.acao:hover:not(:disabled) { background: var(--green-bright); }
button.acao:disabled { background: var(--line-forte); color: var(--silver); cursor: not-allowed; }

button.fantasma {
  background: none;
  border: 1.5px solid var(--line-forte);
  color: var(--ink);
}
button.fantasma:hover:not(:disabled) { background: var(--paper-2); }

.linhas {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--raio-p);
  overflow: hidden;
}
.linhas li {
  background: var(--card);
  padding: 13px 16px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  font-size: 14.6px;
}
.linhas span:first-child { color: var(--ink-soft); }
.linhas span:last-child  { font-weight: 600; text-align: right; }

.recado { margin-top: 14px; font-size: 13.6px; color: var(--ink-soft); line-height: 1.55; }
.erro {
  background: var(--vermelho-bg);
  border: 1px solid var(--vermelho);
  border-radius: var(--raio-p);
  padding: 13px 15px;
  margin-top: 16px;
  font-size: 14.2px;
  line-height: 1.55;
}

/* ⚠️ Quem pediu menos movimento recebe menos movimento. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ══ A CASCA DA ÁREA LOGADA ═══════════════════════════════════════════
 *
 * 🚨 O CONTEÚDO É O PROTAGONISTA; A COBRANÇA FICA DISCRETA.
 *
 * Até 20/09/2026 a área logada abria com plano, situação e botão de
 * assinar — a fatura na frente do produto. Quem entra quer usar a
 * calculadora, não conferir a mensalidade. Plano e cobrança foram para
 * `/minha-conta`, e no dashboard sobrou um selo pequeno.
 *
 * A casca é UMA só, montada por `casca.js`, e serve todas as páginas de
 * dentro. Cada página desenhar o próprio menu era garantia de que um
 * item novo entraria em três lugares e faltaria no quarto.
 */

.casca { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; }

.lateral {
  background: var(--navy);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
}
.lateral .marca-topo { font-size: 17px; }
.lateral nav { display: flex; flex-direction: column; gap: 3px; }

.lateral a.item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-radius: 11px;
  color: var(--platinum);
  text-decoration: none;
  font: 500 14.6px/1.2 var(--sans);
}
.lateral a.item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.lateral a.item[aria-current="page"] {
  background: rgba(46, 134, 222, .2);
  color: #fff;
  box-shadow: inset 2px 0 0 var(--ciano);
}
/* ⚠️ Item fechado aparece FECHADO, e não some: saber o que se ganha ao
   assinar é metade do motivo de assinar. */
.lateral a.item.travado { opacity: .5; }
.lateral a.item .cadeado { margin-left: auto; font-size: 11px; }

.lateral .pe-lateral {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(198, 211, 228, .16);
  font: italic 400 13px/1.5 var(--serifa);
  color: var(--silver);
}

.conteudo { background: var(--paper); padding: clamp(20px, 3.4vw, 38px); min-width: 0; }

.cabeca-painel {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: clamp(18px, 3vw, 30px);
}
.cabeca-painel h1 { font-size: clamp(25px, 3.4vw, 33px); }
.cabeca-painel .oi { color: var(--ink-soft); font-size: 15px; margin-top: 6px; }

/* o selo de plano: dourado só no Ouro, cinza-azulado no Start */
.selo-plano {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px; border-radius: 100px;
  font: 600 13px/1 var(--sans); white-space: nowrap;
  background: var(--paper-2); border: 1px solid var(--line-forte); color: var(--ink-soft);
}
.selo-plano.ouro { background: var(--ouro-bg); border-color: var(--ouro); color: var(--ouro); }

/* ── celular: a lateral vira barra no topo ────────────────────────── */
@media (max-width: 900px) {
  .casca { grid-template-columns: 1fr; }
  .lateral {
    position: static; height: auto; gap: 14px;
    padding: 16px 14px 12px;
  }
  .lateral nav {
    flex-direction: row; gap: 7px;
    overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: none;
  }
  .lateral nav::-webkit-scrollbar { display: none; }
  .lateral a.item { padding: 9px 14px; white-space: nowrap; }
  .lateral a.item[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--ciano); }
  .lateral .pe-lateral { display: none; }
}

/* O dashboard respira mais que um formulário, mas não estica sem fim
   numa tela de 27 polegadas: linha longa demais se lê pior. */
.largo { max-width: var(--maxw); }

/* ⚠️ Dentro da casca, o miolo alinha com o TÍTULO — e não se centraliza.
   As páginas de dentro têm `margin: 0 auto` para quando são a página
   inteira; no dashboard isso empurrava o formulário da calculadora para
   o meio da área, deixando um buraco à esquerda do título. */
.conteudo > .tudo { margin-left: 0; margin-right: 0; }

/* ══ ÍCONES ═══════════════════════════════════════════════════════════
 * Traço, herdando `currentColor` — o mesmo desenho serve claro e
 * escuro, e assume a cor de onde está.
 */
.ic { width: 19px; height: 19px; flex: none; }
.lateral a.item .ic { opacity: .82; }
.lateral a.item[aria-current="page"] .ic { opacity: 1; }
.ic-cartao { width: 26px; height: 26px; margin-bottom: 4px; }

/* ══ CARTÕES COM TOM ══════════════════════════════════════════════════
 * 🚨 A cor segue o SIGNIFICADO do sistema, e não o gosto: verde é
 * ciência validada, ciano é ferramenta, azul é leitura. Cartão
 * colorido à toa vira enfeite e para de informar.
 */
.cartao.tom-verde .ic-cartao { color: var(--green); }
.cartao.tom-ciano .ic-cartao { color: var(--ciano); }
.cartao.tom-azul  .ic-cartao { color: var(--blue); }

.cartao.tom-verde { background: linear-gradient(180deg, var(--green-bg), transparent 62%); }
.cartao.tom-ciano { background: linear-gradient(180deg, var(--ciano-bg), transparent 62%); }
.cartao.tom-azul  { background: linear-gradient(180deg, rgba(46,134,222,.1), transparent 62%); }

/* ⚠️ Travado perde a cor junto com o resto: um cartão fechado pintado
   de verde diria "disponível" e "fechado" ao mesmo tempo. */
.cartao.travado { background: var(--card); }
.cartao.travado .ic-cartao { color: var(--ink-soft); }

/* ══ VOLTAR ═══════════════════════════════════════════════════════════
 * 🚨 O BOTÃO DO NAVEGADOR NÃO SERVE AQUI, e o motivo é concreto: a
 * ficha da biblioteca não muda de endereço — ela troca a tela dentro da
 * mesma página. Apertar "voltar" no navegador leva a pessoa para FORA
 * do portal, e não para a lista. Quem abriu três fichas seguidas
 * precisa apertar três vezes para sair.
 *
 * ⚠️ E ele é `<a>` ou `<button>` conforme o caso: quando há um destino
 * de verdade, é link (abre em aba nova, aparece no menu do botão
 * direito). Quando só troca de tela, é botão.
 */
.voltar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 12px;
  border-radius: 100px;
  border: 1px solid var(--line-forte);
  background: var(--card);
  color: var(--ink-soft);
  text-decoration: none;
  font: 600 13.8px/1 var(--sans);
  cursor: pointer;
  transition: border-color .16s, color .16s, background .16s;
}
.voltar:hover { border-color: var(--blue); color: var(--blue); background: var(--paper-2); }
.voltar .ic { width: 16px; height: 16px; }

/* No topo escuro, ele inverte para não sumir no fundo. */
.cabeca .voltar, .hero .voltar {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(198, 211, 228, .3);
  color: var(--platinum);
}
.cabeca .voltar:hover, .hero .voltar:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(198, 211, 228, .6);
  color: #fff;
}

/* ══ MOTIVOS DE BIOCIÊNCIA ════════════════════════════════════════════
 *
 * A prancha pede riqueza visual: hélice, molécula, célula. Estes são
 * DESENHADOS em SVG, e a escolha tem três razões:
 *
 *   · nitidez — vetor não borra em tela de retina nem em 4K
 *   · peso — o site inteiro ganha isto por alguns KB de CSS
 *   · 🚨 HONESTIDADE — são formas geométricas, claramente ilustrativas.
 *     Imagem que PARECE microscopia real, num portal que organiza por
 *     nível de evidência, sugere dado que não existe. O desenho abstrato
 *     dá a mesma presença sem afirmar nada.
 *
 * ⚠️ Todos ficam atrás do conteúdo (`z-index:0` e `pointer-events:none`)
 * e somem para quem pediu menos movimento.
 */
.bio { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bio > svg { position: absolute; }

/* a hélice: duas senoides cruzadas com os "degraus" entre elas */
.bio .helice {
  right: 2%; top: -8%;
  width: clamp(120px, 15vw, 210px); height: auto;
  color: var(--blue-soft); opacity: .2;
}
/* a molécula: nós ligados, o motivo de "peptídeo" */
.bio .molecula {
  left: -6%; bottom: -18%;
  width: clamp(200px, 26vw, 360px); height: auto;
  color: var(--green-bright); opacity: .14;
}
/* a célula: círculos concêntricos irregulares */
.bio .celula {
  right: 12%; bottom: -22%;
  width: clamp(160px, 20vw, 280px); height: auto;
  color: var(--ciano); opacity: .12;
}

@media (max-width: 760px) {
  /* No celular só a hélice fica: três motivos numa tela estreita viram
     ruído atrás do texto, e texto sobre ruído se lê pior. */
  .bio .molecula, .bio .celula { display: none; }
  .bio .helice { opacity: .12; right: -22%; }
}

@media (prefers-reduced-motion: reduce) { .bio { display: none; } }

/* O conteúdo sobe por cima dos motivos. */
.hero .wrap, .cabeca .wrap, .intro .wrap { position: relative; z-index: 1; }

/* ══ O RODAPÉ ═════════════════════════════════════════════════════════
 *
 * 🚨 ESTAS MESMAS REGRAS ESTAVAM COPIADAS EM QUATRO PÁGINAS — a mesma
 * duplicação da paleta, um andar abaixo. O texto muda de página para
 * página (e deve mudar: o rodapé da biblioteca aponta para outro lugar
 * que o da home); a FORMA é uma só.
 */
footer {
  background: var(--navy);
  color: var(--silver);
  padding-block: 30px;
  font-size: 13.4px;
}
footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
}
footer a { color: var(--silver); text-decoration: none; display: inline-block; padding-block: 5px; }
footer a:hover { color: #fff; }

/* ══ A ASSINATURA DE MARCA ════════════════════════════════════════════
 *
 * A faixa escura que fecha as telas da prancha: uma frase e os três
 * pilares — conhecimento, saúde, longevidade. É o mesmo trio que está
 * na logo, e por isso não é enfeite: é a promessa da marca repetida
 * onde a pessoa acabou de usar o produto.
 *
 * ⚠️ NÃO AFIRMA NADA QUE PRECISE DE FONTE. Foi de propósito: esta
 * faixa aparece embaixo da biblioteca, que é organizada por nível de
 * evidência. Um número ali ("52 fichas", "3 mil leitores") viraria
 * alegação, e alegação sem fonte é o que este portal existe para não
 * fazer. Frase de valor não precisa de referência; dado precisa.
 */
.assinatura {
  background: var(--navy-2);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.assinatura::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .55;
  background:
    radial-gradient(640px 320px at 12% 30%, rgba(46, 134, 222, .3), transparent 62%),
    radial-gradient(520px 300px at 88% 80%, rgba(21, 163, 74, .22), transparent 64%);
}
.assinatura .wrap {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 44px);
  padding-block: clamp(24px, 4vw, 38px);
}
.assinatura .frase {
  font-family: var(--serifa);
  font-size: clamp(18px, 2.4vw, 25px);
  line-height: 1.3;
  max-width: 21ch;
  text-wrap: balance;
}
.assinatura .pilares-marca {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 3.4vw, 42px);
}
.assinatura .pilares-marca li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font: 500 13.4px/1.2 var(--sans);
  color: var(--platinum);
  text-align: center;
}
/* ⚠️ Os três ícones têm a MESMA cor de propósito. Pintar um de verde e
   outro de ciano sugeriria que são categorias diferentes do sistema —
   e eles não são: são três faces da mesma promessa. */
.assinatura .pilares-marca .ic {
  width: 27px;
  height: 27px;
  color: var(--blue-soft);
}

/* Dentro da casca a faixa encosta nas bordas do conteúdo. */
.conteudo > .assinatura {
  border-radius: var(--raio);
  margin-top: clamp(22px, 4vw, 34px);
  max-width: var(--maxw);
}
.conteudo > .assinatura .wrap { padding-inline: clamp(20px, 3.4vw, 34px); }

/* ══ O AVATAR ═════════════════════════════════════════════════════════
 * A inicial da pessoa, e não uma foto: o portal não pede foto a
 * ninguém, e um ícone genérico de silhueta diria "sem foto" — que é
 * informação sobre nada.
 */
.avatar {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--paper-2);
  border: 1px solid var(--line-forte);
  color: var(--ink-soft);
  font: 600 15px/1 var(--sans);
  text-transform: uppercase;
}

/* selo e avatar andam juntos, no canto do cabeçalho */
.cabeca-dir { display: flex; align-items: center; gap: 12px; flex: none; }