/* =============================================================================
   Clari.IA · componentes comuns à landing e ao app (padrao.css)
   =============================================================================
   Servido em /padrao.css pelos dois sites (Caddy, como o /tokens.css). Regra do
   Pedro (30/09/2026): COMPONENTE REUTILIZÁVEL SEMPRE; altera aqui, muda em tudo.
   Só usa tokens (`tokens.css`). Padrão visual: kodety (medição em
   ~/projetos/clari-ia/design/referencias/kodety/RELATORIO.md), com a paleta
   do clari.ia (creme, carvão, sálvia).

   Índice
     1. botão (e a varredura de cor)       6. grade de filetes
     2. rótulo de seção e pílula           7. linha do tempo
     3. título em dois tons e destaque     8. controle segmentado
     4. faixas clara e escura              9. etiqueta de estado
     5. esqueleto de seção                10. entrada ao rolar e cabeçalho que some
                                          11. campo
                                          12. ícone (Lucide)
                                          13. painel escuro e campo com ícone
   ============================================================================= */

/* ═══ 1 · botão ═════════════════════════════════════════════════════════════
   Um botão só para a landing e o app. Padrão kodety: 48px de altura, raio de
   10px, rótulo em Sora 600, sem sombra.
   REGRA 2 (Pedro, 30/09): no :hover nada sobe, nada cresce, nada ganha sombra;
   só a COR muda, e muda por VARREDURA: a cor nova atravessa o botão da esquerda
   para a direita (--t-varredura), com a borda da frente esfumada. Cada variante
   só declara a cor da varredura em --btn-varredura. Com "menos movimento" a
   varredura vira troca instantânea (token a 1ms). */

.btn3 {
  --btn-varredura: transparent;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  font: inherit;
  font-family: var(--f-display);
  font-size: 1.0547rem; /* 15px, o rótulo do herói da kodety */
  font-weight: var(--fw-semi);
  letter-spacing: -0.01em;
  line-height: 1;
  min-height: 48px;
  padding: 0 var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  text-decoration: none;
  transition:
    color var(--t-fast),
    border-color var(--t-fast);
}
/* A varredura: uma camada atrás do rótulo (isolation cria o contexto, z-index -1
   fica entre o fundo do botão e o texto). 125% de largura: os 25% esfumados
   ficam fora do botão quando a cor cobre tudo. */
.btn3::before {
  content: '';
  position: absolute;
  inset: 0 -25% 0 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--btn-varredura) 80%, transparent);
  transform: translateX(-101%);
  transition: transform var(--t-varredura);
  pointer-events: none;
}
.btn3:hover::before,
.btn3:focus-visible::before {
  transform: translateX(0);
}
.btn3:focus-visible {
  outline: 3px solid var(--c-primary-strong);
  outline-offset: 2px;
}
/* No escuro o anel é sálvia clara: o verde forte sobre o carvão dava 2,78:1,
   abaixo dos 3:1 de contraste de foco (revisão 30/09, I-1). */
.faixa-escura .btn3:focus-visible,
.painel-escuro .btn3:focus-visible,
.painel-carvao .btn3:focus-visible {
  outline-color: var(--c-primary);
}

/* Primário: carvão, e a varredura é um preto mais fundo (o verde não combinava). */
.btn3-primario {
  --btn-varredura: var(--c-surface-deep-hover);
  background: var(--c-surface-deep);
  color: var(--c-ink-inverse);
}

/* Claro: sálvia com tinta escura, para fundo escuro (cartão carvão, faixa escura,
   cabeçalho sobre foto). A varredura clareia. */
.btn3-claro,
.painel-carvao .btn3-primario,
.faixa-escura .btn3-primario,
.painel-escuro .btn3-primario {
  --btn-varredura: var(--c-primary-soft);
  background: var(--c-primary);
  color: var(--c-primary-ink);
}

/* Secundário: transparente, contorno de controle e tinta principal (D-15).
   A varredura é o véu claro. */
.btn3-secundario {
  --btn-varredura: var(--c-hover-claro);
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-border-controle);
}
.painel-carvao .btn3-secundario,
.faixa-escura .btn3-secundario,
.painel-escuro .btn3-secundario {
  --btn-varredura: var(--c-hover-escuro);
  color: var(--c-ink-inverse);
  border-color: var(--c-border-controle-inverso);
}

/* Seta no fim do rótulo: um botão que aponta lê-se como passagem. */
.btn3-seta::after {
  content: '';
  width: 1.15em;
  height: 1.15em;
  background: currentColor;
  -webkit-mask: var(--icone-seta) center / contain no-repeat;
  mask: var(--icone-seta) center / contain no-repeat;
}

/* Baixo (barra da tela, «Sair», cabeçalho): 44px, o alvo de toque mínimo. */
.btn3-baixo {
  min-height: var(--touch-min);
  padding: 0 var(--s-4);
  font-size: var(--fs-sm);
}

/* Desabilitado nunca é só opacidade: sobre creme, opacidade fica ilegível. */
.btn3[disabled],
.btn3[aria-disabled='true'] {
  background: var(--c-disabled-surface);
  color: var(--c-disabled-ink);
  border-color: transparent;
  cursor: not-allowed;
  transform: none;
}
.btn3[disabled]::before,
.btn3[aria-disabled='true']::before {
  display: none;
}

/* Pastilha (seletor de período, abas pequenas): pílula baixa, sem varredura. */
.btn3-pastilha {
  border-radius: var(--r-full);
  min-height: var(--touch-min);
  padding: 0 var(--s-4);
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  background: transparent;
  color: var(--c-ink-subtle);
}
.btn3-pastilha[aria-pressed='true'] {
  background: var(--c-surface-deep);
  color: var(--c-ink-inverse);
}

/* ═══ 2 · rótulo de seção e pílula ══════════════════════════════════════════
   O rótulo da kodety: uma grade de 4 pontos em sálvia e a palavra em DM Sans,
   SEM caixa alta (preferência do Pedro; resolve o D-40). Vai na coluna estreita
   da seção ou em cima do título. */

.rotulo-secao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-ui);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: inherit;
  margin: 0;
}
.rotulo-secao::before {
  content: '';
  flex: none;
  width: 11px;
  height: 11px;
  background: radial-gradient(circle, var(--c-primary-strong) 1.6px, transparent 1.9px) 0
    0 / 5.5px 5.5px;
}
.faixa-escura .rotulo-secao::before,
.painel-carvao .rotulo-secao::before {
  background: radial-gradient(circle, var(--c-primary) 1.6px, transparent 1.9px) 0 0 /
    5.5px 5.5px;
}
.rotulo-secao-pequeno {
  font-size: var(--fs-sm);
}

