/* ============================================================
   marque.med.br — a capa do marketplace

   Duas audiências na mesma página: o médico que procura agenda barata e a
   secretária que procura consultório. O tom é mais direto que o do Domínio
   Médico — aqui o argumento é preço e simplicidade, não completude.
   ============================================================ */

*, *::before, *::after { box-sizing:border-box; }
/* `display:block` não é decoração: enquanto o marque.med.br for servido pelo
   Railway, esta capa é injetada DENTRO da página de login — e o CSS do login
   põe `display:flex` no body. Sem esta linha, as seções viram colunas lado a
   lado. O marque.js também tira o CSS de lá; isto é o cinto além do
   suspensório, porque a capa pode ser injetada em outra página amanhã. */
body {
  display:block;
  margin:0; color:#15233B; background:#fff;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 { line-height:1.2; margin:0; }
a { color:inherit; }

/* ---------- topo ---------- */
/* Fixo no alto: com o menu do celular saindo daqui, o cabeçalho precisa
   estar sempre à mão — quem está no meio da vitrine não deve rolar até em
   cima para achar "Entrar". */
.mh-topo {
  position:sticky; top:0; z-index:60;
  /* Translúcido com desfoque: o conteúdo passa por baixo em vez de sumir
     atrás de uma faixa branca. O fundo NÃO é transparente de verdade — 78%
     de branco por baixo garante contraste do texto onde o desfoque não é
     suportado, que é onde a régua de acessibilidade morava. */
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(14px) saturate(165%);
          backdrop-filter:blur(14px) saturate(165%);
  border-bottom:1px solid rgba(15,41,66,.07);
  box-shadow:0 1px 2px rgba(15,41,66,.04);
  transition:box-shadow .22s, background .22s, border-color .22s;
}
/* Rolando, a sombra cresce: parado no topo não há nada para separar, e
   sombra sem nada embaixo é enfeite. O .rolado vem do marque-topo.js — sem
   ele o cabeçalho continua com desfoque e sombra, só não reage. */
.mh-topo.rolado {
  background:rgba(255,255,255,.72);
  border-bottom-color:rgba(15,41,66,.05);
  box-shadow:0 4px 24px rgba(15,41,66,.10), 0 1px 3px rgba(15,41,66,.06);
}

/* Sem suporte a desfoque (Firefox antigo), o fundo fica opaco: 78% de branco
   por cima de um texto que rola atrás é ilegível. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .mh-topo, .mh-topo.rolado { background:#fff; }
}
.mh-topo-int {
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:16px 26px; max-width:1120px; margin:0 auto;
}
/* âncora que para embaixo do cabeçalho não serve de âncora */
:target, section[id] { scroll-margin-top:74px; }

/* ---------- o logotipo ----------
   O lockup tem 862×124 (≈7:1). Altura fixa e largura livre: travar as duas
   achataria a marca, e `height` sozinho deixa o navegador calcular a
   largura pela proporção do arquivo.

   O `width`/`height` continuam no <img> de propósito — é a proporção que
   reserva o espaço antes de o SVG chegar, e sem eles a barra pula quando
   ele carrega. */
.mh-marca { display:inline-flex; align-items:center; text-decoration:none; }
.mh-marca img { display:block; height:26px; width:auto; }
@media (max-width:560px){ .mh-marca img { height:22px; } }
.mh-nav { display:flex; align-items:center; gap:20px; font-size:.9rem; }
.mh-nav a { text-decoration:none; color:#3d4a5c; }
.mh-nav a:hover { color:#00A99D; }

/* ---------- menu do celular ---------- */
/* ---------- o botão do menu ----------
   Uma maleta médica no lugar das três barras. O hambúrguer é genérico; a
   maleta diz de que assunto é este site antes de abrir qualquer coisa.

   Desenhada aqui em traço, e não trazida da Font Awesome: a versão gratuita
   dela é sólida e pede atribuição por licença, e uma fonte de ícones inteira
   para um glifo só é peso que esta capa não tem hoje. O traço de 1.8 é o
   mesmo dos ícones do Domínio Médico.

   Os dois SVGs ficam empilhados na mesma célula do grid: trocam por opacidade
   e um giro curto, então o botão nunca muda de tamanho no meio da troca. */
.mh-menu-btn {
  display:none; place-items:center; grid-template-areas:"ico";
  width:42px; height:42px; padding:0; cursor:pointer;
  background:none; border:1px solid #e3e8ef; border-radius:11px;
  color:#15233B;
}
.mh-menu-btn svg {
  grid-area:ico; width:23px; height:23px;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
  transition:opacity .18s, transform .22s;
}
/* fechado: maleta à vista, × guardado meio girado */
.mh-menu-x { opacity:0; transform:rotate(-90deg) scale(.7); }
/* aberto: o mesmo botão fecha, e o × diz isso sem legenda */
.mh-menu-btn[aria-expanded="true"] .mh-menu-ico { opacity:0; transform:rotate(90deg) scale(.7); }
.mh-menu-btn[aria-expanded="true"] .mh-menu-x   { opacity:1; transform:none; }
.mh-menu-btn[aria-expanded="true"] { border-color:#00A99D; color:#00857b; }

@media (prefers-reduced-motion: reduce){
  .mh-menu-btn svg { transition:opacity .18s; transform:none; }
  .mh-menu-btn[aria-expanded="true"] .mh-menu-ico { transform:none; }
}

@media (max-width: 760px){
  /* `grid` e não `flex`: os dois ícones se empilham por grid-area. */
  .mh-menu-btn { display:grid; }

  /* Painel, não gaveta lateral: são quatro itens. Uma gaveta de tela cheia
     para quatro links é cerimônia demais para o que o dedo precisa fazer. */
  .mh-nav {
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid #eef1f6;
    box-shadow:0 18px 40px rgba(15,41,66,.10);
    padding:6px 20px 18px;
    /* fechado: sem altura e sem foco alcançável por tab */
    display:none;
  }
  .mh-nav.aberto { display:flex; }

  .mh-nav a {
    padding:15px 4px; font-size:1rem; font-weight:600;
    border-bottom:1px solid #f2f5f8;
  }
  .mh-nav a:last-child { border-bottom:none; }

  /* o "Entrar" deixa de ser um link no meio da lista e vira o botão que é */
  .mh-nav .mh-botao-fino {
    margin-top:12px; text-align:center; padding:13px 16px; font-size:.95rem;
  }
}

/* ---------- botões ---------- */
.mh-botao, .mh-botao-vazado, .mh-botao-fino {
  display:inline-block; text-decoration:none; text-align:center; cursor:pointer;
  font-weight:700; border-radius:11px; font-family:inherit; transition:.16s;
}
.mh-botao { background:#00A99D; color:#fff; border:none; padding:14px 24px; font-size:.98rem; }
.mh-botao-claro { background:#fff; color:#00695f; }
.mh-botao-vazado { background:transparent; border:1.5px solid #cfd8e3; padding:12px 22px; font-size:.94rem; }
.mh-botao-fino {
  border:1.5px solid #cfd8e3; padding:8px 16px; font-size:.86rem; background:#fff;
}

/* ============================================================
   O HOVER DOS BOTÕES
   ============================================================
   Uma luz que nasce ONDE o ponteiro entrou e acompanha ele por dentro do
   botão, com o botão subindo um pixel sobre a própria sombra.

   ---------- por que não é o efeito do Domínio Médico ----------
   Lá o botão tem um anel de luz girando (conic-gradient animado em
   landing.css). É bonito e é de lá: gira sozinho, chama atenção para si e
   combina com uma página que vende presença. O marque vende o contrário —
   o essencial, sem o preço do completo. Então aqui a luz não gira nem
   começa sozinha: ela responde ao ponteiro e some quando ele sai.

   ---------- o que sustenta isso sem JavaScript ----------
   `--mx` e `--my` têm padrão 50%: sem o luz-do-ponteiro.js, a luz nasce no
   centro e o efeito continua inteiro, só não segue a mão. Nenhuma regra
   daqui depende de script nenhum.

   ---------- por que `isolation` ----------
   O brilho é um ::before de z-index negativo, que assim pinta ACIMA do
   fundo do botão e ABAIXO do texto — sem precisar embrulhar o texto num
   <span>, o que obrigaria a mexer em cada botão do site. Sem `isolation`,
   o -1 escapa do botão e a luz vai parar atrás da seção. */
.mh-botao, .mh-botao-claro, .mh-botao-vazado, .mh-botao-fino {
  position:relative; isolation:isolate; overflow:hidden;
}
.mh-botao::before, .mh-botao-claro::before,
.mh-botao-vazado::before, .mh-botao-fino::before {
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  transition:opacity .25s ease;
  background:radial-gradient(150px circle at var(--mx, 50%) var(--my, 50%),
             var(--luz, rgba(255,255,255,.4)), transparent 65%);
}
.mh-botao:hover::before, .mh-botao-claro:hover::before,
.mh-botao-vazado:hover::before, .mh-botao-fino:hover::before { opacity:1; }

/* Sólido: clareia em vez de escurecer. O botão escurecer no hover é o
   reflexo de quinze anos de CSS e diz "apertado"; clarear com a luz por
   cima diz "aceso", que é o que um ponteiro em cima significa. */
.mh-botao:hover {
  background:#00b5a7; transform:translateY(-1px);
  box-shadow:0 10px 22px -6px rgba(0,169,157,.55);
}
.mh-botao:active { transform:translateY(0); box-shadow:0 4px 10px -4px rgba(0,169,157,.5); }

/* Claro sobre fundo verde: a luz branca sumiria no branco do botão. */
.mh-botao-claro { --luz:rgba(0,105,95,.16); }
.mh-botao-claro:hover {
  background:#fff; transform:translateY(-1px);
  box-shadow:0 10px 22px -6px rgba(3,40,36,.4);
}
.mh-botao-claro:active { transform:translateY(0); }

/* Vazados: a mesma luz, em verde, lavando de onde o ponteiro entrou. */
.mh-botao-vazado, .mh-botao-fino { --luz:rgba(0,169,157,.16); }
/* O texto não fica no #00A99D da borda: medido, ele dá 2,9:1 sobre branco e
   não se lê — era assim antes, e o hover piorava a legibilidade do botão
   justamente no momento em que alguém está prestes a clicar. O #00756c é o
   mesmo verde três paradas abaixo, em 5,6:1. */
.mh-botao-vazado:hover, .mh-botao-fino:hover {
  border-color:#00A99D; color:#00756c; transform:translateY(-1px);
  box-shadow:0 8px 18px -8px rgba(0,169,157,.5);
}
.mh-botao-vazado:active, .mh-botao-fino:active { transform:translateY(0); }

/* Teclado vê o mesmo que o mouse: sem isto, quem navega por Tab atravessa
   os botões sem nenhum sinal além do anel do foco. */
.mh-botao:focus-visible, .mh-botao-claro:focus-visible,
.mh-botao-vazado:focus-visible, .mh-botao-fino:focus-visible {
  outline:2px solid #00857b; outline-offset:3px;
}
.mh-botao:focus-visible::before, .mh-botao-claro:focus-visible::before,
.mh-botao-vazado:focus-visible::before, .mh-botao-fino:focus-visible::before { opacity:1; }

/* Quem pediu menos movimento continua vendo a cor mudar — o que sai é o
   pulo e o crescimento da sombra, que é o que se move. */
@media (prefers-reduced-motion: reduce) {
  .mh-botao:hover, .mh-botao-claro:hover,
  .mh-botao-vazado:hover, .mh-botao-fino:hover { transform:none; }
}

/* No toque não existe "passar por cima": o hover fica grudado depois do
   toque e o botão continua aceso até se tocar em outro lugar. */
@media (hover: none) {
  .mh-botao::before, .mh-botao-claro::before,
  .mh-botao-vazado::before, .mh-botao-fino::before { display:none; }
  .mh-botao:hover, .mh-botao-claro:hover,
  .mh-botao-vazado:hover, .mh-botao-fino:hover { transform:none; box-shadow:none; }
}

/* ---------- hero ---------- */
/* `minmax(0, …)` nas duas colunas, e não `1fr` puro: o mínimo de uma coluna
   de grade é `auto`, que NÃO deixa o filho encolher abaixo do conteúdo. Com
   `1fr`, qualquer coisa que não quebre lá dentro — uma palavra enorme, um
   trecho em `nowrap` — estica a coluna por cima da largura da tela e leva a
   página junto. Foi o que aconteceu com o título do herói no celular. */
.mh-hero {
  max-width:1120px; margin:0 auto; padding:40px 26px 60px;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:44px; align-items:center;
}
@media (max-width: 880px){ .mh-hero { grid-template-columns:minmax(0,1fr); gap:32px; padding-bottom:40px; } }

.mh-selo {
  display:inline-block; background:#E6F7F5; color:#00695f;
  border-radius:20px; padding:5px 13px; font-size:.76rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; margin-bottom:16px;
}
.mh-hero h1 { font-size:2.5rem; letter-spacing:-.025em; }
.mh-hero h1 em { color:#00A99D; font-style:normal; }
@media (max-width: 600px){ .mh-hero h1 { font-size:1.9rem; } }
.mh-hero p { color:#4a5769; font-size:1.02rem; margin:16px 0 26px; max-width:46ch; }

.mh-ctas { display:flex; gap:11px; flex-wrap:wrap; }

.mh-nums { display:flex; gap:30px; margin-top:34px; flex-wrap:wrap; }
.mh-nums b { display:block; font-size:1.35rem; letter-spacing:-.02em; }
.mh-nums span { font-size:.8rem; color:#6B7686; }

/* o cartão de demonstração: mostra o produto em vez de descrevê-lo */
.mh-hero-arte { display:flex; justify-content:center; }
.mh-cartao-demo {
  width:100%; max-width:360px; background:#fff; border-radius:18px; padding:20px;
  box-shadow:0 22px 54px rgba(15,41,66,.16); border:1px solid #eef1f6;
  transform:rotate(1.2deg);
}
.mh-demo-topo { display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; }
.mh-demo-av {
  flex:none;
  width:48px; height:48px; border-radius:50%; background:#7C4DFF; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.95rem;
}
.mh-demo-topo b { display:block; font-size:.98rem; }
.mh-demo-topo small { color:#6B7686; font-size:.8rem; display:block; }
.mh-demo-crm { color:#9AA4B2; font-size:.72rem; display:block; margin-top:3px; }

/* modalidades: chip miúdo, porque a informação é binária e não precisa de peso */
.mh-demo-tags { display:flex; gap:6px; margin-bottom:12px; }
.mh-demo-tags span {
  background:#E6F7F5; color:#00695f; border-radius:20px;
  padding:3px 10px; font-size:.72rem; font-weight:700;
}

.mh-demo-dados { margin:0 0 14px; display:grid; gap:7px; }
.mh-demo-dados > div { display:flex; gap:8px; align-items:flex-start; }
.mh-demo-dados dt { flex:none; font-size:.78rem; line-height:1.5; }
.mh-demo-dados dd { margin:0; font-size:.79rem; color:#4a5769; line-height:1.5; }

.mh-demo-dia {
  font-size:.74rem; font-weight:700; color:#6B7686; margin-bottom:8px;
  padding-top:12px; border-top:1px solid #eef1f6;
}
.mh-demo-slots { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.mh-demo-slots span {
  border:1.5px solid #e3e8ef; border-radius:8px; padding:8px 0; text-align:center;
  font-size:.85rem; font-weight:700; color:#00A99D;
}
.mh-demo-slots .on { background:#00A99D; color:#fff; border-color:#00A99D; }
.mh-demo-url {
  margin-top:15px; text-align:center; font-size:.78rem; color:#9AA4B2;
  border-top:1px dashed #e3e8ef; padding-top:12px;
}

/* ---------- seções ---------- */
/* ---------- a linha do site ----------
   26px de recuo dentro de um teto de 1120 — ou seja, 1068px de conteúdo,
   e é essa a medida que a barra do topo usa. O logotipo e o botão Entrar
   são a régua visível: qualquer coisa que comece antes ou termine depois
   deles aparece torta, mesmo que ninguém saiba dizer por quê.

   Quem precisa de faixa de ponta a ponta (as escuras, a vitrine, a cena, o
   rodapé) chega no mesmo 1068 por recuo, não por um teto de 1120 — teto de
   1120 num filho que já está dentro do recuo joga ele 26px para fora dos
   dois lados. Foi o que acontecia com os cartões de secretária.

   No celular o recuo é 26 em todas elas. Eram 22 em quatro seções, e a
   diferença de 4px aparecia como um degrau ao rolar. */
.mh-secao { max-width:1120px; margin:0 auto; padding:56px 26px; }
.mh-secao h2 { font-size:1.7rem; letter-spacing:-.02em; }
.mh-sub { color:#6B7686; margin:8px 0 0; max-width:60ch; }
.mh-secao-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:26px; }

/* ---------- os cinco cartões do "essencial" ---------- */
/* Três por linha, e a última linha CENTRADA. Eram quatro mais um: o
   `auto-fit` com mínimo de 230px cabia quatro em 1068, e o quinto cartão
   sobrava sozinho, encostado na esquerda — parecia que alguém tinha
   esquecido de terminar a fileira.

   Flex, e não grade, por causa exatamente disso: grade não sabe centrar a
   última linha quando ela vem incompleta, e cinco itens nunca preenchem
   uma grade de três ou de quatro. Com `flex-wrap` e `justify-content`, a
   sobra fica no meio e passa a parecer decisão.

   A base é um terço descontados os vãos, sem `min-width`: um mínimo em
   pixels empurra a conta para dois por linha em telas médias e deixa
   cartões estreitos boiando num espaço largo. Quem decide quantos cabem é
   o ponto de quebra abaixo, não o conteúdo. */
.mh-grade {
  display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin-top:30px;
}
.mh-grade article { flex:0 1 calc((100% - 36px) / 3); }
@media (max-width: 780px){ .mh-grade article { flex-basis:calc((100% - 18px) / 2); } }
@media (max-width: 520px){ .mh-grade article { flex-basis:100%; } }
.mh-grade article { background:#f7f9fb; border-radius:14px; padding:22px 20px; }
/* ---------- os ícones ----------
   O mesmo traço do Domínio Médico: linha única de 1,5px, cantos redondos e
   um halo da cor. Eram emojis — que mudam de desenho conforme o aparelho e
   não têm como ser animados. O JavaScript (assets/js/efeitos.js) faz a
   linha nascer de uma ponta à outra; sem ele, o ícone continua lá, inteiro.

   A cor é a do marque, não a do Domínio Médico: é o mesmo traço, não a
   mesma marca. */
.mh-ico {
  --cor:#00A99D;
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--cor) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--cor) 34%, transparent);
}
.mh-ico svg {
  width:24px; height:24px; display:block;
  overflow:visible;               /* o halo passa da caixa; cortar aqui o apaga */
}
.mh-ico path {
  fill:none; stroke:var(--cor); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 4px color-mix(in srgb, var(--cor) 60%, transparent));
  transition:filter .3s, stroke-width .3s;
}
.mh-grade article:hover .mh-ico path {
  filter:drop-shadow(0 0 9px var(--cor)); stroke-width:1.7;
}
/* A ponta de luz: cópia do mesmo traço, curta e clara, que o JavaScript faz
   correr pelo caminho enquanto a linha nasce. Nasce invisível — sem script,
   continua invisível e não sobra nada estranho na tela. */
.mh-ico .lp-ico-luz {
  stroke:#fff; stroke-width:2; opacity:0;
  filter:drop-shadow(0 0 6px #fff);
}
.mh-grade h3 { font-size:1.02rem; margin:10px 0 6px; }
.mh-grade p { color:#5a6779; font-size:.9rem; margin:0; }

/* ---------- destaque: gravação + resumo por IA ---------- */
/* Fundo escuro para separar do resto da página. É o argumento mais forte da
   oferta e precisa parar o olho de quem está rolando. */
.mh-destaque {
  background:linear-gradient(160deg,#0F2942,#173a5c 120%); color:#fff;
  /* A faixa é de ponta a ponta; o CONTEÚDO dela mede os mesmos 1068px de
     todas as outras seções.

     O recuo faz esse papel no lugar de um `max-width`, que aqui não serve:
     este elemento é a faixa E a grade ao mesmo tempo, e limitá-lo cortaria
     o degradê do fundo no meio da tela. Com o `max()`, acima de 1120px
     sobra exatamente 1068 por dentro — a mesma medida de conteúdo que as
     outras seções entregam — e abaixo disso vale o recuo de 26px.

     Antes as duas colunas eram `1.05fr .95fr` de uma grade sem limite, com
     cada filha em `max-width:560px` e justificada para o meio: o conteúdo
     terminava 1168px de largura, começando 7px antes e passando 55px
     depois das outras seções. Na seção do chat, onde a ordem das colunas é
     invertida, a diferença chegava a 84px — e era visível. */
  padding:64px max(26px, (100% - 1068px) / 2);
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
}
@media (max-width: 900px){
  .mh-destaque { grid-template-columns:1fr; gap:32px; padding:48px 26px; }
  .mh-destaque > * { justify-self:stretch; max-width:none; }
}

/* ============================================================
   A MARCA DE FUNDO
   ------------------------------------------------------------
   O símbolo do logotipo em tamanho grande atrás do conteúdo da faixa
   escura. Textura de marca, não ilustração: por isso sangra pela borda em
   vez de aparecer inteiro e centrado, que leria como "logotipo posto aí".

   `overflow:hidden` na seção é o que faz o corte; sem ele a marca
   estouraria para fora e criaria rolagem lateral na página toda.

   A opacidade é 0,14, e o número é medido, não escolhido no olho. Ela
   clareia o fundo, então o teto é o texto: no ponto mais claro do degradê
   (#173a5c), a marca leva o fundo a #375673, onde o branco fica em 7,66:1
   e o cinza-claro dos parágrafos (#C6D3E2) em 5,04:1 — os dois acima dos
   4,5 exigidos. Em 0,20 o parágrafo cairia para 4,24 e reprovaria.

   Comecei em 0,055, que era invisível: some na tela e some na compressão
   do print. Marca d'água que ninguém vê não é discrição, é desperdício. */
.mh-destaque { position:relative; overflow:hidden; isolation:isolate; }
.mh-marca-fundo {
  position:absolute; z-index:-1; pointer-events:none;
  right:-6%; top:50%; translate:0 -50%;
  width:min(620px, 58%); height:auto;
  fill:#fff; opacity:.14;
}
/* A seção do chat é clara e inverte as colunas: ali a marca iria na
   esquerda, e com a tinta escura. Fica pronta para quando quiser. */
.mh-destaque-claro .mh-marca-fundo { fill:#0F2942; opacity:.07; right:auto; left:-6%; }

@media (max-width: 900px){
  /* No telefone a faixa é uma coluna e o texto ocupa a largura toda: a
     marca grande atrás dele vira ruído sob cada linha. Encolhe e sobe para
     o canto, onde continua sendo textura. */
  .mh-marca-fundo { width:min(360px, 72%); right:-14%; top:0; translate:0 -18%; }
}
/* A animação é do efeitos.js. Sem ele — e para quem pediu menos movimento —
   as duas hastes já estão no lugar: o que o JS anima é a chegada delas. */
@media (prefers-reduced-motion: reduce){
  .mh-marca-fundo [data-m-haste] { transform:none !important; opacity:1 !important; }
}

.mh-selo-claro { background:rgba(255,255,255,.14); color:#8BE8DE; }
.mh-destaque h2 { font-size:1.85rem; letter-spacing:-.025em; }
@media (max-width: 600px){ .mh-destaque h2 { font-size:1.45rem; } }
.mh-destaque > div > p { color:#C6D3E2; margin:14px 0 22px; font-size:1rem; }
.mh-destaque b { color:#fff; }

.mh-destaque-lista { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.mh-destaque-lista li {
  position:relative; padding-left:26px; font-size:.92rem; color:#C6D3E2; line-height:1.55;
}
.mh-destaque-lista li::before {
  content:"✓"; position:absolute; left:0; top:0;
  color:#00D6C4; font-weight:800;
}

/* o rascunho SOAP: mostra a saída em vez de descrevê-la */
.mh-soap {
  background:#fff; color:#15233B; border-radius:16px; padding:18px;
  box-shadow:0 26px 60px rgba(5,18,34,.42);
}
.mh-soap-topo { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.mh-rec { display:flex; align-items:center; gap:7px; font-size:.8rem; font-weight:700; color:#C4384A; }
.mh-rec i {
  width:9px; height:9px; border-radius:50%; background:#C4384A; display:block;
  animation:mh-pulsa 1.4s infinite;
}
@keyframes mh-pulsa { 0%,100%{opacity:1} 50%{opacity:.25} }
@media (prefers-reduced-motion: reduce){ .mh-rec i { animation:none; } }
.mh-soap-t { font-size:.8rem; color:#9AA4B2; font-variant-numeric:tabular-nums; }

.mh-soap-linhas { display:grid; gap:10px; }
.mh-soap-linhas > div { display:flex; gap:10px; align-items:flex-start; }
.mh-soap-linhas b {
  flex:none; width:24px; height:24px; border-radius:7px;
  background:#E6F7F5; color:#00695f; font-size:.78rem;
  display:flex; align-items:center; justify-content:center;
}
.mh-soap-linhas p { margin:0; font-size:.85rem; line-height:1.5; color:#3d4a5c; }

.mh-soap-pe {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin-top:16px; padding-top:13px; border-top:1px solid #eef1f6;
}
.mh-soap-cid { font-size:.76rem; font-weight:700; color:#00695f; background:#E6F7F5; border-radius:20px; padding:3px 11px; }
.mh-soap-rev { font-size:.78rem; font-weight:700; color:#00A99D; }

/* ---------- vitrine ---------- */
.mh-vitrine { background:#f7f9fb; max-width:none; }
/* 1068, e não 1120: a faixa é de ponta a ponta e já tem os 26px de recuo
   de .mh-secao, mas os filhos dela não — então um teto de 1120 os punha
   26px para fora da linha do site dos dois lados. Os cartões de secretária
   ficavam mais largos que os de artigo logo abaixo e que o próprio
   logotipo lá em cima.

   A linha do site é a da barra do topo: 136 → 1204 numa janela de 1340.
   1120 (o teto) menos 2 × 26 (o recuo) = 1068, que é o que todas as outras
   seções entregam de conteúdo. */
.mh-vitrine > * { max-width:1068px; margin-left:auto; margin-right:auto; }
.mh-secretarias { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:18px; }

.mh-sec { background:#fff; border:1px solid #eef1f6; border-radius:14px; padding:20px; display:flex; flex-direction:column; }
.mh-sec-topo { display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.mh-sec-av { width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.9rem; }
.mh-sec-topo b { display:block; font-size:1rem; }
.mh-sec-topo small { color:#6B7686; font-size:.82rem; }
.mh-sec-bio { font-size:.9rem; color:#4a5769; margin:0 0 12px; }
.mh-sec-dados { margin:0 0 14px; font-size:.84rem; }
.mh-sec-dados div { display:flex; gap:7px; padding:3px 0; }
.mh-sec-dados dt { color:#9AA4B2; flex:none; }
.mh-sec-dados dd { margin:0; color:#3d4a5c; }
.mh-sec-pe { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:auto; padding:12px 0; border-top:1px solid #eef1f6; }
.mh-sec-valor { font-weight:800; font-size:1.05rem; }
.mh-sec-valor small { font-weight:600; font-size:.76rem; color:#6B7686; }

/* campo de preço do cadastro: R$ [ 900 ] por mês */
.mh-campo-valor { display:flex; align-items:center; gap:8px; margin-top:5px; }
.mh-campo-valor i { font-style:normal; font-size:.84rem; color:#6B7686; font-weight:600; flex:none; }
.mh-campo-valor input { margin-top:0; }
/* `flex:none` + `nowrap`: quem cede espaço é o preço, que tem onde quebrar.
   Sem isto, "R$ 1.800 por consultório/mês · dedicação exclusiva" espremia a
   etiqueta e ela virava "1 / vaga" em duas linhas. */
.mh-sec-vagas {
  flex:none; white-space:nowrap;
  font-size:.76rem; color:#00695f; background:#E6F7F5; border-radius:20px; padding:2px 10px; font-weight:700;
}
.mh-sec .mh-botao-fino { width:100%; }

.mh-vazio { background:#fff; border:1px dashed #cfd8e3; border-radius:14px; padding:34px 26px; text-align:center; grid-column:1/-1; }
.mh-vazio p { color:#6B7686; font-size:.92rem; max-width:46ch; margin:8px auto 16px; }

/* ---------- CTA da secretária ---------- */
/* Duas colunas: o convite de um lado, a foto do outro. Antes o texto
   ocupava a metade esquerda e a direita ficava vazia — uma faixa verde de
   ponta a ponta com um buraco. O recuo é o mesmo das faixas escuras, pela
   mesma razão: a faixa é de ponta a ponta, o conteúdo dela mede 1068. */
.mh-cta {
  background:linear-gradient(140deg,#00695f,#00A99D 130%); color:#fff;
  padding:60px max(26px, (100% - 1068px) / 2);
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
}
/* 1068, e não 1120: a faixa é de ponta a ponta e já carrega o recuo de
   26px, então um teto de 1120 num filho dela o joga 26px para fora da
   linha do site dos dois lados. É a mesma armadilha dos cartões de
   secretária — teto de 1120 vale para quem TEM o recuo; quem está dentro
   de um pai já recuado usa 1068. */
/* O teto saiu daqui: agora quem limita é o recuo da seção, e um teto a
   mais dentro de uma coluna de grade só encolheria o texto sem motivo. */
.mh-cta-txt { }

/* ---------- a foto ---------- */
/* Fundo claro por baixo da imagem: enquanto ela não chega, o buraco no
   verde fica com a cor dela, e não preto. */
.mh-cta-foto {
  position:relative; border-radius:18px; overflow:hidden; background:#e8f4f2;
  box-shadow:0 26px 60px -24px rgba(3,40,36,.65);
}
/* A foto é deitada e tem muito branco em cima; `cover` com a mira em 32%
   corta o vazio e mantém o rosto no quadro. O 4/3 é o que faz a coluna da
   direita ficar da altura do texto da esquerda. */
.mh-cta-foto img {
  display:block; width:100%; height:100%;
  aspect-ratio:4/3; object-fit:cover; object-position:50% 32%;
}
/* Moldura fina por dentro, como na cena do meio da página: dá o ar de
   camada sem escurecer a imagem — e tira o ar de recorte branco colado no
   verde, que é o que uma foto de fundo claro faz numa faixa colorida. */
.mh-cta-foto::after {
  content:""; position:absolute; inset:10px; border-radius:12px;
  border:1px solid rgba(255,255,255,.45); pointer-events:none;
}

@media (max-width: 900px){
  .mh-cta { grid-template-columns:1fr; gap:30px; }
  /* No celular a foto vem DEPOIS do convite: quem rola até aqui está lendo
     a proposta, e uma imagem antes dela empurra o texto para fora da tela. */
  .mh-cta-foto { order:2; }
}
.mh-cta h2 { font-size:1.7rem; letter-spacing:-.02em; max-width:22ch; }
.mh-cta p { max-width:56ch; margin:14px 0 24px; opacity:.94; }
.mh-cta small { display:block; margin-top:12px; opacity:.8; font-size:.8rem; }

/* ============================================================
   A CENA
   ============================================================
   A única faixa da página com gente num lugar de verdade. Tudo o mais é
   cartão, ícone e interface desenhada — e uma página inteira assim fica
   correta e fria.

   ---------- por que o véu é diagonal ----------
   A foto é clara do lado direito (janela) e escura do esquerdo. Um véu
   chapado precisaria ser forte o bastante para o pior pedaço, e aí a foto
   vira um fundo cinza qualquer — não valia a pena ter foto. O degradê
   escurece onde o texto mora e solta onde ele não vai: o lado direito fica
   com a sala à mostra, que é o que humaniza. */
.mh-cena {
  position:relative;
  /* `isolation` é o que faz o ::before de z-index negativo parar ACIMA do
     fundo e ABAIXO do conteúdo. Sem ela, ele desce para trás da seção e o
     véu some — a foto fica crua e o texto branco some nos claros dela. */
  isolation:isolate;
  background:#0B2433 url("/assets/img/servicos/sistema.jpg") center/cover no-repeat;
  color:#fff;
}
.mh-cena::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,
    rgba(8,30,44,.95) 0%, rgba(8,30,44,.91) 36%,
    rgba(8,30,44,.60) 66%, rgba(8,30,44,.24) 100%);
}
.mh-cena-int {
  max-width:1120px; margin:0 auto; padding:76px 26px;
  display:grid; grid-template-columns:1fr .88fr; gap:46px; align-items:center;
}
.mh-cena h2 { font-size:3rem; letter-spacing:-.03em; line-height:1.05; }
.mh-cena h2 em { color:#8BE8DE; font-style:normal; }
.mh-cena p { color:#C6D3E2; margin:16px 0 26px; max-width:46ch; font-size:1rem; }
.mh-cena .mh-botao-vazado { border-color:rgba(255,255,255,.5); color:#fff; }
.mh-cena .mh-botao-vazado:hover { border-color:#fff; background:rgba(255,255,255,.1); color:#fff; }

/* ---------- o que flutua sobre a foto ---------- */
/* Escalonado por margem, não por posição absoluta: absoluto precisaria de
   uma altura fixa para a arte, e altura fixa com texto dentro é o começo
   de um corte no celular. As margens dão o mesmo ar de peças soltas e a
   coluna continua crescendo com o conteúdo. */
.mh-cena-arte { display:grid; gap:11px; justify-items:start; max-width:430px; }

.mh-cena-tag {
  margin-left:30px; display:inline-flex; align-items:center; gap:9px;
  background:#fff; color:#15233B; border-radius:99px;
  padding:9px 17px 9px 14px; font-size:.82rem; font-weight:700;
  box-shadow:0 12px 30px rgba(4,18,28,.34);
}
/* O ponto verde diz "no ar" sem escrever "no ar". */
.mh-cena-tag::before {
  content:""; width:8px; height:8px; border-radius:50%;
  background:#00A99D; flex:none;
}

.mh-cena-fichas { display:grid; gap:9px; justify-items:start; }
.mh-cena-fichas span {
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; color:#15233B; border-radius:12px;
  padding:9px 15px 9px 11px; font-size:.81rem; font-weight:700; line-height:1.3;
  box-shadow:0 12px 30px rgba(4,18,28,.3);
}
.mh-cena-fichas span::before {
  content:"✓"; width:18px; height:18px; border-radius:6px; flex:none;
  background:#00A99D; color:#fff; font-size:.7rem; font-weight:900;
  display:grid; place-items:center;
}
.mh-cena-fichas span:nth-child(2) { margin-left:20px; }
.mh-cena-fichas span:nth-child(3) { margin-left:40px; }

/* O cartão de vidro: desfoca a foto atrás dele em vez de tapá-la. */
.mh-cena-vidro {
  margin-top:7px; border-radius:16px; padding:17px 19px;
  background:rgba(6,26,38,.42); border:1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
          backdrop-filter:blur(18px) saturate(140%);
}
.mh-cena-vidro b { display:block; font-size:1rem; margin-bottom:6px; }
.mh-cena-vidro p { margin:0; font-size:.84rem; line-height:1.55; color:rgba(255,255,255,.88); max-width:none; }
/* Sem desfoque (Firefox antigo), vidro translúcido é só texto sobre foto. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .mh-cena-vidro { background:rgba(6,26,38,.8); }
}

@media (max-width: 900px) {
  /* Empilhado, o degradê diagonal escureceria só o alto. Aqui ele vira
     vertical, cobrindo o texto que agora está por cima da foto inteira. */
  .mh-cena::before {
    background:linear-gradient(180deg,
      rgba(8,30,44,.95) 0%, rgba(8,30,44,.9) 55%, rgba(8,30,44,.8) 100%);
  }
  .mh-cena-int { grid-template-columns:1fr; gap:34px; padding:54px 26px; }
  .mh-cena h2 { font-size:2.3rem; }
  .mh-cena-arte { max-width:none; }
  /* O escalonamento era para a arte flutuar ao lado do texto. Numa coluna
     só ele vira desalinhamento. */
  .mh-cena-tag,
  .mh-cena-fichas span:nth-child(2),
  .mh-cena-fichas span:nth-child(3) { margin-left:0; }
}
@media (max-width: 480px) { .mh-cena h2 { font-size:1.85rem; } }

/* ---------- os cartões de artigo ---------- */
/* Moram aqui, e não na folha do blog: o mesmo cartão aparece na capa, no
   índice do blog e no pé de cada artigo, e só esta folha é carregada pelas
   três. Na folha do blog eles ficariam invisíveis justamente na capa. */
.mh-posts {
  display:grid; gap:22px;
  grid-template-columns:repeat(auto-fit, minmax(min(270px, 100%), 1fr));
}
.mh-post {
  display:flex; flex-direction:column;
  background:#fff; border:1px solid #eef1f6; border-radius:14px;
  overflow:hidden; text-decoration:none; color:inherit;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.mh-post:hover {
  border-color:#cfe9e6;
  box-shadow:0 14px 34px rgba(15,41,66,.09);
  transform:translateY(-2px);
}
.mh-post-capa { aspect-ratio:16/10; background:#E6F7F5; overflow:hidden; }
.mh-post-capa img {
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.mh-post:hover .mh-post-capa img { transform:scale(1.04); }

.mh-post-corpo { display:flex; flex-direction:column; gap:9px; padding:18px 20px 20px; flex:1; }
.mh-post-corpo time {
  font-size:.74rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:#5a6779;
}
/* Três linhas e ponto: título comprido no meio de uma fila empurra o
   "Ler artigo" dos vizinhos para alturas diferentes. */
.mh-post h3 {
  font-size:1.02rem; line-height:1.35; letter-spacing:-.01em; flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; transition:color .2s;
}
.mh-post:hover h3 { color:#00857b; }
.mh-post-mais {
  display:inline-flex; align-items:center; gap:7px;
  font-size:.88rem; font-weight:700; color:#00857b;
}
.mh-post-mais i { font-style:normal; transition:transform .25s; }
.mh-post:hover .mh-post-mais i { transform:translateX(4px); }

/* ---------- rodapé ---------- */
/* Era uma faixa com o nome e quatro links. Virou mapa do site, com uma
   coluna por audiência: o médico que está decidindo, a secretária que
   procura consultório e o paciente que caiu aqui atrás de um médico.
   Numa lista só, nenhuma das três se encontra.

   O conteúdo vem de tools/marque-casca.mjs — é o mesmo nas páginas de mão
   e nas geradas. */
.mh-rodape { border-top:1px solid #eef1f6; background:#fbfcfd; }
.mh-rodape-int {
  max-width:1120px; margin:0 auto; padding:52px 26px 40px;
  display:grid; grid-template-columns:minmax(260px, 1.1fr) 2fr; gap:40px;
}
/* O <b> virou caixa do logotipo. `display:block` porque <b> é inline e a
   altura do <img> dentro dele deixaria um vão embaixo (a linha de base). */
.mh-rodape-marca b.mh-rodape-logo { display:block; }
.mh-rodape-marca b.mh-rodape-logo img { display:block; height:28px; width:auto; }
.mh-rodape-marca p {
  color:#5a6779; margin:12px 0 20px; font-size:.9rem; line-height:1.6; max-width:38ch;
}

/* As três colunas. `auto-fit` e não três fixas: o rodapé é o lugar onde
   uma coluna a mais entra sem ninguém avisar o CSS. */
.mh-rodape-cols {
  display:grid; gap:28px 24px;
  grid-template-columns:repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}
.mh-rodape-cols h3 {
  font-size:.74rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:#9AA4B2; margin-bottom:14px;
}
.mh-rodape-cols div { display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.mh-rodape-cols a {
  color:#3d4a5c; text-decoration:none; font-size:.9rem; line-height:1.4;
  transition:color .18s;
}
.mh-rodape-cols a:hover { color:#00857b; }

.mh-rodape-pe { border-top:1px solid #eef1f6; }
.mh-rodape-pe p {
  max-width:1120px; margin:0 auto; padding:20px 26px 36px;
  color:#6B7686; font-size:.84rem; line-height:1.6;
}
.mh-rodape-pe a { color:#00857b; font-weight:600; }

/* Numa tela estreita as duas faixas viram uma coluna só, e o botão deixa de
   disputar a linha com o texto da marca. */
@media (max-width: 760px) {
  .mh-rodape-int { grid-template-columns:1fr; gap:34px; padding:40px 26px 32px; }
  .mh-rodape-cols { gap:26px 20px; }
}

/* ---------- modal ---------- */
.mh-overlay {
  position:fixed; inset:0; background:rgba(15,41,66,.55); backdrop-filter:blur(3px);
  display:none; align-items:flex-start; justify-content:center; padding:32px 16px; overflow-y:auto; z-index:100;
}
.mh-overlay.aberto { display:flex; }
.mh-modal { background:#fff; border-radius:18px; padding:28px; width:100%; max-width:600px; position:relative; }
.mh-fechar { position:absolute; top:14px; right:14px; border:none; background:none; font-size:1.5rem; color:#9AA4B2; cursor:pointer; line-height:1; }
.mh-modal h3 { font-size:1.25rem; }
.mh-modal-sub { color:#6B7686; font-size:.9rem; margin:8px 0 18px; }

.mh-linha { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width: 560px){ .mh-linha { grid-template-columns:1fr; } }
.mh-modal label { display:block; font-size:.84rem; font-weight:700; margin-bottom:12px; }
.mh-modal input, .mh-modal textarea {
  display:block; width:100%; margin-top:5px; font:inherit; font-size:.92rem; font-weight:400;
  border:1px solid #dfe4ec; border-radius:10px; padding:10px 12px;
}
.mh-modal textarea { min-height:80px; resize:vertical; }
.mh-modal input:focus, .mh-modal textarea:focus { outline:none; border-color:#00A99D; }
.mh-modal .mh-botao { width:100%; margin-top:6px; }

.mh-erro { display:none; background:#FDECEC; color:#9d2b2b; border-radius:10px; padding:11px 13px; font-size:.87rem; margin-bottom:14px; }

.mh-ok { display:none; text-align:center; padding:20px 0; }
.mh-ok.aberto { display:block; }
.mh-ok-ico { width:54px; height:54px; border-radius:50%; background:#E6F6EE; color:#12885A; display:flex; align-items:center; justify-content:center; font-size:1.6rem; font-weight:800; margin:0 auto 14px; }
.mh-ok h4 { font-size:1.1rem; margin-bottom:8px; }
.mh-ok p { color:#5a6779; font-size:.92rem; margin:0 0 18px; }

/* ---------- diretório na capa ---------- */
.mh-diretorio { display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-top:26px; }
@media (max-width: 700px){ .mh-diretorio { grid-template-columns:1fr; gap:24px; } }
.mh-dir-col h3 { font-size:.86rem; text-transform:uppercase; letter-spacing:.06em; color:#9AA4B2; margin-bottom:12px; }
.mh-dir-links { display:flex; flex-wrap:wrap; gap:8px; }
.mh-dir-links a {
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  background:#f7f9fb; border-radius:20px; padding:8px 14px;
  font-size:.88rem; color:#3d4a5c; transition:.16s;
}
.mh-dir-links a:hover { background:#E6F7F5; color:#00695f; }
.mh-dir-links i { font-style:normal; font-size:.74rem; color:#9AA4B2; }

/* ---------- destaque: menos notificações ---------- */
/* Fundo claro entre duas seções brancas, e tipografia grande: é o argumento
   que vende a secretária, e ele precisa parar o olho de quem está rolando. */
.mh-silencio { background:#f4f8f9; }
.mh-silencio-int {
  max-width:1120px; margin:0 auto; padding:70px 26px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
}
@media (max-width: 900px){
  .mh-silencio-int { grid-template-columns:1fr; gap:34px; padding:52px 26px; }
}

.mh-silencio h2 { font-size:3rem; letter-spacing:-.03em; line-height:1.05; }
.mh-silencio h2 em { color:#00A99D; font-style:normal; }
@media (max-width: 900px){ .mh-silencio h2 { font-size:2.3rem; } }
@media (max-width: 480px){ .mh-silencio h2 { font-size:1.85rem; } }
.mh-silencio-txt p { color:#4a5769; font-size:1.04rem; margin:18px 0 26px; max-width:48ch; }

/* as duas telas, lado a lado */
.mh-silencio-arte { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
@media (max-width: 420px){ .mh-silencio-arte { grid-template-columns:1fr; } }

.mh-tela {
  background:#fff; border:1px solid #e6ecf1; border-radius:16px; padding:14px;
  box-shadow:0 14px 34px rgba(15,41,66,.08);
}
.mh-tela-topo {
  display:flex; justify-content:space-between; align-items:baseline;
  padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #eef1f6;
}
.mh-tela-topo b { font-size:.82rem; }
.mh-tela-topo span { font-size:.7rem; color:#9AA4B2; }

.mh-msg {
  background:#f2f5f8; border-radius:12px 12px 12px 4px;
  padding:8px 11px; font-size:.78rem; color:#3d4a5c; margin-bottom:6px; line-height:1.4;
}
.mh-msg-mais { background:none; color:#9AA4B2; padding:4px 2px; font-size:.74rem; }

/* a coluna "antes" fica levemente apagada: o contraste é o argumento */
.mh-tela-antes { opacity:.82; }
.mh-tela-depois { border-color:#bde9e4; box-shadow:0 18px 40px rgba(0,169,157,.16); }

.mh-resumo-dia {
  background:#E6F7F5; border-radius:12px; padding:12px; margin-bottom:8px;
}
.mh-resumo-dia b { font-size:.8rem; color:#00695f; display:block; }
.mh-resumo-dia p { margin:5px 0 0; font-size:.76rem; color:#3d4a5c; line-height:1.45; }
.mh-resumo-de { display:block; margin-top:8px; font-size:.68rem; color:#00857b; font-weight:700; }
.mh-msg-so { background:#f2f5f8; color:#6B7686; border-radius:12px; }

/* ---------- destaque: chat e tarefas ---------- */
/* Variante clara do destaque: a arte vem à esquerda para não repetir
   exatamente o bloco da gravação logo acima. */
.mh-destaque-claro { background:#F4F8FB; color:#12263a; }
.mh-destaque-claro h2 { color:#0F2942; }
.mh-destaque-claro > div > p { color:#4a5a6d; }
.mh-destaque-claro .mh-destaque-lista li { color:#4a5a6d; }
.mh-destaque-claro .mh-destaque-lista li::before { color:#00A896; }
.mh-destaque-claro .mh-destaque b { color:#0F2942; }
.mh-destaque-claro b { color:#0F2942; }
.mh-selo-escuro { background:#E6F7F5; color:#00695f; }

.mh-conv {
  background:#fff; border-radius:16px; padding:16px;
  box-shadow:0 18px 44px -26px rgba(15,41,66,.5); border:1px solid #e4ecf3;
}
.mh-conv-topo {
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:12px; border-bottom:1px solid #eef3f8; margin-bottom:14px;
}
.mh-conv-quem { display:flex; align-items:center; gap:9px; font-weight:700; font-size:.88rem; color:#0F2942; }
.mh-conv-quem i {
  width:26px; height:26px; border-radius:50%; background:#E6F7F5; color:#00695f;
  display:flex; align-items:center; justify-content:center; font-style:normal; font-size:.76rem; font-weight:800;
}
.mh-conv-on { font-size:.72rem; color:#00A896; font-weight:600; }
.mh-conv-on::before { content:"●"; margin-right:5px; font-size:.6rem; }

.mh-conv-corpo { display:grid; gap:9px; }
.mh-bolha {
  position:relative; max-width:86%; padding:10px 13px 16px;
  border-radius:13px; font-size:.86rem; line-height:1.45;
}
.mh-bolha-med { background:#0F2942; color:#fff; justify-self:end; border-bottom-right-radius:4px; }
.mh-bolha-sec { background:#eef3f8; color:#2b3a4d; justify-self:start; border-bottom-left-radius:4px; }
.mh-hora { position:absolute; right:11px; bottom:5px; font-size:.63rem; opacity:.6; }

.mh-conv-vira {
  text-align:center; font-size:.72rem; font-weight:700; color:#00A896;
  letter-spacing:.04em; text-transform:uppercase; margin:14px 0 10px;
}

.mh-tarefa { border:1.5px solid #d7e6e3; background:#F7FCFB; border-radius:13px; padding:13px 14px; }
.mh-tarefa-topo { display:flex; align-items:center; gap:9px; margin-bottom:7px; }
.mh-tarefa-urg {
  background:#FDECEC; color:#B4262B; font-size:.68rem; font-weight:800;
  border-radius:20px; padding:3px 9px; letter-spacing:.03em; text-transform:uppercase;
}
.mh-tarefa-pac { font-size:.8rem; color:#5a6779; font-weight:600; }
.mh-tarefa-oque { margin:0 0 11px; font-size:.9rem; font-weight:600; color:#12263a; line-height:1.4; }
.mh-tarefa-pe { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mh-tarefa-dono { display:flex; align-items:center; gap:7px; font-size:.78rem; color:#5a6779; }
.mh-tarefa-dono i {
  width:21px; height:21px; border-radius:50%; background:#0F2942; color:#fff;
  display:flex; align-items:center; justify-content:center; font-style:normal; font-size:.66rem; font-weight:700;
}
.mh-tarefa-st { background:#E6F7F5; color:#00695f; font-size:.73rem; font-weight:700; border-radius:20px; padding:4px 11px; }

/* Entrada em sequência: começa quando a seção aparece na tela.
   Só escondemos os passos se o JS estiver vivo (classe mh-anima no <html>) —
   sem isso, um erro de script deixaria a demonstração invisível. */
.mh-anima .mh-passo { opacity:0; }
.mh-anima .mh-ligado .mh-passo { animation:mhSurge .5s ease forwards; animation-delay:var(--atraso,0s); }
@keyframes mhSurge { from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion:reduce) { .mh-passo { animation:none; opacity:1; } }

@media (max-width:900px) {
  .mh-arte-esq { order:2; }
  .mh-destaque-claro .mh-destaque-txt { order:1; }
}

/* ---------- o quadro de tarefas dentro do destaque ---------- */
/* Réplica enxuta do quadro real: as mesmas três colunas e os mesmos dois
   tipos de cartão (pedido do médico / tarefa da secretária). */
.mh-quadro {
  background:#fff; border:1px solid #e4ecf3; border-radius:16px;
  padding:14px; margin-top:12px;
  box-shadow:0 18px 44px -30px rgba(15,41,66,.45);
}
.mh-quadro-topo { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.mh-quadro-tit { font-weight:700; font-size:.85rem; color:#0F2942; }
.mh-quadro-filtros { display:flex; gap:5px; }
.mh-quadro-filtros i {
  font-style:normal; font-size:.68rem; font-weight:600; color:#5a6779;
  border:1px solid #dbe5ee; border-radius:20px; padding:3px 9px;
}
.mh-quadro-filtros i.on { background:#E6F7F5; border-color:#9fded6; color:#00695f; }

.mh-colunas { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; align-items:start; }
.mh-coluna { background:#f5f8fb; border-radius:11px; padding:9px; }
.mh-coluna-head {
  display:flex; align-items:center; justify-content:space-between;
  font-size:.7rem; font-weight:700; color:#5a6779; text-transform:uppercase;
  letter-spacing:.03em; margin-bottom:8px;
}
.mh-coluna-head span {
  background:#e6edf4; color:#5a6779; border-radius:20px;
  min-width:17px; height:17px; display:inline-flex; align-items:center;
  justify-content:center; font-size:.65rem;
}

.mh-cartao {
  background:#fff; border:1px solid #e4ecf3; border-radius:9px;
  padding:8px 9px; margin-bottom:7px; box-shadow:0 2px 5px -3px rgba(15,41,66,.3);
}
.mh-cartao:last-child { margin-bottom:0; }
.mh-cartao-alta { border-left:3px solid #E0575E; }
.mh-cartao-feito { opacity:.72; }
.mh-cartao-feito p { text-decoration:line-through; color:#7b8798; }
.mh-cartao-topo { display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-bottom:5px; }
.mh-tag { font-size:.63rem; font-weight:700; border-radius:20px; padding:2px 7px; white-space:nowrap; }
.mh-tag-pedido { background:rgba(26,115,232,.1); color:#1A73E8; }   /* do médico */
.mh-tag-tarefa { background:rgba(0,169,157,.12); color:#00877E; }   /* da secretária */
.mh-urgente { font-size:.61rem; font-weight:800; color:#B4262B; text-transform:uppercase; letter-spacing:.03em; }
.mh-cartao-pac { display:block; font-size:.68rem; color:#5a6779; margin-bottom:3px; }
.mh-cartao p { margin:0 0 6px; font-size:.76rem; line-height:1.35; color:#12263a; font-weight:600; }
.mh-cartao-pe { font-size:.63rem; color:#8a95a5; }

/* na coluna estreita do desktop e no celular, o quadro rola de lado como no app */
@media (max-width:1080px) {
  .mh-colunas { grid-auto-flow:column; grid-auto-columns:minmax(148px,1fr); grid-template-columns:none; overflow-x:auto; padding-bottom:4px; }
}

/* Esta seção carrega conversa + quadro: a arte precisa de mais largura que a
   do bloco da gravação, senão os cartões do quadro ficam ilegíveis. */
@media (min-width:901px) {
  .mh-destaque-claro { grid-template-columns:1.15fr .85fr; }
  .mh-destaque-claro .mh-destaque-arte { max-width:640px; }
}

/* Item de grid não encolhe abaixo do conteúdo sem min-width:0 — sem isto o
   quadro de três colunas empurra a seção para fora da tela no celular. */
.mh-destaque-claro .mh-destaque-arte,
.mh-quadro,
.mh-colunas { min-width:0; max-width:100%; }
.mh-colunas { scrollbar-width:thin; }