/* ── Tons derivados da marca ───────────────────────────────────────────────────────────────
   Ver o aviso acima: o cliente cadastra três cores e todo o resto sai daqui. */
body {
  --marca-titulo: var(--marca-primaria);
  /* O "#0B5E50" do protótipo: a primária puxada para o escuro, para título e hover do botão. */
  --marca-escuro: color-mix(in srgb, var(--marca-primaria) 72%, #06221C);
  --marca-texto: color-mix(in srgb, var(--marca-bar) 45%, #10202C);
  --marca-suave: color-mix(in srgb, var(--marca-primaria) 11%, #fff);
  --marca-suave2: color-mix(in srgb, var(--marca-primaria) 18%, #fff);
  --marca-borda: color-mix(in srgb, var(--marca-primaria) 17%, #fff);
  --marca-borda-forte: color-mix(in srgb, var(--marca-primaria) 42%, #fff);
  --marca-hover: color-mix(in srgb, var(--marca-primaria) 6%, #fff);
  --marca-sombra: color-mix(in srgb, var(--marca-primaria) 16%, transparent);
  /* Texto secundário: a marca puxada para o cinza, para rótulo e legenda não competirem. */
  --marca-apagado: color-mix(in srgb, var(--marca-bar) 38%, #6B7785);

  --acento-suave: color-mix(in srgb, var(--marca-acento) 12%, #fff);
  --acento-borda: color-mix(in srgb, var(--marca-acento) 38%, #fff);
  --acento-hover: color-mix(in srgb, var(--marca-acento) 7%, #fff);
}
/* ────────────────────────────────────────────────────────────────────────────
   Tela de ENTRADA do portal ("Bem-vindo(a)!" + Acesse sua conta).
   Porte fiel de `Portal do Titular (DSAR).dc.html`, bloco `isInicio`.

   Os valores aqui (px, cores, pesos) foram copiados um a um dos estilos inline do
   mockup — quando bater o olho e algo parecer "quase certo", o mockup é a fonte.
   Prefixo `hm-`.
   ──────────────────────────────────────────────────────────────────────────── */

.hm {
  min-height: 100vh; background: var(--marca-hover); display: flex; flex-direction: column;
  font-family: Lexend, 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--marca-texto);
}

/* ── Topo (96px, na cor da marca) ─────────────────────────────────────────── */
.hm-topo {
  height: 96px; flex: none; background: var(--marca-bar); display: flex; align-items: center;
  padding: 0 34px; gap: 24px;
}
.hm-logo {
  width: 64px; height: 64px; flex: none; background: #fff; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; padding: 8px;
}
/* 55px: a logo de escola costuma ser quadrada ou vertical, e na largura do logotipo da rede
   (104px) ela estourava a altura da barra. `max-height` acompanha para que uma logo muito alta
   não empurre o cabeçalho — a barra tem 96px e o bloco tem respiro de 6px em cima e embaixo. */
.hm-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.hm-sep { width: 1px; height: 44px; background: rgba(255, 255, 255, .32); }
.hm-titulo { font-size: 20px; font-weight: 500; color: #fff; }
.hm-escudo {
  width: 44px; height: 44px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .14);
  display: flex; align-items: center; justify-content: center;
}
.hm-escudo svg { stroke: #fff; }
.hm-lema { display: flex; flex-direction: column; gap: 3px; }
.hm-lema-1 { font-size: 14.5px; font-weight: 700; color: #fff; }
.hm-lema-2 { font-size: 13px; font-weight: 300; color: color-mix(in srgb, #fff 72%, var(--marca-primaria)); }
/* A faixa de 5 cores é assinatura da marca no design — sem ela o topo fica genérico. */
.hm-faixa { width: 48px; height: 3px; border-radius: 2px; background: var(--marca-acento); }

.hm-corpo { flex: 1; padding: 40px 40px 0; display: flex; flex-direction: column; gap: 32px; }
.hm-grade {
  display: grid; grid-template-columns: minmax(0, 1fr) 440px 360px;
  gap: 24px; align-items: stretch;
}

/* ── Coluna da esquerda: abertura + 4 cartões ─────────────────────────────── */
.hm-abre { display: flex; align-items: flex-start; gap: 10px; }
.hm-abre-txt { flex: 1; min-width: 0; padding-top: 12px; }
.hm-abre { gap: 20px; }
.hm-abre h1 { margin: 0; font-size: 44px; line-height: 1.05; font-weight: 700; letter-spacing: -.02em; color: var(--marca-escuro); }
.hm-abre p { margin: 14px 0 0; font-size: 16px; line-height: 1.5; font-weight: 400; color: var(--marca-texto); }
.hm-abre p strong { font-weight: 600; color: var(--marca-primaria); }
.hm-abre p.desc {
  margin: 12px 0 0; font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--marca-texto);
  max-width: 390px; text-wrap: pretty;
}
.hm-ilustra {
  position: relative; width: 120px; height: 120px; flex: none; border-radius: 28px;
  background: var(--marca-suave); display: flex; align-items: center; justify-content: center;
}
.hm-ilustra-cadeado { position: absolute; }
.hm-ilustra-selo {
  position: absolute; right: 14px; bottom: 14px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--marca-escuro); border: 3px solid var(--marca-suave);
  display: flex; align-items: center; justify-content: center;
}

.hm-h2 { margin: 14px 0 14px; font-size: 19px; font-weight: 700; color: var(--marca-titulo); }
.hm-acoes { display: flex; flex-direction: column; gap: 12px; }
.hm-acao {
  background: #fff; border: 1px solid var(--marca-borda); border-radius: 14px; padding: 18px 20px;
  display: flex; flex-direction: row; align-items: center; gap: 16px; cursor: pointer; text-decoration: none;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.hm-acao:hover { border-color: var(--marca-primaria); box-shadow: 0 4px 14px var(--marca-sombra); }
.hm-acao.roxo:hover { border-color: var(--acento-borda); box-shadow: 0 6px 18px rgba(124, 58, 237, .12); }
.hm-acao.verde:hover { border-color: #8FDCCB; box-shadow: 0 6px 18px rgba(16, 163, 127, .12); }
.hm-acao.indigo:hover { border-color: var(--acento-borda); box-shadow: 0 6px 18px rgba(79, 70, 229, .12); }
.hm-acao-ic {
  width: 44px; height: 44px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center;
}
/* O texto ocupa o meio e empurra a seta para a borda, como no desenho. */
.hm-acao-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hm-acao b { font-size: 16px; font-weight: 600; color: var(--marca-escuro); line-height: 1.25; }
.hm-acao span.txt { font-size: 13px; font-weight: 300; line-height: 1.45; color: var(--marca-apagado); }
.hm-acao-seta { flex: none; display: flex; align-items: center; margin: 0; }

/* ── Cartão central: login OU pessoa logada ───────────────────────────────── */
.hm-cartao {
  min-width: 0; background: #fff; border: 1px solid var(--marca-borda); border-radius: 20px;
  padding: 28px; display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 2px 10px var(--marca-sombra);
}
.hm-cartao-cab { display: flex; align-items: center; gap: 14px; }
.hm-cartao-ic {
  width: 48px; height: 48px; flex: none; border-radius: 14px; background: var(--marca-suave);
  display: flex; align-items: center; justify-content: center;
}
.hm-cartao-tit { font-size: 22px; font-weight: 600; color: var(--marca-escuro); }
.hm-cartao-sub { font-size: 13px; font-weight: 300; color: var(--marca-apagado); margin-top: 2px; }

.hm-rot { font-size: 13px; font-weight: 500; color: var(--marca-texto); margin-bottom: 8px; }
.hm-campo {
  display: flex; align-items: center; gap: 10px; height: 48px; border: 1px solid var(--marca-borda);
  border-radius: 12px; padding: 0 14px; background: color-mix(in srgb, var(--marca-suave) 35%, #fff);
}
.hm-campo:focus-within { border-color: var(--marca-primaria); }
.hm-campo input {
  flex: 1; min-width: 0; border: 0; outline: none; font-family: inherit;
  font-size: 14px; color: var(--marca-texto); background: transparent;
}
.hm-campo input::placeholder { color: var(--marca-apagado); }
.hm-campo svg { flex: none; }
.hm-olho { cursor: pointer; }

.hm-nota {
  display: flex; align-items: flex-start; gap: 12px; background: var(--marca-suave); border: 0;
  border-radius: 12px; padding: 14px 16px;
}
.hm-nota span { font-size: 12.5px; font-weight: 400; line-height: 1.55; color: var(--marca-texto); }
.hm-nota strong { font-weight: 600; color: var(--marca-escuro); }

.hm-entrar {
  border: 0; background: var(--marca-primaria); border-radius: 12px; height: 52px; padding: 0 20px;
  font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px; position: relative; color: #fff;
}
.hm-entrar:hover { background: var(--marca-escuro); }
.hm-entrar svg { position: absolute; right: 20px; }

.hm-linha-op { display: flex; align-items: center; gap: 12px; }
.hm-check { display: flex; align-items: center; gap: 8px; flex: 1; cursor: pointer; }
.hm-check input { width: 15px; height: 15px; accent-color: var(--marca-primaria); }
.hm-check span { font-size: 12.5px; font-weight: 500; color: var(--marca-texto); }
.hm-linha-op a { font-size: 12.5px; font-weight: 600; color: var(--marca-primaria); }

.hm-ou { display: flex; align-items: center; gap: 12px; }
.hm-ou span.linha { flex: 1; height: 1px; background: var(--marca-borda); }
.hm-ou span.txt { font-size: 12.5px; font-weight: 500; color: var(--marca-apagado); }

.hm-secundario {
  border: 1px solid var(--marca-borda-forte); background: #fff; color: var(--marca-titulo); border-radius: 9px; padding: 13px 20px;
  font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; text-decoration: none;
  display: flex; align-items: center; justify-content: center; gap: 9px;
}
.hm-secundario:hover { background: var(--marca-hover); color: var(--marca-titulo); }

.hm-seguro { display: flex; align-items: center; gap: 10px; }
.hm-seguro span { font-size: 11px; font-weight: 500; color: var(--marca-apagado); }

/* Cartão de quem já está logado */
.hm-eu { padding: 22px 22px 20px; gap: 15px; }
.hm-eu-av {
  width: 52px; height: 52px; flex: none; border-radius: 50%; background: #FE7556; color: #fff;
  font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.hm-eu-nome { font-size: 19px; font-weight: 700; color: var(--marca-titulo); }
.hm-eu-tags { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.hm-eu-tag {
  background: var(--marca-suave); color: var(--marca-primaria); border-radius: 6px; padding: 2px 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
}
.hm-eu-mat { font-size: 12px; font-weight: 500; color: var(--marca-apagado); }
.hm-checks { display: flex; flex-direction: column; gap: 9px; }
.hm-check {
  display: flex; align-items: center; gap: 11px; background: #EFF9F3; border: 1px solid #D7EDE1;
  border-radius: 9px; padding: 10px 13px;
}
.hm-check span { flex: 1; font-size: 12.5px; font-weight: 600; color: #127C48; }
/* Estado pendente: o mockup só ilustra o caso verde, mas afirmar "validado" sem validação
   seria carimbar prova falsa — então o mesmo bloco tem variante âmbar. */
.hm-check.pendente { background: #FEF7E8; border-color: #F5DFAE; }
.hm-check.pendente span { color: #8A5A00; }
.hm-linhas { display: flex; flex-direction: column; gap: 10px; padding-top: 2px; border-top: 1px solid var(--marca-hover); }
.hm-linha { display: flex; align-items: center; gap: 10px; }
.hm-linha:first-child { padding-top: 12px; }
.hm-linha span.rot { flex: 1; font-size: 12.5px; font-weight: 500; color: var(--marca-apagado); }
.hm-linha span.val { font-size: 12.5px; font-weight: 700; color: var(--marca-texto); }
.hm-sair {
  display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--marca-borda);
  background: #fff; border-radius: 9px; padding: 12px 20px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.hm-sair:hover { background: var(--marca-hover); }
.hm-sair span { color: var(--marca-apagado); }
.hm-sessao { display: flex; align-items: flex-start; gap: 12px; }
.hm-sessao span { font-size: 12px; font-weight: 400; line-height: 1.55; color: var(--marca-apagado); }
.hm-sessao strong { font-weight: 600; color: var(--marca-texto); }

/* ── Coluna da direita: assistente + DPO ──────────────────────────────────── */
.hm-col-dir { min-width: 0; display: flex; flex-direction: column; gap: 18px; align-self: start; }
.hm-assistente {
  background: linear-gradient(160deg, var(--marca-suave), var(--marca-suave2)); border: 1px solid var(--marca-borda); border-radius: 14px;
  padding: 12px; display: flex; align-items: flex-start; gap: 8px; min-height: 246px;
}
/* ⚠️ A imagem NAO e' um recorte da personagem: ela traz o fundo azul do desenho e, na
   borda direita, um PEDACO DO BALAO branco original. Ao lado do balao de verdade, esse
   fragmento aparecia como um retangulo claro solto — o "quebrado" que se via na tela.

   Corrigido por recorte em CSS, sem reeditar o arquivo: `object-fit: cover` com a caixa mais
   estreita que a proporcao da imagem (350x580) descarta a faixa da direita, e
   `object-position: left` garante que o corte saia de la' e nao do rosto.

   As margens negativas cancelam o padding do cartao para ela encostar nas bordas, como no
   desenho — dentro do padding sobrava uma faixa de fundo entre a personagem e a borda. */
.hm-assistente img {
  width: 136px; flex: none; display: block;
  align-self: stretch; object-fit: cover; object-position: left center;
  margin: -12px 0 -12px -12px; border-radius: 13px 0 0 13px;
}
.hm-balao {
  flex: 1; min-width: 0; background: #fff; border-radius: 10px; padding: 15px 16px;
  box-shadow: 0 2px 8px rgba(18, 39, 90, .08); margin-top: 34px;
}
.hm-balao p { margin: 0; font-size: 13px; font-weight: 400; line-height: 1.55; color: var(--marca-texto); }
.hm-balao p + p { margin-top: 11px; }
.hm-balao strong { font-weight: 700; color: var(--marca-titulo); }

.hm-dpo {
  background: #fff; border: 1px solid var(--marca-borda); border-radius: 14px; padding: 20px;
  display: flex; flex-direction: column; gap: 13px; box-shadow: 0 1px 3px rgba(18, 39, 90, .05);
}
.hm-dpo-cab { display: flex; align-items: center; gap: 13px; }
.hm-dpo-ic {
  width: 44px; height: 44px; flex: none; border-radius: 11px; background: var(--marca-suave);
  display: flex; align-items: center; justify-content: center;
}
.hm-dpo-tit { font-size: 18px; font-weight: 700; color: var(--marca-titulo); }
.hm-dpo p { margin: 0; font-size: 13px; font-weight: 400; line-height: 1.55; color: var(--marca-texto); }
.hm-dpo-btn {
  border: 1px solid var(--acento-borda); background: #fff; color: var(--marca-titulo); border-radius: 9px; padding: 13px 18px;
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.hm-dpo-btn:hover { background: var(--acento-hover); color: var(--marca-titulo); }
.hm-dpo-rodape { display: flex; align-items: flex-start; gap: 11px; }
.hm-dpo-rodape span { font-size: 12px; font-weight: 400; line-height: 1.55; color: var(--marca-apagado); }

/* ── Faixa "Segurança e Confiança" ────────────────────────────────────────── */
.hm-confianca {
  background: #fff; border: 1px solid var(--marca-borda); border-radius: 14px; padding: 20px 24px;
  box-shadow: 0 1px 3px rgba(18, 39, 90, .05);
}
.hm-confianca h2 { margin: 0 0 16px; font-size: 18px; font-weight: 700; color: var(--marca-titulo); }
.hm-conf-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.hm-conf { display: flex; align-items: flex-start; gap: 13px; }
.hm-conf-ic {
  width: 40px; height: 40px; flex: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.hm-conf b { display: block; font-size: 14.5px; font-weight: 700; color: var(--marca-titulo); }
.hm-conf span { display: block; font-size: 12.5px; font-weight: 400; line-height: 1.5; color: var(--marca-apagado); margin-top: 3px; }

.hm-rodape {
  display: flex; align-items: center; gap: 10px; padding: 22px 0 20px;
  font-size: 12.5px; font-weight: 400; color: var(--marca-apagado);
}
.hm-rodape a { color: var(--marca-apagado); font-weight: 500; }
.hm-rodape a:hover { color: var(--marca-titulo); }
.hm-rodape-sep { color: var(--marca-borda-forte); }

.hm-erro {
  background: #FDECEA; border: 1px solid #F5C6C2; border-radius: 9px; padding: 10px 13px;
  font-size: 12.5px; font-weight: 600; color: #B3261E;
}
.hm-erro ul { margin: 0; padding-left: 18px; }
/* O span de validação do Razor existe sempre no HTML, mesmo sem erro — sem isto ele vira uma
   faixa vermelha vazia embaixo do campo. */
.hm-erro:empty { display: none !important; }

/* Explicação de um campo que aparece do nada. A data de nascimento só entra na tela no primeiro
   acesso, e um campo novo surgindo depois de errar a senha parece cobrança arbitrária se não vier
   com o motivo — e com o "uma única vez", que é o que tira o medo de virar rotina. */
.hm-nota-campo { margin: 6px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--marca-apagado); }

/* ── Responsivo ───────────────────────────────────────────────────────────────
   O mockup é uma prancha de 1600px fixos. Numa tela real precisa dobrar, senão
   o portal fica inutilizável no celular — que é de onde a maioria dos responsáveis
   vai acessar. */
@media (max-width: 1400px) {
  .hm-grade { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .hm-col-dir { grid-column: 1 / -1; flex-direction: row; }
  .hm-col-dir > * { flex: 1; }
}
@media (max-width: 980px) {
  /* Ver o aviso do .hm-chat: empilhado, uma conversa de 560px engoliria a rolagem. */
  .hm-chat {
    position: fixed; right: 16px; bottom: 16px; z-index: 65;
    width: min(390px, calc(100vw - 24px)); height: min(560px, calc(100dvh - 40px));
    box-shadow: 0 18px 48px rgba(11, 42, 94, .26);
  }

  .hm-topo { height: auto; padding: 14px 18px; flex-wrap: wrap; gap: 14px; }
  .hm-titulo { font-size: 16px; }
  .hm-corpo { padding: 18px 18px 0; }
  .hm-grade { grid-template-columns: 1fr; }
  .hm-col-dir { flex-direction: column; }
  .hm-abre { flex-direction: column-reverse; align-items: stretch; }
  .hm-ilustra { width: 220px; margin: 0 auto; }
  .hm-abre h1 { font-size: 30px; }
  .hm-acoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-conf-grade { grid-template-columns: 1fr; }
  .hm-rodape { flex-wrap: wrap; }
}

/* ────────────────────────────────────────────────────────────────────────────
   Acréscimos de 19/08/2026 — a tela de entrada passou a ter três cartões de ação
   (saiu "Atualizar cadastro"), o bloco de primeiro acesso, o contato do CAC e o
   chat do assistente virtual.
   ──────────────────────────────────────────────────────────────────────────── */

/* Três cartões, não quatro. Com o MFA desligado pelo gestor sobram dois. */
.hm-acoes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hm-acoes.duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* "Primeiro acesso?" — a linha entre o Entrar e o botão de configurar o MFA. */
.hm-primeiro { text-align: center; font-size: 12.5px; font-weight: 500; color: var(--marca-apagado); }

/* O "Ambiente seguro" ganhou segunda linha; alinhar pelo topo evita o ícone centralizado
   em relação a duas linhas de texto, que fica visivelmente fora de eixo. */
.hm-seguro { align-items: flex-start; }
.hm-seguro span { font-size: 11.5px; line-height: 1.5; }
.hm-seguro strong { font-weight: 700; color: var(--marca-texto); }

/* ── Assistente: o cartão virou botão ─────────────────────────────────────── */
.hm-assistente {
  width: 100%; text-align: left; font-family: inherit; cursor: pointer;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.hm-assistente:hover { border-color: var(--marca-borda-forte); box-shadow: 0 6px 18px var(--marca-sombra); }
.hm-balao-cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 11px;
  font-size: 12px; font-weight: 700; color: var(--marca-titulo);
}

/* ── "Atendimento humano" clicável na faixa de confiança ──────────────────── */
.hm-conf-btn {
  font-family: inherit; text-align: left; cursor: pointer; border: 0; background: none;
  padding: 0; margin: 0; border-radius: 10px;
}
.hm-conf-btn:hover b { text-decoration: underline; }
.hm-conf-cta {
  display: block; margin-top: 6px; font-style: normal; font-size: 12px; font-weight: 700;
  color: var(--marca-titulo);
}

/* ── Caixa do contato do CAC ──────────────────────────────────────────────── */
.hm-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }
.hm-modal[hidden] { display: none; }
.hm-modal-fundo { position: absolute; inset: 0; background: rgba(11, 42, 94, .42); }
.hm-modal-caixa {
  position: relative; width: min(430px, calc(100vw - 32px)); background: #fff; border-radius: 14px;
  padding: 20px; display: flex; flex-direction: column; gap: 11px;
  box-shadow: 0 18px 48px rgba(11, 42, 94, .26);
}
.hm-modal-cab { display: flex; align-items: center; gap: 13px; }
.hm-modal-ic {
  width: 44px; height: 44px; flex: none; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
}
.hm-modal-tit { font-size: 18px; font-weight: 700; color: var(--marca-titulo); }
.hm-modal-sub { font-size: 12.5px; color: var(--marca-apagado); margin-top: 2px; }
.hm-modal-x { border: 0; background: none; cursor: pointer; padding: 4px; border-radius: 7px; flex: none; }
.hm-modal-x:hover { background: var(--marca-hover); }
.hm-contato {
  display: flex; align-items: center; gap: 13px; border: 1px solid var(--marca-borda); border-radius: 10px;
  padding: 13px 15px; text-decoration: none; background: #fff;
}
.hm-contato:hover { border-color: var(--marca-borda-forte); background: var(--marca-hover); }
.hm-contato i { display: block; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--marca-apagado); }
.hm-contato b { display: block; margin-top: 2px; font-size: 15.5px; font-weight: 700; color: var(--marca-texto); }
.hm-modal-pe { margin: 4px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--marca-apagado); }

/* ── Chat do assistente virtual ───────────────────────────────────────────────
   Painel fixo no canto, como todo chat de site. Sobe até `100dvh` no celular:
   com `vh`, a barra de endereço do navegador móvel come o campo de digitação. */
.hm-chat {
  border-radius: 20px; overflow: hidden; border: 1px solid var(--marca-borda);
  box-shadow: 0 2px 10px var(--marca-sombra); background: #fff;
  width: 100%; align-self: start;
  display: flex; flex-direction: column; font-family: inherit;
}
.hm-chat[hidden] { display: none; }
.hm-chat-cab {
  display: flex; align-items: flex-end; gap: 16px; padding: 20px 20px 0; background: var(--marca-escuro);
}
/* 96×104: o disco tem 96 e o avatar passa 8px dele para cima — é o que faz a figura "sair" do
   cabeçalho em vez de ficar dentro de uma bolinha. */
.hm-chat-av {
  position: relative; width: 96px; height: 104px; flex: none;
  display: flex; align-items: flex-end; justify-content: center;
}
.hm-chat-av::before {
  content: ""; position: absolute; left: 0; bottom: 0; width: 96px; height: 96px;
  border-radius: 50%; background: var(--marca-acento);
}
.hm-chat-av svg, .hm-chat-av img {
  position: relative; width: 88px; height: auto; max-height: 104px; display: block;
}
.hm-chat-cab-txt { display: flex; flex-direction: column; gap: 2px; padding-bottom: 22px; }
.hm-chat-nome { font-size: 16px; font-weight: 600; color: #fff; }
.hm-chat-tag {
  font-size: 12px; font-weight: 300; margin-top: 1px;
  color: color-mix(in srgb, #fff 78%, var(--marca-acento));
}
.hm-chat-x { border: 0; background: none; cursor: pointer; padding: 5px; border-radius: 7px; flex: none; }
.hm-chat-x:hover { background: rgba(255, 255, 255, .16); }

/* O aviso fica FIXO, não some ao rolar: quem entra no meio da conversa precisa continuar
   sabendo que não há pessoa do outro lado e que ali não se digita senha. */
.hm-chat-aviso {
  flex: none; background: #FEF7E8; border-bottom: 1px solid #F5DFAE; padding: 8px 15px;
  font-size: 11px; line-height: 1.45; color: #8A5A00;
}

.hm-chat-falas {
  flex: 1; min-height: 0; max-height: 360px; overflow-y: auto; padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
  background: color-mix(in srgb, var(--marca-suave) 45%, #fff);
}
.hm-fala {
  max-width: 88%; padding: 10px 13px; border-radius: 4px 14px 14px 14px; font-size: 13.5px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
  background: #fff; border: 1px solid var(--marca-borda); color: var(--marca-texto);
}
.hm-fala.minha {
  align-self: flex-end; max-width: 85%; background: var(--marca-primaria); color: #fff; border: 0;
  border-radius: 14px 4px 14px 14px;
}
.hm-fala.dela { align-self: flex-start; background: #fff; border: 1px solid var(--marca-borda); color: var(--marca-texto); border-bottom-left-radius: 4px; }
.hm-fala.digitando { color: var(--marca-apagado); font-style: italic; }
.hm-fala.erro { background: #FDECEA; border-color: #F5C6C2; color: #B3261E; }

.hm-chat-frequentes { flex: none; padding: 14px 18px 6px; display: flex; flex-direction: column; gap: 8px; }
.hm-chat-frequentes-tit {
  font-size: 11px; font-weight: 500; color: var(--marca-apagado);
  text-transform: uppercase; letter-spacing: .06em;
}
.hm-chat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-chip {
  border: 1px solid var(--marca-borda-forte); background: var(--marca-suave); color: var(--marca-escuro);
  border-radius: 999px; padding: 7px 12px; font-family: inherit; font-size: 12.5px; cursor: pointer;
  text-align: left;
}
.hm-chip:hover { background: var(--marca-suave2); border-color: var(--marca-primaria); }

.hm-chat-pe {
  flex: none; display: flex; align-items: center; gap: 8px; margin: 12px 18px 18px;
  height: 48px; padding: 0 6px 0 14px; border: 1px solid var(--marca-borda); border-radius: 999px; background: #fff;
}
.hm-chat-pe:focus-within { border-color: var(--marca-primaria); }
.hm-chat-pe input {
  flex: 1; min-width: 0; border: 0; border-radius: 0; padding: 0;
  font-family: inherit; font-size: 14px; color: var(--marca-texto); outline: none; background: transparent;
}
.hm-chat-pe input:focus { border-color: var(--marca-primaria); }
.hm-chat-pe button {
  flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--marca-primaria); display: flex; align-items: center; justify-content: center;
}
.hm-chat-pe button:hover { background: var(--marca-escuro); }
.hm-chat-pe button:disabled { opacity: .55; cursor: default; }

@media (max-width: 980px) {
  .hm-acoes, .hm-acoes.duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-chat { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
}

/* Assistente sem sessão: mesmo cartão do desenho, mas parado — sem "Clique para conversar",
   sem cursor de clique e sem realce no hover. Ver PodeConversarComAssistente. */
.hm-assistente-parado { cursor: default; }
.hm-assistente-parado:hover { border-color: var(--marca-borda); box-shadow: none; }

/* Cartão "identidade confirmada, abra seu e-mail" (portão de primeiro acesso). */
.hm-confirme p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--marca-texto); }
.hm-confirme strong { font-weight: 700; color: var(--marca-titulo); }

/* ── "Entre para continuar" ───────────────────────────────────────────────────
   Aviso de quem clicou num atalho sem estar logado. Fica DENTRO do cartão, colado
   no formulário que resolve o problema: um alerta no topo da página mandaria a
   pessoa procurar onde agir, e um modal precisaria ser fechado antes de digitar. */
.hm-precisa {
  display: flex; align-items: flex-start; gap: 10px;
  background: #FEF7E8; border: 1px solid #F5DFAE; border-radius: 10px; padding: 10px 12px;
}
.hm-precisa span { font-size: 11.5px; font-weight: 400; line-height: 1.5; color: #8A5A00; }
.hm-precisa strong { font-weight: 700; color: #7A4E00; }

/* Campo recusado pelo servidor. A caixa de erro no topo diz O QUE falta; isto diz ONDE. */
.hm-campo.invalido { border-color: #E4867E; background: #FFFBFB; }
.hm-campo.invalido:focus-within { border-color: #D5382C; }

/* Realce de quem chegou aqui por um atalho: o cartão pisca uma vez para o olho achá-lo
   na tela. Uma vez só — animação que repete vira ruído e atrapalha quem já achou. */
@keyframes hmPisca {
  0%   { box-shadow: 0 0 0 0 rgba(11, 63, 191, .34); }
  100% { box-shadow: 0 0 0 12px rgba(11, 63, 191, 0); }
}
.hm-cartao.destacado { animation: hmPisca .9s ease-out 2; border-color: var(--marca-borda-forte); }

/* Quem prefere menos movimento não recebe o pisca — o aviso em texto já cumpre o papel. */
@media (prefers-reduced-motion: reduce) {
  .hm-cartao.destacado { animation: none; }
}

/* "Esqueci minha senha" no cartão de login — ver o comentário na view. */
/* Duas saídas agora ("Primeiro acesso" e "Esqueci minha senha"): `space-between` as separa em vez
   de deixá-las coladas no canto direito, onde pareceriam um link só quebrado no meio. */
.hm-ajuda-senha { display: flex; justify-content: space-between; gap: 14px; margin-top: 7px; }
.hm-ajuda-senha a { font-size: 12.5px; font-weight: 600; color: var(--marca-primaria); }
.hm-ajuda-senha a:hover { text-decoration: underline; }

/* Faixa de confiança sem o cartão de MFA (gestor desligou): três colunas em vez de quatro. */
.hm-conf-grade.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Volta ao LexOne — ver IndexModel.ResolverVoltaAoLexOneAsync.
   Faixa no TOPO, antes do cabeçalho da escola: quem chegou aqui vindo da administração trocou de
   marca no meio do caminho, e o caminho de volta tem de estar onde o olho começa a ler, não
   enterrado no rodapé. Discreta de propósito — a tela é do titular, não da administração. */
.le-volta-lex {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--marca-bar); color: var(--marca-borda-forte);
  font-size: 12.5px; font-weight: 600; text-decoration: none;
}
.le-volta-lex:hover { background: var(--marca-texto); color: #FFFFFF; text-decoration: none; }
.le-volta-lex svg { flex: none; }


/* ══ Painel do titular logado (desenho 2a, 05/10/2026) ═════════════════════════════════════
   Logada, a tela muda de pergunta: deslogada responde "como entro?", logada responde "em que pé
   estão as minhas solicitações?". Por isso a coluna do meio — que era o login — desaparece e a
   grade passa a DUAS colunas. */
.hm-grade.logada { grid-template-columns: minmax(0, 1fr) 360px; }

.hm-ola { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.hm-ola-txt { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hm-ola h1 { margin: 0; font-size: 36px; line-height: 1.1; font-weight: 700; color: var(--marca-escuro); letter-spacing: -.02em; }
.hm-ola-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hm-ola-sub { font-size: 13.5px; color: var(--marca-apagado); }
.hm-ola-sep { width: 1px; height: 14px; background: var(--marca-borda-forte); }
.hm-ola-acoes { display: flex; gap: 10px; flex-wrap: wrap; }

/* O selo diz o ESTADO REAL — ver o aviso no Razor. Pendente é âmbar, não verde: carimbo de
   conferência que não houve é prova fabricada numa tela que autoriza entregar dado pessoal. */
.hm-selo {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
}
.hm-selo.ok { background: var(--marca-suave); color: var(--marca-escuro); }
.hm-selo.pendente { background: #FEF7E8; color: #8A5A00; }

.hm-btn-claro {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--marca-borda);
  background: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
body.hm a.hm-btn-claro { color: var(--marca-escuro); text-decoration: none; }
.hm-btn-claro:hover { border-color: var(--marca-primaria); }

.hm-pedidos {
  margin-top: 24px; background: #fff; border: 1px solid var(--marca-borda); border-radius: 20px;
  overflow: hidden;
}
.hm-pedidos-cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px 16px; flex-wrap: wrap; }
.hm-pedidos-cab h2 { margin: 0; font-size: 21px; font-weight: 700; color: var(--marca-escuro); }
.hm-pedidos-sub { font-size: 13px; color: var(--marca-apagado); margin-top: 3px; }
.hm-pedidos-sub b { color: #8A5A00; font-weight: 700; }

.hm-pedidos-vazio { padding: 8px 24px 26px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.hm-pedidos-vazio p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--marca-apagado); max-width: 420px; }
.hm-pedidos-vazio .hm-entrar { height: 44px; padding: 0 18px; }

.hm-pedido {
  display: flex; align-items: center; gap: 18px; padding: 16px 24px;
  border-top: 1px solid var(--marca-borda); flex-wrap: wrap;
}
/* 🔴 A LINHA QUE ESPERA A PESSOA É A ÚNICA DESTACADA. Sem isso, quem precisa anexar um documento
   descobre quando o prazo já venceu — e o prazo é dela, não da instituição. */
.hm-pedido.esperando { background: #FEF9EF; }
.hm-pedido-txt { flex: 1; min-width: 200px; }
.hm-pedido-topo { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.hm-pedido-proto { font-size: 11.5px; font-weight: 600; color: var(--marca-apagado); font-family: ui-monospace, Menlo, monospace; }
.hm-pedido-tipo { font-size: 16px; font-weight: 600; color: var(--marca-escuro); margin-top: 4px; }
.hm-pedido-sub { font-size: 12.5px; color: var(--marca-apagado); margin-top: 2px; }

.hm-passos { display: flex; align-items: center; gap: 4px; flex: none; flex-wrap: wrap; max-width: 190px; }
.hm-passo { width: 56px; height: 5px; border-radius: 3px; background: var(--marca-borda); }
.hm-passo.feito { background: var(--marca-primaria); }
.hm-pedido-data { width: 100%; font-size: 11.5px; color: var(--marca-apagado); margin-top: 6px; }
.hm-pedido-btn { flex: none; min-width: 132px; }

.hm-pedidos-pe { display: flex; align-items: center; gap: 18px; padding: 14px 24px; border-top: 1px solid var(--marca-borda); flex-wrap: wrap; }
.hm-legenda { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--marca-apagado); }
.hm-legenda i { width: 16px; height: 5px; border-radius: 3px; background: var(--marca-borda); display: block; }
.hm-legenda i.feito { background: var(--marca-primaria); }

@media (max-width: 980px) {
  .hm-grade.logada { grid-template-columns: 1fr; }
  .hm-ola h1 { font-size: 28px; }
  /* No celular a linha vira bloco: três colunas de 56px e um botão não cabem em 360px. */
  .hm-pedido { align-items: flex-start; }
  .hm-pedido-btn { width: 100%; }
  .hm-passos { max-width: none; width: 100%; }
}

/* O botao Voltar da barra: discreto sobre a cor da marca, como os outros controles do topo.
   Nasce com [hidden] e o script o revela — ver js/voltar.js. */
.hm-voltar {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  height: 38px; padding: 0 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .12);
  color: #fff; font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.hm-voltar:hover { background: rgba(255, 255, 255, .22); }
.hm-voltar[hidden] { display: none; }


/* ────────────────────────────────────────────────────────────────────────────
   O CELULAR, pelo desenho "Mobile app UI Portal Titular" (06/10/2026).

   ⚠️ SÓ MEDIDAS, NENHUMA COR CRAVADA. O desenho é verde porque foi feito sobre o
   IA Grow Medical; este portal veste a marca de cada instituição, e copiar os
   #0b7568 / #1e635a / #277c72 de lá pintaria o Grupo Arco com a paleta da
   clínica. Tudo aqui sai das variáveis que o topo deste arquivo deriva da marca.

   ⚠️ 640px e não 980px: em 980 já existe a quebra para uma coluna, que serve ao
   tablet. Esta faixa é a do telefone, onde o desenho mede 390px — e é onde as
   medidas de dedo (campo de 52px, botão de 54px) passam a importar.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* A barra do topo: logo de 40px, nome e lema, como no desenho. A de 96px foi
     desenhada para o computador e come um sexto da tela de um telefone. */
  .hm-topo { height: auto; padding: 14px 20px; gap: 12px; }
  .hm-logo { width: 40px; height: 40px; border-radius: 11px; padding: 5px; }
  .hm-titulo { font-size: 16px; font-weight: 600; }
  .hm-lema-1 { font-size: 12px; }
  .hm-lema-2 { font-size: 11px; }
  /* A faixinha decorativa sai: a 390px ela disputa espaço com o nome. */
  .hm-faixa { display: none; }

  .hm-corpo { padding: 24px 20px 0; gap: 20px; }

  .hm-abre h1 { font-size: 32px; line-height: 1.1; letter-spacing: -.01em; }
  .hm-abre p { margin-top: 10px; font-size: 14px; line-height: 1.6; }

  /* O cartão de entrada. */
  .hm-cartao { padding: 20px; gap: 16px; }
  .hm-cartao-ic { width: 44px; height: 44px; border-radius: 12px; }
  .hm-cartao-tit { font-size: 19px; }
  .hm-cartao-sub { font-size: 12px; }

  /* 🔴 O CAMPO TEM 52px E A LETRA TEM 16px, e os dois números são de propósito.
     Abaixo de 16px o iOS DÁ ZOOM ao focar o campo — a tela salta, o resto sai de
     vista e a pessoa precisa fechar o teclado para se achar. E 48px de altura é
     o mínimo de um alvo de dedo; 52 dá folga sem empurrar o botão para fora. */
  .hm-campo { height: 52px; border-radius: 14px; border-width: 1.5px; }
  .hm-campo input { font-size: 16px; }

  .hm-entrar { height: 54px; border-radius: 14px; }

  /* "Primeiro acesso" e "Esqueci minha senha" lado a lado, como no desenho —
     com alvo de 44px de altura, senão o dedo acerta um e abre o outro. */

  .hm-seguro { align-items: flex-start; font-size: 11.5px; line-height: 1.5; }

  /* "Segurança e Confiança em Tudo que Fazemos": lista, não grade. */
  .hm-h2 { margin: 6px 0 2px; font-size: 15px; font-weight: 600; }
  .hm-conf-ic { width: 36px; height: 36px; }
  .hm-conf { gap: 12px; }

  /* Os dois atalhos ("Acompanhar solicitações" e "Nova solicitação") empilham:
     a 390px, dois cartões lado a lado deixam o texto em duas palavras por linha. */
  .hm-acoes, .hm-acoes.duas { grid-template-columns: 1fr; }

  /* Respiro no fim: sem ele o último bloco encosta na borda inferior, e em
     telefone com gesto de voltar a pessoa raspa o dedo no conteúdo. */
  .hm-rodape { padding-bottom: 24px; }
}

/* ── Correções da faixa do celular, contra o desenho (06/10/2026) ────────────
   O primeiro bloco mexeu pouco e o dono notou: "não mudou nada". Duas razões —
   a quebra de 980px já empilhava quase tudo, e eu mirei `.hm-primeiro`, que não
   existe nesta página (os dois links moram em `.hm-ajuda-senha`). Regra morta.

   O que o desenho muda de verdade, e aqui vai: a BARRA do topo vira a barra de
   um aplicativo (logo, nome e lema numa linha só) e a ASSISTENTE sai da coluna
   lateral para virar um botão flutuante — está escrito na própria prancha.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* ── A barra, como no desenho ──────────────────────────────────────────── */

  /* O título da tela é longo ("Portal do Titular (DSAR) – Bem vindo ao …") e a
     390px ele ocupa quatro linhas. O desenho mostra duas: nome e lema. */
  .hm-titulo { font-size: 15px; line-height: 1.25; }

  /* ⚠️ "Transparência e confiança sempre." sai SÓ no telefone. É a terceira
     linha de um bloco que o desenho mostra com duas — e some a frase, não o
     bloco, para o lema principal continuar ao lado do nome. */
  .hm-lema-2 { display: none; }

  /* ── Os dois links, lado a lado ────────────────────────────────────────── */

  /* 🔴 ERA `.hm-primeiro` NO BLOCO ANTERIOR, e essa classe não existe aqui: a
     regra nunca pegou. O nome certo é este. */
  .hm-ajuda-senha {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
  /* Alvo de 44px de altura: a 390px, dois links de 13px colados fazem o dedo
     acertar um e abrir o outro. */
  .hm-ajuda-senha a { padding: 11px 0; font-size: 13px; font-weight: 600; }

  /* 🔁 AQUI EU TRANSFORMEI O CARTAO DA ASSISTENTE EM PILULA FLUTUANTE, E QUEBREI A TELA
     (06/10/2026). Dentro de .hm-col-dir mora tambem o .hm-chat, que a quebra de 980px ja faz
     ocupar 100vw x 100dvh. Ao fixar o pai, a conversa passou a cobrir a tela inteira e engolir
     o formulario de entrada: o portal ficou inutilizavel no celular.

     O desenho pede mesmo um botao flutuante — mas ele e UM ELEMENTO PROPRIO, nao o mesmo
     cartao reposicionado. Reposicionar um bloco que contem um painel de tela cheia nao vira
     botao: vira painel de tela cheia em outro lugar. Refazer com marcacao propria. */

  /* ⚠️ Folga no fim da página do tamanho da pílula: sem isso ela cobre o último
     bloco de "Segurança e Confiança", que é texto que a pessoa pode estar lendo. */
  .hm-rodape { padding-bottom: 86px; }
}

/* ── O botão flutuante da assistente (06/10/2026) ────────────────────────────
   Desenho "Portal do Titular · Mobile": no telefone a assistente sai da coluna
   lateral e vira um botão no canto; a conversa abre em tela cheia pelo toque.

   ⚠️ NASCE ESCONDIDO e só aparece no celular. No computador a coluna da direita
   JÁ É a conversa — um botão para abrir o que está aberto é ruído. */
.hm-fab-ia { display: none; }
.hm-chat-x { display: none; }

@media (max-width: 980px) {

  /* O cartão PARADO da assistente (deslogado) some no telefone: ele é decoração
     de uma coluna que não existe aqui, e empurrava o rodapé para baixo da dobra.
     ⚠️ Esconde o CARTÃO, nunca a coluna: dentro dela mora a conversa, e esconder
     o pai levaria o painel junto — foi o erro de duas publicações atrás. */
  .hm-assistente-parado { display: none; }

  .hm-fab-ia {
    position: fixed; right: 14px; bottom: 14px; z-index: 70;
    display: flex; align-items: center; gap: 10px;
    max-width: calc(100vw - 28px);
    padding: 7px 16px 7px 7px; border: 0; border-radius: 999px;
    background: var(--marca-bar); color: #fff; cursor: pointer;
    font-family: inherit; text-align: left;
    box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .5);
  }
  .hm-fab-ia img {
    width: 40px; height: 40px; flex: none; border-radius: 50%;
    object-fit: cover; object-position: top center; background: var(--marca-primaria);
  }
  .hm-fab-ia b { display: block; font-size: 13px; font-weight: 700; line-height: 1.2; }
  .hm-fab-ia em { display: block; font-style: normal; font-size: 11.5px; color: rgba(255, 255, 255, .82); }

  /* O × da conversa: só existe onde ela ocupa a tela toda. */
  .hm-chat-x {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: 38px; height: 38px; margin-left: auto;
    border: 0; border-radius: 50%; background: rgba(0, 0, 0, .06);
    color: var(--marca-titulo); cursor: pointer;
  }

  /* ⚠️ O painel fica ACIMA do botão: aberto, ele cobre a tela, e o botão por
     cima dele pareceria um segundo caminho para o que já está na frente. */
  .hm-chat { z-index: 80; }
}

/* ── "Segurança e Confiança" no celular: fila que desliza ────────────────────
   Pedido do dono (06/10/2026): os três blocos ficaram apertados empilhados —
   precisam de mais largura e de rolagem horizontal.

   Empilhados, cada um ocupava uma faixa estreita e os três somados empurravam
   o rodapé para longe da dobra. Numa fila que desliza, cada cartão recebe quase
   a tela inteira e os outros dois ficam a um gesto de distância. */
@media (max-width: 640px) {

  /* ⚠️ `.tres` junto no seletor: a variante tem especificidade maior e venceria
     a regra simples — o mesmo detalhe que já me custou uma publicação aqui. */
  .hm-conf-grade,
  .hm-conf-grade.tres {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    /* 🔴 SANGRA ATÉ A BORDA DA TELA. Sem isto o último cartão encosta no padding
       do cartão branco e a fila parece acabar ali — ninguém tenta arrastar o que
       parece completo. Com a sangria, o cartão seguinte "espia" na beirada, que
       é o que diz à pessoa que há mais. Os 24px são o padding do .hm-confianca. */
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
  }
  .hm-conf-grade::-webkit-scrollbar { display: none; }

  /* Cada bloco vira cartão de verdade: sem borda, três textos soltos lado a lado
     não se leem como três coisas separadas quando deslizam. */
  .hm-conf {
    flex: 0 0 84%;
    scroll-snap-align: start;
    box-sizing: border-box;
    padding: 14px;
    border: 1px solid var(--marca-borda);
    border-radius: 14px;
    background: var(--marca-hover);
  }

  /* O botão do atendimento humano é o terceiro cartão: precisa do mesmo corpo,
     e o reset dele zera padding e borda. */
  .hm-conf-btn {
    padding: 14px;
    border: 1px solid var(--marca-borda);
    background: var(--marca-hover);
  }

  /* ⚠️ `scroll-padding` para o encaixe parar na borda do conteúdo, e não atrás
     da sangria: sem isto o cartão encaixado fica 24px cortado à esquerda. */
  .hm-conf-grade { scroll-padding-left: 24px; }

  /* Com mais largura cabe o texto inteiro; o título pode crescer um degrau. */
  .hm-conf b { font-size: 14px; }
  .hm-conf span { font-size: 12.5px; }

  /* O cartão branco que envolve tudo encolhe as laterais para a fila sangrar
     sem criar rolagem na PÁGINA — a rolagem é só da fila. */
  .hm-confianca { padding: 18px 24px; overflow: hidden; }
}