/* Pílula de destaque (a "eyebrow" do herói): fundo um tom abaixo do creme, com
   um trecho em caixa branca (<b>). */
.pilula-destaque {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 6px 6px 6px var(--s-4);
  border-radius: var(--r-sm);
  background: var(--c-bg-fundo);
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  color: var(--c-ink);
}
.pilula-destaque b {
  font-weight: var(--fw-medium);
  background: var(--c-surface);
  color: var(--c-primary-strong);
  border-radius: 2px;
  padding: 6px var(--s-4);
}

/* ═══ 3 · título em dois tons e palavra em destaque ═════════════════════════
   Padrão kodety: a PRIMEIRA parte do título mais clara (70%), a segunda na cor
   cheia. Marcação: <h2 class="titulo-duotom"><span>Primeira</span> segunda</h2>.
   A palavra em destaque é a sálvia forte (o roxo da kodety, na nossa paleta). */

.titulo-duotom > span:first-child {
  color: color-mix(in srgb, currentColor 62%, transparent);
}
.palavra-destaque {
  color: var(--c-primary-strong);
}
.faixa-escura .palavra-destaque {
  color: var(--c-primary);
}

/* ═══ 4 · faixas clara e escura ═════════════════════════════════════════════
   O ritmo da página vem da alternância de faixas na largura toda, não de
   cartões com sombra. Na faixa escura a hierarquia do texto é por opacidade do
   creme. */

.faixa {
  background: var(--c-bg);
  color: var(--c-ink);
}
.faixa-escura {
  background: var(--c-surface-deep);
  color: var(--c-ink-inverse);
}
.faixa-escura .texto-apoio {
  color: color-mix(in srgb, var(--c-ink-inverse) 70%, transparent);
}

/* ═══ 5 · esqueleto de seção ════════════════════════════════════════════════
   Padrão kodety: conteúdo de 1205px com margem lateral de 5vw, respiro fixo em
   cima e embaixo (64px no celular, 120px no computador), e no computador duas
   colunas: a estreita do rótulo (90px) e o conteúdo, com 60px entre elas. As
   seções encostam umas nas outras; o respiro é todo interno. */

.secao {
  padding-block: var(--s-secao);
}
.secao-conteudo {
  width: min(var(--largura-conteudo), 100% - 2 * var(--margem-lateral));
  margin-inline: auto;
}
.secao-grade {
  display: grid;
  gap: var(--s-6);
}
@media (min-width: 768px) {
  .secao-grade {
    grid-template-columns: var(--col-rotulo) minmax(0, 1fr);
    column-gap: var(--gap-rotulo);
  }
}
/* A barra de acento de 3px ao lado do rótulo, na linha-guia. */
.secao-grade > .rotulo-secao {
  align-self: start;
}
.texto-apoio {
  color: var(--c-ink-muted);
  font-size: var(--fs-body);
  line-height: 1.5;
  max-width: 52ch;
}

/* ═══ 6 · grade de filetes ══════════════════════════════════════════════════
   Estrutura desenhada por LINHAS de 1px, raio 0, sem sombra (preço, as 4
   consultas, recursos). Colunas por largura: 1 no celular, --grade-colunas a
   partir de 768px. */

.grade-filete {
  --grade-colunas: 3;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--c-filete);
  border-left: 1px solid var(--c-filete);
}
.grade-filete > * {
  border-right: 1px solid var(--c-filete);
  border-bottom: 1px solid var(--c-filete);
  padding: var(--s-6) var(--s-5);
  margin: 0;
}
@media (min-width: 768px) {
  .grade-filete {
    grid-template-columns: repeat(var(--grade-colunas), minmax(0, 1fr));
  }
}
.faixa-escura .grade-filete,
.faixa-escura .grade-filete > * {
  border-color: var(--c-filete-escuro);
}

/* ═══ 7 · linha do tempo ════════════════════════════════════════════════════
   Pontos ligados por um filete vertical (as 4 consultas do ano, exames e
   resultados, perguntas frequentes). Estado no item: data-estado="feito" |
   "proximo" | "futuro". Marcação: <ol class="linha-do-tempo"><li>…</li></ol>. */

.linha-do-tempo {
  list-style: none;
  margin: 0;
  padding: 0;
}
.linha-do-tempo > li {
  position: relative;
  padding: 0 0 var(--s-6) calc(22px + var(--s-4));
}
.linha-do-tempo > li:last-child {
  padding-bottom: 0;
}
.linha-do-tempo > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--c-primary-strong);
  background: var(--c-surface);
  box-shadow: inset 0 0 0 5px var(--c-surface);
  box-sizing: border-box;
}
.linha-do-tempo > li::after {
  content: '';
  position: absolute;
  left: 10.5px;
  top: 26px;
  bottom: 0;
  width: 1px;
  background: var(--c-filete);
}
.linha-do-tempo > li:last-child::after {
  display: none;
}
.linha-do-tempo > li[data-estado='feito']::before {
  background: var(--c-primary-strong);
}
.linha-do-tempo > li[data-estado='proximo']::before {
  background: var(--c-primary);
  border-width: 2px;
}
.linha-do-tempo > li[data-estado='futuro']::before {
  border-color: var(--c-border-controle);
}
.linha-do-tempo .item-titulo {
  font-family: var(--f-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-display);
  line-height: 1.3;
  margin: 0 0 var(--s-1);
}
.linha-do-tempo .item-texto {
  color: var(--c-ink-muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
  margin: 0;
}

/* Compacta: para listas longas de etapas (o trilho de 13 etapas da anamnese no
   computador). Ponto de 12px, texto DM Sans 14px direto no <li> (ou em
   .item-titulo) e passo curto; o estado aceso é o "proximo".
   Usar junto: <ol class="linha-do-tempo linha-do-tempo-compacta">. */
.linha-do-tempo-compacta > li {
  padding: 0 0 var(--s-3) calc(12px + var(--s-3));
  font-size: var(--fs-sm);
  line-height: 1.3;
  color: var(--c-ink-subtle);
}
.linha-do-tempo-compacta > li::before {
  top: 3px;
  width: 12px;
  height: 12px;
  box-shadow: none;
}
.linha-do-tempo-compacta > li::after {
  left: 5.5px;
  top: 17px;
}
.linha-do-tempo-compacta > li[data-estado='proximo'] {
  color: var(--c-ink);
  font-weight: var(--fw-medium);
}
.linha-do-tempo-compacta > li[data-estado='feito'] {
  color: var(--c-ink-muted);
}
.linha-do-tempo-compacta .item-titulo {
  font: inherit;
  letter-spacing: 0;
  margin: 0;
}

/* ═══ 8 · controle segmentado ═══════════════════════════════════════════════
   Duas ou três opções lado a lado num trilho (Entrar | Criar conta). Marcação:
   <div class="segmentado" role="tablist"><button role="tab" aria-selected="true">…
   Também serve com <a> (aria-current="page"). */

.segmentado {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-sm);
  background: var(--c-bg-fundo);
}
.segmentado > * {
  flex: 1;
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--c-ink-muted);
  font: inherit;
  font-family: var(--f-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--t-fast),
    color var(--t-fast);
}
.segmentado > *:hover {
  color: var(--c-ink);
}
.segmentado > [aria-selected='true'],
.segmentado > [aria-checked='true'],
.segmentado > [aria-current='page'] {
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: var(--e-1);
}
.segmentado > *:focus-visible {
  outline: 2px solid var(--c-primary-strong);
  outline-offset: 1px;
}

/* ═══ 9 · etiqueta de estado ════════════════════════════════════════════════
   Pílula miúda com um TRAÇO colorido na frente (realizada, em X dias, pendente).
   A cor do estado vem de --etiqueta-cor; contorno fininho por sombra interna
   (padrão kodety). */

.etiqueta {
  --etiqueta-cor: var(--c-ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: var(--r-full);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--etiqueta-cor) 40%, transparent);
  color: var(--etiqueta-cor);
  font-family: var(--f-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
}
.etiqueta::before {
  content: '';
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background: var(--etiqueta-cor);
}
.etiqueta-ok {
  --etiqueta-cor: var(--c-primary-strong);
}
.etiqueta-aviso {
  --etiqueta-cor: var(--c-accent-strong);
}
.faixa-escura .etiqueta,
.painel-carvao .etiqueta,
.painel-escuro .etiqueta {
  --etiqueta-cor: var(--c-primary);
}

/* ═══ 10 · entrada ao rolar e cabeçalho que some ════════════════════════════
   Com /padrao.js. Só esconde o que vai entrar quando o JS marca o <html> com
   .js-revelar: sem JS, tudo aparece de imediato. Item: data-revelar; o JS põe a
   cascata em --revelar-i. Cabeçalho: .cabecalho-some (o JS põe .escondido ao
   descer e tira ao subir). "Menos movimento": tokens a 0. */

.js-revelar [data-revelar] {
  opacity: 0;
  transform: translateY(var(--d-entrada));
  transition:
    opacity var(--t-entrada),
    transform var(--t-entrada);
  transition-delay: calc(var(--revelar-i, 0) * var(--d-cascata));
}
.js-revelar [data-revelar].revelado {
  opacity: 1;
  transform: none;
}

.cabecalho-some {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: transform var(--t-base);
}
.cabecalho-some.escondido {
  transform: translateY(-100%);
}

/* Filete embaixo do cabeçalho só quando a página saiu do topo (pedido do Pedro,
   30/09: no topo, sem linha). O /padrao.js põe .rolou no <html>; sem JS, sem
   linha. */
.filete-ao-rolar {
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast);
}
.rolou .filete-ao-rolar {
  border-bottom-color: var(--c-filete);
}

/* Na impressão tudo aparece: sem rolagem, nada revelaria os blocos. */
@media print {
  .js-revelar [data-revelar] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── movimento reduzido, uma vez para todo o produto (veio do funil.css em
   30/09, para valer nas 9 páginas, inclusive as de conta) ──────────────────────────
   O tokens.css já zera as DURAÇÕES (--t-*), mas isso só alcança quem as usa por
   variável. Animações com duração literal, e as que repetem para sempre,
   escapariam. Este bloco fecha a porta de vez.

   Movimento é comunicação; para quem tem enxaqueca ou vertigem, é sintoma. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══ 11 · campo ════════════════════════════════════════════════════════════
   Desde 02/10/2026 (pedido do Pedro: «esse será o padrão de input… em tudo que
   tem input, só que menor»): campo EM LINHA, sem caixa e sem fundo, só a linha
   embaixo, que escurece no foco e fica vermelha no erro. É a versão menor do
   `.campo-linha` da etapa da conta (componentes.css §3e). Rótulo por cima;
   altura de 48px, a do botão. O textarea mantém uma moldura leve: com várias
   linhas, sem ela não se vê onde escrever. (Até 01/10 era caixa com borda e
   fundo creme, halo no foco.) */

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.campo > label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--c-ink);
}
.campo .apoio {
  font-size: var(--fs-sm);
  color: var(--c-ink-subtle);
}
/* Rótulo de um GRUPO de campos (a data em três caixas): não é `<label>` porque
   não aponta para um campo só, mas tem de ler-se igual ao rótulo comum. */
.campo > .rotulo-campo {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--c-ink);
}

/* Mensagem de erro de um campo: logo abaixo dele, ligada por
   `aria-describedby`. No fim do formulário ficava abaixo da dobra e atrás do
   rodapé fixo, e no campo sobrava só o vermelho (revisão 29/09, D-20). O
   ícone e o texto são o segundo canal: a cor sozinha não diz nada. */
.erro-campo {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--c-danger-strong);
}
.erro-campo[hidden] {
  display: none;
}
.erro-campo svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.entrada {
  font: inherit;
  font-family: var(--f-ui);
  font-size: 1.2656rem;
  min-height: 48px;
  width: 100%;
  padding: 0;
  color: var(--c-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-border-controle);
  border-radius: 0;
  transition:
    border-color var(--t-base),
    box-shadow var(--t-base);
}
.entrada::placeholder {
  color: var(--c-ink-subtle);
}
.entrada:hover {
  border-bottom-color: var(--c-ink-subtle);
}
.entrada:focus {
  outline: none;
  border-bottom-color: var(--c-ink);
  box-shadow: 0 1px 0 var(--c-ink);
}
/* Erro sempre com mensagem em texto ao lado: cor nunca é o único canal. */
.entrada.erro,
.entrada[aria-invalid='true'] {
  border-bottom-color: var(--c-danger);
  box-shadow: 0 1px 0 var(--c-danger);
}

textarea.entrada {
  min-height: 108px;
  padding: var(--s-3);
  line-height: var(--lh-body);
  border: 1px solid var(--c-border-controle);
  border-radius: var(--r-md);
  resize: vertical;
}
textarea.entrada:focus {
  border-color: var(--c-ink);
  box-shadow: 0 0 0 1px var(--c-ink);
}

/* Sufixo de unidade: cm, kg, anos, horas. */
.com-sufixo {
  position: relative;
}
.com-sufixo .entrada {
  padding-right: 46px;
}
.com-sufixo .sufixo {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-sm);
  font-style: normal;
  color: var(--c-ink-subtle);
  pointer-events: none;
}

/* ═══ 12 · ícone ═════════════════════════════════════════════════════════════
   Ícones do LUCIDE (biblioteca pronta, licença ISC; lucide-static 1.49.0), traço
   fino e cantos arredondados, como a estética da kodety. Cada um vai embutido
   aqui (data URI, aceito pela CSP `img-src data:`) e é desenhado por MÁSCARA na
   cor do texto: dentro do botão, acompanha a varredura de cor sozinho.
   Uso: <span class="icone icone-entrar" aria-hidden="true"></span> antes ou
   depois do rótulo. O rótulo do botão continua sendo o nome acessível.
   Para acrescentar um ícone: copiar o .svg do lucide-static e seguir o molde. */

.icone {
  flex: none;
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  background: currentColor;
  -webkit-mask: var(--icone) center / contain no-repeat;
  mask: var(--icone) center / contain no-repeat;
}
/* clover (Lucide), 02/10: o trevo das perguntas frequentes. */
.icone-trevo {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M16.17 7.83 2 22' /%3E %3Cpath d='M4.02 12a2.827 2.827 0 1 1 3.81-4.17A2.827 2.827 0 1 1 12 4.02a2.827 2.827 0 1 1 4.17 3.81A2.827 2.827 0 1 1 19.98 12a2.827 2.827 0 1 1-3.81 4.17A2.827 2.827 0 1 1 12 19.98a2.827 2.827 0 1 1-4.17-3.81A1 1 0 1 1 4 12' /%3E %3Cpath d='m7.83 7.83 8.34 8.34' /%3E %3C/svg%3E");
}
.icone-entrar {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m10 17 5-5-5-5' /%3E %3Cpath d='M15 12H3' /%3E %3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4' /%3E %3C/svg%3E");
}
.icone-sair {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m16 17 5-5-5-5' /%3E %3Cpath d='M21 12H9' /%3E %3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4' /%3E %3C/svg%3E");
}
.icone-seta {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M5 12h14' /%3E %3Cpath d='m12 5 7 7-7 7' /%3E %3C/svg%3E");
}
.icone-voltar {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m12 19-7-7 7-7' /%3E %3Cpath d='M19 12H5' /%3E %3C/svg%3E");
}
.icone-abaixo {
  /* Lucide chevron-down (02/10/2026: setas do número com passo). */
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m6 9 6 6 6-6' /%3E %3C/svg%3E");
}
.icone-acima {
  /* Lucide chevron-up. */
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m18 15-6-6-6 6' /%3E %3C/svg%3E");
}
.icone-sino {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M10.268 21a2 2 0 0 0 3.464 0' /%3E %3Cpath d='M22 8c0-2.3-.8-4.3-2-6' /%3E %3Cpath d='M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326' /%3E %3Cpath d='M4 2C2.8 3.7 2 5.7 2 8' /%3E %3C/svg%3E");
}
.icone-info {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Ccircle cx='12' cy='12' r='10' /%3E %3Cpath d='M12 16v-4' /%3E %3Cpath d='M12 8h.01' /%3E %3C/svg%3E");
}
.icone-agenda {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M8 2v3' /%3E %3Cpath d='M16 2v3' /%3E %3Crect x='3' y='3' width='18' height='18' rx='2' /%3E %3Cpath d='M3 9h18' /%3E %3Cpath d='M8 13h.01' /%3E %3Cpath d='M12 13h.01' /%3E %3Cpath d='M16 13h.01' /%3E %3Cpath d='M8 17h.01' /%3E %3Cpath d='M12 17h.01' /%3E %3Cpath d='M16 17h.01' /%3E %3C/svg%3E");
}
.icone-medico {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M11 2v2' /%3E %3Cpath d='M5 2v2' /%3E %3Cpath d='M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1' /%3E %3Cpath d='M8 15a6 6 0 0 0 12 0v-3' /%3E %3Ccircle cx='20' cy='10' r='2' /%3E %3C/svg%3E");
}

:root {
  --icone-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M5 12h14' /%3E %3Cpath d='m12 5 7 7-7 7' /%3E %3C/svg%3E");
}

.icone-email {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7' /%3E %3Crect x='2' y='4' width='20' height='16' rx='2' /%3E %3C/svg%3E");
}
.icone-cadeado {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Crect width='18' height='11' x='3' y='11' rx='2' ry='2' /%3E %3Cpath d='M7 11V7a5 5 0 0 1 10 0v4' /%3E %3C/svg%3E");
}
.icone-olho {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0' /%3E %3Ccircle cx='12' cy='12' r='3' /%3E %3C/svg%3E");
}
.icone-olho-fechado {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49' /%3E %3Cpath d='M14.084 14.158a3 3 0 0 1-4.242-4.242' /%3E %3Cpath d='M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143' /%3E %3Cpath d='m2 2 20 20' /%3E %3C/svg%3E");
}
.icone-escudo {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z' /%3E %3Cpath d='m9 12 2 2 4-4' /%3E %3C/svg%3E");
}
/* frasco: pedido e resultado de exames (Lucide `flask-conical`, 01/10/2026). */
.icone-exame {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2' /%3E %3Cpath d='M6.453 15h11.094' /%3E %3Cpath d='M8.5 2h7' /%3E %3C/svg%3E");
}
/* câmera: consulta por vídeo (Lucide `video`, 01/10/2026). */
.icone-video {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5' /%3E %3Crect x='2' y='6' width='14' height='12' rx='2' /%3E %3C/svg%3E");
}
/* setas em círculo: receita renovada (Lucide `refresh-cw`, 01/10/2026). */
.icone-renovar {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8' /%3E %3Cpath d='M21 3v5h-5' /%3E %3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16' /%3E %3Cpath d='M8 16H3v5' /%3E %3C/svg%3E");
}
/* linha de batimento: acompanhamento (Lucide `activity`, 01/10/2026). */
.icone-acompanhar {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2' /%3E %3C/svg%3E");
}
.icone-criar-conta {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' /%3E %3Ccircle cx='9' cy='7' r='4' /%3E %3Cline x1='19' x2='19' y1='8' y2='14' /%3E %3Cline x1='22' x2='16' y1='11' y2='11' /%3E %3C/svg%3E");
}
.icone-inicio {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8' /%3E %3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z' /%3E %3C/svg%3E");
}
.icone-prancheta {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Crect width='8' height='4' x='8' y='2' rx='1' ry='1' /%3E %3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2' /%3E %3Cpath d='M12 11h4' /%3E %3Cpath d='M12 16h4' /%3E %3Cpath d='M8 11h.01' /%3E %3Cpath d='M8 16h.01' /%3E %3C/svg%3E");
}
.icone-sem-estrela {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m10.344 4.688 1.181-2.393a.53.53 0 0 1 .95 0l2.31 4.679a2.12 2.12 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.237 3.152' /%3E %3Cpath d='m17.945 17.945.43 2.505a.53.53 0 0 1-.771.56l-4.618-2.428a2.12 2.12 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.12 2.12 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a8 8 0 0 0 .4-.099' /%3E %3Cpath d='m2 2 20 20' /%3E %3C/svg%3E");
}
.icone-registro {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z' /%3E %3Cpath d='m16 9-5.5 5.5L8 12' /%3E %3C/svg%3E");
}
.icone-formacao {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z' /%3E %3Cpath d='M22 10v6' /%3E %3Cpath d='M6 12.5V16a6 3 0 0 0 12 0v-3.5' /%3E %3C/svg%3E");
}
.icone-pergunta {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719' /%3E %3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3' /%3E %3Cpath d='M12 17h.01' /%3E %3C/svg%3E");
}
/* 01/10 noite: trending-up (evolução). */
.icone-evolucao {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M16 7h6v6' /%3E %3Cpath d='m22 7-8.5 8.5-5-5L2 17' /%3E %3C/svg%3E");
}
/* circle-x (Lucide), 02/10: o lado "Sem a Clari" do comparativo. */
.icone-recusa {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Ccircle cx='12' cy='12' r='10' /%3E %3Cpath d='m15 9-6 6' /%3E %3Cpath d='m9 9 6 6' /%3E %3C/svg%3E");
}
/* Redes no rodapé (02/10): marcas do Simple Icons (WhatsApp, Instagram, LinkedIn)
   e o envelope do Lucide (e-mail), por máscara, na cor do texto. */
.icone-whatsapp {
  --icone: url('data:image/svg+xml,%3Csvg fill=%22black%22 role=%22img%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z%22/%3E%3C/svg%3E');
}
.icone-instagram {
  --icone: url('data:image/svg+xml,%3Csvg fill=%22black%22 role=%22img%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077%22/%3E%3C/svg%3E');
}
.icone-linkedin {
  --icone: url('data:image/svg+xml,%3Csvg fill=%22black%22 role=%22img%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z%22/%3E%3C/svg%3E');
}
.icone-confere {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Ccircle cx='12' cy='12' r='10' /%3E %3Cpath d='m16 9-5.5 5.5L8 12' /%3E %3C/svg%3E");
}

/* Link com ícone (fora de botão): alinha e separa o ícone da palavra. O .btn3
   já tem o próprio espaçamento. */
.com-icone {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}

/* Botão que ocupa a largura toda, rótulo à esquerda e seta à direita (o
   "Sign in" do login da kodety). Usar junto com .btn3-seta. */
.btn3-largo {
  width: 100%;
  justify-content: space-between;
}

/* ═══ 13 · painel escuro e campo com ícone ═══════════════════════════════════
   Painel carvão (o lado do formulário no login da kodety): texto creme, campo
   escuro que acende em sálvia no foco. O campo com ícone ganha uma CÉLULA à
   esquerda com o ícone, separada por filete, e o de senha um botão de olho à
   direita. Quem monta é o /padrao.js: basta pôr no <input> data-icone="email"
   (ou cadeado, criar-conta...) e, na senha, data-olho. Funciona também em campo
   desenhado depois (as telas que se redesenham). */

.painel-escuro {
  background: var(--c-surface-deep);
  color: var(--c-ink-inverse);
}
.painel-escuro .campo > label {
  color: var(--c-ink-inverse);
}
.painel-escuro .entrada,
.faixa-escura .entrada {
  background: transparent;
  border-color: rgb(242 238 230 / 0.3);
  color: var(--c-ink-inverse);
}
.painel-escuro .entrada:hover,
.faixa-escura .entrada:hover {
  border-color: rgb(242 238 230 / 0.55);
}
.painel-escuro .entrada::placeholder,
.faixa-escura .entrada::placeholder {
  color: rgb(242 238 230 / 0.45);
}
.painel-escuro .entrada:focus,
.faixa-escura .entrada:focus {
  border-color: var(--c-ink-inverse);
  box-shadow: 0 1px 0 var(--c-ink-inverse);
}

.entrada-com-icone {
  position: relative;
  display: flex;
}
.entrada-com-icone > .icone-celula {
  position: absolute;
  inset: 0 auto 0 0;
  width: 24px;
  display: grid;
  place-items: center;
  color: var(--c-ink-subtle);
  pointer-events: none;
}
.entrada-com-icone > .entrada {
  padding-left: 36px;
}
.entrada-com-icone > .entrada-olho {
  position: absolute;
  inset: 0 0 1px auto;
  width: 44px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--c-ink-subtle);
  cursor: pointer;
  border-radius: 0 var(--r-btn) var(--r-btn) 0;
}
.entrada-com-icone > .entrada-olho:focus-visible {
  outline: 2px solid var(--c-primary-strong);
  outline-offset: -2px;
}
.entrada-com-icone.tem-olho > .entrada {
  padding-right: 48px;
}
.painel-escuro .entrada-com-icone > .icone-celula,
.painel-escuro .entrada-com-icone > .entrada-olho,
.faixa-escura .entrada-com-icone > .icone-celula,
.faixa-escura .entrada-com-icone > .entrada-olho {
  border-color: var(--c-filete-escuro);
  color: rgb(242 238 230 / 0.55);
}

/* ═══ 14 · perguntas frequentes (acordeão) ═══════════════════════════════════
   O FAQ da kodety: lista com filete embaixo de cada item, pergunta em Sora, um
   "+" num círculo fino que vira "−" ao abrir. <details>/<summary> nativos:
   abre por teclado e leitor de tela sem JS, e o texto é achado pela busca da
   página. Marcação: <div class="perguntas"><details><summary>…</summary>
   <p class="resposta">…</p></details></div>. */

.perguntas {
  border-top: 1px solid var(--c-filete);
}
.perguntas details {
  border-bottom: 1px solid var(--c-filete);
}
.perguntas summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 56px;
  padding: var(--s-4) 0;
  font-family: var(--f-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-display);
  line-height: 1.35;
  color: var(--c-ink);
}
.perguntas summary::-webkit-details-marker {
  display: none;
}
.perguntas summary::after {
  content: '';
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--c-primary-strong);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 55%, transparent);
  background:
    linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 10px no-repeat;
}
.perguntas details[open] summary::after {
  background: linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat;
}
.perguntas summary:focus-visible {
  outline: 2px solid var(--c-primary-strong);
  outline-offset: 4px;
}
.perguntas .resposta {
  max-width: 62ch;
  margin: 0;
  padding: 0 0 var(--s-5);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-ink-muted);
}
.faixa-escura .perguntas,
.faixa-escura .perguntas details {
  border-color: var(--c-filete-escuro);
}
.faixa-escura .perguntas summary {
  color: var(--c-ink-inverse);
}
.faixa-escura .perguntas summary::after {
  color: var(--c-primary);
}
.faixa-escura .perguntas .resposta {
  color: rgb(242 238 230 / 0.66);
}

/* ═══ 15 · moldura de seção (as linhas da kodety) ════════════════════════════
   Toda seção da kodety é desenhada por linhas: uma horizontal na largura toda
   onde a seção começa, duas verticais emoldurando o conteúdo (1304px no
   computador, 95% no celular), uma barrinha de destaque de 3x18px sobre a
   linha da esquerda na altura do rótulo e, no computador, uma coluna de
   pontos da marca na margem esquerda (no lugar da régua da kodety). As
   linhas passam POR TRÁS do conteúdo.
   Uso: class="moldura" na seção (clara ou .faixa-escura); com rótulo no topo
   da seção, "moldura moldura-rotulo" acende a barrinha. */

.moldura {
  --moldura-linha: var(--c-filete);
  --moldura-acento: var(--c-primary-strong);
  position: relative;
  isolation: isolate;
  border-top: 1px solid var(--moldura-linha);
}
.faixa-escura.moldura,
.faixa-escura .moldura {
  --moldura-linha: var(--c-filete-escuro);
  --moldura-acento: var(--c-primary);
}
/* As duas linhas verticais. */
.moldura::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset-block: 0;
  inset-inline: calc((100% - min(var(--largura-moldura), 95%)) / 2);
  border-inline: 1px solid var(--moldura-linha);
  pointer-events: none;
}
/* A barrinha de destaque sobre a linha da esquerda, na altura do rótulo. */
.moldura-rotulo::before {
  background: linear-gradient(var(--moldura-acento), var(--moldura-acento)) 0
    calc(var(--s-secao) + 1px) / 3px 18px no-repeat;
  background-origin: border-box;
}
/* Na margem esquerda, no lugar da régua da kodety, o motivo da nossa marca: os
   grupos de 4 pontos do rótulo de seção, em coluna, um grupo a cada 56px,
   encostados na borda da página como a régua (só no computador; a kodety
   também tira a régua no celular). Desenhada UMA vez para a página inteira (no
   body das páginas que têm moldura), e não por seção: por seção o passo de
   56px recomeçava em cada emenda (revisão 30/09, I-9). Cinza neutro, que se lê
   no creme e no carvão. */
@media (min-width: 1024px) {
  body:has(.moldura) {
    position: relative;
  }
  body:has(.moldura)::after {
    content: '';
    position: absolute;
    z-index: 40; /* abaixo do cabeçalho (50) */
    inset-block: 0;
    left: 0;
    width: 11px;
    background: radial-gradient(circle, rgb(128 128 128 / 0.42) 1.3px, transparent 1.7px)
      0 0 / 5.5px 5.5px;
    -webkit-mask-image: repeating-linear-gradient(#000 0 11px, transparent 11px 56px);
    mask-image: repeating-linear-gradient(#000 0 11px, transparent 11px 56px);
    pointer-events: none;
  }
}

/* ═══ 16 · aurora ═════════════════════════════════════════════════════════════
   O fundo esfumado da identidade da Clari (material da sócia, 30/09): manchas
   de pêssego, rosa, lilás e azul sobre o creme, desfocadas. Só CSS, sem imagem.
   Uso: um bloco decorativo (`<div class="aurora" aria-hidden="true">`) dentro de
   um pai com posição; o texto por cima vai numa placa, nunca solto.
   Animada (01/10, inspirada na fita do topo da stripe.com/br):
   - ::before, as manchas: flutuam, giram e respiram (18 s, ida e volta);
   - ::after, a FITA: uma faixa diagonal de fibras finas com as cores da aurora
     correndo por dentro (o degradê anda 12 s por volta) e a fita ondulando
     devagar (16 s). Fibras = máscara de linhas de 2 px; pontas somem num
     degradê. Só transform e posição de fundo (leve). Parada com "menos
     movimento". */
.aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--c-marca-claro);
}
.aurora::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(46% 42% at 72% 22%, var(--c-marca-roxo), transparent 74%),
    radial-gradient(50% 46% at 46% 40%, var(--c-marca-celeste), transparent 76%),
    radial-gradient(42% 38% at 22% 30%, var(--c-marca-verde), transparent 74%),
    radial-gradient(46% 44% at 82% 64%, var(--c-marca-indigo), transparent 76%),
    radial-gradient(46% 40% at 20% 86%, var(--c-marca-menta), transparent 74%),
    radial-gradient(40% 36% at 56% 92%, var(--c-marca-azul), transparent 74%);
  /* 01/10 noite: cores mais fortes ("mais forte a cor"); antes blur 36 e
     saturate 1.2, manchas menores e o rosa-claro no lugar do 2.º rosa. */
  filter: blur(30px) saturate(1.1);
  will-change: transform;
  animation: aurora-manchas 18s ease-in-out infinite alternate;
}
.aurora::after {
  content: '';
  position: absolute;
  left: -30%;
  right: -30%;
  top: 22%;
  height: 46%;
  background: linear-gradient(
      90deg,
      var(--c-marca-verde),
      var(--c-marca-menta),
      var(--c-marca-celeste),
      var(--c-marca-azul),
      var(--c-marca-indigo),
      var(--c-marca-roxo),
      var(--c-marca-verde)
    )
    0 0 / 200% 100%;
  filter: saturate(1.2) blur(0.5px);
  opacity: 1;
  -webkit-mask-image:
    repeating-linear-gradient(0deg, #000 0 2px, rgb(0 0 0 / 0.6) 2px 5px),
    linear-gradient(0deg, transparent, #000 30%, #000 70%, transparent),
    linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  -webkit-mask-composite: source-in, source-in;
  mask-image:
    repeating-linear-gradient(0deg, #000 0 2px, rgb(0 0 0 / 0.6) 2px 5px),
    linear-gradient(0deg, transparent, #000 30%, #000 70%, transparent),
    linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  mask-composite: intersect;
  transform: rotate(-16deg);
  will-change: transform, background-position;
  animation:
    aurora-fita-cores 12s linear infinite,
    aurora-fita-onda 16s ease-in-out infinite alternate;
}
@keyframes aurora-manchas {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  33% {
    transform: translate(8%, -6%) rotate(12deg) scale(1.1);
  }
  66% {
    transform: translate(-6%, 7%) rotate(-8deg) scale(0.94);
  }
  100% {
    transform: translate(5%, 4%) rotate(6deg) scale(1.06);
  }
}
@keyframes aurora-fita-cores {
  to {
    background-position: 200% 0;
  }
}
@keyframes aurora-fita-onda {
  0% {
    transform: rotate(-16deg) translateY(0) scaleY(1);
  }
  50% {
    transform: rotate(-12deg) translateY(-8%) scaleY(1.15);
  }
  100% {
    transform: rotate(-19deg) translateY(6%) scaleY(0.9);
  }
}
@media (prefers-reduced-motion: reduce) {
  .aurora::before,
  .aurora::after {
    animation: none;
  }
}

/* ═══ trevo da marca (02/10/2026) ════════════════════════════════════════════
   O ícone de trevo à esquerda do "clari.ia" em todo lugar onde a marca aparece
   (navbar, rodapé, telas de conta, funil, app). Na cor do texto da marca a 60%:
   branco acinzentado sobre o preto, cinza sobre o claro. */
.logo-trevo {
  width: 0.92em;
  height: 0.92em;
  margin-right: 0.28em;
  vertical-align: -0.12em;
  opacity: 0.6;
}

/* ═══ peças do SITE compartilhadas entre a landing e o app (02/10/2026) ═══
   Movidas do landing.css para cá para a navbar e o botão do WhatsApp serem
   IGUAIS nos dois domínios (o app não carrega o landing.css). */

/* ═══ navbar no padrão do iStock (01/10/2026) ═════════════════════════════════
   Medido no istockphoto.com/br (design/referencias/istock): barra quase preta de
   85px (65px no celular), logo à esquerda, links brancos de 14px, à direita um
   link suave, um divisor e o botão de chamada verde-água com raio 4. Não fica
   presa no topo, como lá. No celular os links vão para a gaveta do botão de menu. */

.nav-is {
  position: relative;
  z-index: 20;
  background: var(--c-nav-escura);
  color: #fff;
  font-family: var(--f-ui);
}
.nav-is-in {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 85px;
  padding: 0 28px;
}
/* Três classes de propósito: vence o `.lp .logo` da landing (22 px), que vem
   depois; a marca da navbar é 26 px nos dois sites, como era. */
.nav-is .nav-is-in .logo {
  font-family: var(--f-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  text-decoration: none;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  font-size: 29px;
  color: #fff;
  flex: 0 0 auto;
}
.nav-is .nav-is-in .logo em {
  font-style: normal;
  color: var(--c-terra);
}
.nav-is-links ul {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-is-links a,
.nav-is-gaveta a {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.nav-is-links a:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}
.nav-is-direita {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}
.nav-is-suave {
  color: var(--c-nav-texto-suave);
  font-size: 16px;
  text-decoration: none;
  padding: 0 3px 0 12px;
}
.nav-is-suave:hover {
  color: #fff;
}
.nav-is-divisor {
  width: 1px;
  height: 24px;
  background: var(--c-nav-divisor);
}
.nav-is-chamada {
  display: inline-flex;
  align-items: center;
  height: 43px;
  padding: 0 16px;
  border: 1px solid var(--c-terra-borda);
  border-radius: 4px;
  background: var(--c-terra);
  color: var(--c-surface-deep);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--t-fast),
    border-color var(--t-fast);
}
.nav-is-chamada:hover {
  border-color: var(--c-terra-hover);
  background: var(--c-terra-hover);
}
.nav-is a:focus-visible,
.nav-is button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.nav-is-menu {
  display: none;
  width: 40px;
  height: 40px;
  margin-left: -8px;
  padding: 8px;
  border: 0;
  background: none;
  cursor: pointer;
}
.nav-is-menu span {
  display: block;
  height: 2px;
  margin: 5px 0;
  background: #fff;
  border-radius: 1px;
  transition:
    transform 0.25s cubic-bezier(0.22, 0.8, 0.25, 1),
    opacity 0.2s;
}
/* Aberto, as três linhas viram um X (as linhas distam 7px de centro a centro). */
.nav-is-menu[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-is-menu[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}
.nav-is-menu[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
/* A gaveta abre POR CIMA do conteúdo, na tela toda abaixo da barra (02/10;
   antes ela entrava no fluxo e empurrava a página). */
.nav-is-gaveta {
  position: fixed;
  inset: 65px 0 0;
  z-index: 49;
  overflow-y: auto;
  padding: 16px 28px 32px;
  background: var(--c-nav-escura);
  border-top: 1px solid var(--c-nav-divisor);
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.26s ease,
    transform 0.26s cubic-bezier(0.22, 0.8, 0.25, 1);
}
.nav-is-gaveta.aberta {
  opacity: 1;
  transform: none;
}
.nav-is-gaveta ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-is-gaveta li {
  border-bottom: 1px solid var(--c-nav-divisor);
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.3s ease,
    transform 0.3s cubic-bezier(0.22, 0.8, 0.25, 1);
}
.nav-is-gaveta.aberta li {
  opacity: 1;
  transform: none;
}
.nav-is-gaveta.aberta li:nth-child(2) {
  transition-delay: 0.04s;
}
.nav-is-gaveta.aberta li:nth-child(3) {
  transition-delay: 0.08s;
}
.nav-is-gaveta.aberta li:nth-child(4) {
  transition-delay: 0.12s;
}
.nav-is-gaveta.aberta li:nth-child(5) {
  transition-delay: 0.16s;
}
.nav-is-gaveta a {
  display: block;
  padding: 18px 0;
  font-size: 25px;
}
.nav-is-gaveta[hidden] {
  display: none;
}
/* Menu aberto: a página por baixo não rola. */
html.menu-aberto,
html.menu-aberto body {
  overflow: hidden;
}
/* Menu aberto fica acima de tudo: o aviso de cookies (60) e o botão do
   WhatsApp (70) apareciam por cima dele (medido no print de 02/10). */
html.menu-aberto .nav-is {
  z-index: 100;
}
@media (prefers-reduced-motion: reduce) {
  .nav-is-menu span,
  .nav-is-gaveta,
  .nav-is-gaveta li {
    transition: none;
  }
}
@media (max-width: 1023px) {
  .nav-is-in {
    height: 65px;
    gap: 12px;
    padding: 0 16px 0 20px;
  }
  .nav-is-menu {
    display: block;
  }
  .nav-is-links,
  .nav-is-suave,
  .nav-is-divisor {
    display: none;
  }
  .nav-is .logo {
    font-size: 27px;
  }
}

/* Navbar que some ao descer e volta ao subir (02/10; peça `.cabecalho-some` do
   padrao.css/js): fica presa no topo e desliza para fora/para dentro. */
.nav-is.cabecalho-some {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.25, 1);
}
.nav-is.cabecalho-some.escondido {
  transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
  .nav-is.cabecalho-some {
    transition: none;
  }
}

/* ═══ botão do WhatsApp com conversa guiada (02/10/2026) ═══════════════════════
   Botão redondo verde do WhatsApp colado no canto inferior direito; o painel de
   chat sobe acima dele (balões da Clari à esquerda, os da pessoa à direita,
   respostas prontas em pílulas, o campo do nome). O verde é o da marca
   WhatsApp, só no botão e no "Abrir no WhatsApp". */
.zap-is,
.zap-is * {
  box-sizing: border-box;
}
.zap-is {
  --zap: #25d366;
  --zap-escuro: #1da851;
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 70;
  font-family: var(--f-ui);
}
.zap-is-botao {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-left: auto;
  border: 0;
  border-radius: 50%;
  background: var(--zap);
  color: #fff;
  box-shadow: 0 10px 24px rgb(30 30 30 / 0.22);
  cursor: pointer;
  transition: background 0.2s ease;
}
/* hover só troca a cor (regra do Pedro: botão não cresce) */
.zap-is-botao:hover {
  background: var(--zap-escuro);
}
.zap-is-botao .icone {
  width: 30px;
  height: 30px;
}
.zap-is.aberto .zap-is-botao .icone {
  display: none;
}
.zap-is.aberto .zap-is-botao::before,
.zap-is.aberto .zap-is-botao::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transform: rotate(45deg);
}
.zap-is.aberto .zap-is-botao::after {
  transform: rotate(-45deg);
}
.zap-is-botao:focus-visible,
.zap-is button:focus-visible,
.zap-is a:focus-visible,
.zap-is input:focus-visible {
  outline: 2px solid var(--c-nav-escura);
  outline-offset: 2px;
}
.zap-is-painel {
  display: flex;
  flex-direction: column;
  width: min(360px, calc(100vw - 32px));
  /* 02/10: mais alto (pedido do Pedro) */
  height: min(640px, calc(100dvh - 110px));
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid var(--c-card-borda);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 24px 48px rgb(30 30 30 / 0.18);
  transform-origin: bottom right;
  animation: zap-sobe 0.25s ease;
}
.zap-is-painel[hidden] {
  display: none;
}
@keyframes zap-sobe {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}
.zap-is-topo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--c-nav-escura);
  color: #fff;
}
.zap-is-avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-terra);
  color: var(--c-nav-escura);
}
.zap-is-avatar .icone {
  width: 18px;
  height: 18px;
}
.zap-is-topo strong {
  display: block;
  font-size: 17px;
  font-weight: 500;
}
.zap-is-topo small {
  font-size: 14px;
  color: var(--c-nav-texto-suave);
}
.zap-is-fechar {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
.zap-is-fechar::before,
.zap-is-fechar::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 15px;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transform: rotate(45deg);
}
.zap-is-fechar::after {
  transform: rotate(-45deg);
}
.zap-is-chat {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 16px;
  overflow-y: auto;
  background: var(--c-faixa-clara);
}
.lp .zap-is-balao,
.zap-is-balao {
  max-width: 85%;
  margin: 0;
  padding: 9px 12px;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1.45;
  white-space: pre-line;
  animation: zap-sobe 0.2s ease;
}
.zap-is-balao.clari {
  align-self: flex-start;
  background: #fff;
  color: var(--c-nav-escura);
  box-shadow: 0 1px 2px rgb(30 30 30 / 0.08);
}
.zap-is-balao.eu {
  align-self: flex-end;
  background: var(--c-terra);
  color: var(--c-nav-escura);
}
.zap-is-balao.digitando {
  display: flex;
  gap: 4px;
  padding: 12px 14px;
}
.zap-is-balao.digitando span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8a8e8e;
  animation: zap-pulo 1s infinite ease-in-out;
}
.zap-is-balao.digitando span:nth-child(2) {
  animation-delay: 0.15s;
}
.zap-is-balao.digitando span:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes zap-pulo {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}
.zap-is-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px;
  background: var(--c-faixa-clara);
}
.zap-is-opcoes:not(:empty) {
  padding-bottom: 14px;
}
.zap-is-opcao {
  padding: 8px 12px;
  border: 1px solid var(--c-nav-escura);
  border-radius: 999px;
  background: #fff;
  color: var(--c-nav-escura);
  font: 500 15px/1.2 var(--f-ui);
  cursor: pointer;
  transition: background 0.15s ease;
}
.zap-is-opcao:hover {
  background: var(--c-terra-fundo);
}
.zap-is-enviar {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border-radius: 4px;
  background: var(--zap);
  color: #fff;
  font: 500 16px/1 var(--f-ui);
  text-decoration: none;
}
.zap-is-enviar:hover {
  background: var(--zap-escuro);
}
.zap-is-enviar .icone {
  width: 18px;
  height: 18px;
}
.zap-is-refazer {
  border: 0;
  background: transparent;
  color: var(--c-texto-is);
  font: 500 15px/1 var(--f-ui);
  text-decoration: underline;
  cursor: pointer;
}
.zap-is-campo {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--c-card-borda);
}
.zap-is-campo[hidden] {
  display: none;
}
.zap-is-campo input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--c-card-borda);
  border-radius: 4px;
  font: 16px var(--f-ui);
  color: var(--c-nav-escura);
}
.zap-is-campo button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 4px;
  background: var(--c-nav-escura);
  color: #fff;
  cursor: pointer;
}
.zap-is-campo .icone {
  width: 18px;
  height: 18px;
}
.lp .zap-is-nota,
.zap-is-nota {
  margin: 0;
  padding: 8px 16px 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--c-texto-is);
}
@media (prefers-reduced-motion: reduce) {
  .zap-is-painel,
  .zap-is-balao {
    animation: none;
  }
  .zap-is-balao.digitando span {
    animation: none;
  }
}

/* Botão de pausar o vídeo de fundo (movimento contínuo, WCAG 2.2.2): o do herói
   da landing, desde 02/10 também no painel da triagem do app. Saiu do
   landing.css para ser a mesma peça nos dois. */
.heroi-is-pausa {
  position: absolute;
  left: 20px;
  bottom: 16px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: 50%;
  background: rgb(0 0 0 / 0.25);
  cursor: pointer;
}
.heroi-is-pausa:hover {
  background: rgb(0 0 0 / 0.45);
}
.heroi-is-pausa:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.heroi-is-pausa-icone {
  width: 10px;
  height: 12px;
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
}
.heroi-is-pausa.pausado .heroi-is-pausa-icone {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent #fff;
  margin-left: 3px;
}