/* ============================================================
   marque.med.br — preços e planos

   Carregado DEPOIS de marque-home.css, que traz a casca (topo, rodapé,
   botões, a linha de 1068 e os ícones).

   ---------- a anatomia é a da página de planos do Domínio Médico ----------
   Mesma estrutura de cartão — fundo próprio, ícone, nome, uma linha de
   "para quem é", preço somado, lista com ✓ e botão —, mesmo efeito de
   mouse em que a fila inteira apaga e só a coluna sob o ponteiro volta ao
   cheio. É o que faz as duas páginas serem reconhecidamente da mesma casa.

   O que NÃO se copiou foi a pele: lá o ícone é um PNG em 3D e a cor é azul;
   aqui é o traço de linha que o resto do marque usa e o verde da marca.
   Copiar os PNGs traria para dentro do marque a identidade do produto
   grande, que é justamente a que a página inteira diz que você não está
   comprando.

   E NENHUM preço está escrito aqui ou no HTML: quem soma é o
   marque-precos.js, lendo `precos_servicos`. Reajuste feito no painel
   chega à página sozinho — a mesma regra da página de planos do DM.
   ============================================================ */

/* ---------- o cabeçalho da página ---------- */
.mq-pr-capa {
  background:linear-gradient(150deg,#00695f,#00A99D 165%); color:#fff;
  padding:64px 26px 72px;
  padding-inline:max(26px, (100% - 1068px) / 2);
}
.mq-pr-capa h1 { font-size:clamp(1.9rem, 4vw, 2.6rem); letter-spacing:-.025em; margin:0; max-width:17ch; }
.mq-pr-capa p  { margin:14px 0 0; max-width:56ch; color:#D9F3F0; font-size:1.02rem; line-height:1.6; }
.mq-pr-olho {
  display:inline-block; margin-bottom:14px;
  font-size:.74rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#BFEDE7;
}

/* ---------- a fileira de planos ----------
   `auto-fit` com mínimo de 260px: são três cartões, e em 1068 eles ficam
   com 345 cada. Abaixo de ~820 viram dois e depois um, sozinhos. */
.mq-planos {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:16px; align-items:stretch; margin-top:30px;
}

.mq-plano {
  position:relative; display:flex; flex-direction:column; gap:12px;
  padding:34px 28px; border-radius:16px;
  background:var(--plano-cor,#fff); border:1px solid #e6ebf1;
  transition:.4s;
}
/* O efeito é do CONTÊINER: ao entrar na fila todas caem para 60%, e só a
   que está sob o ponteiro volta. Posto no cartão, cada um reagiria sozinho
   e o gesto deixaria de ser "escolher entre três". */
.mq-planos:hover .mq-plano { opacity:.6; }
.mq-plano:hover,
.mq-planos:hover .mq-plano:hover {
  opacity:1; transform:scale(1.02); z-index:2;
  box-shadow:0 18px 40px rgba(0,60,54,.14);
}
@media (prefers-reduced-motion: reduce){
  .mq-plano, .mq-planos:hover .mq-plano, .mq-plano:hover { transition:none; transform:none; opacity:1; }
}
/* Em tela de toque não existe ponteiro parado: o "apagar as outras" fica
   congelado no cartão que a pessoa tocou por último. */
@media (hover: none){
  .mq-planos:hover .mq-plano { opacity:1; }
  .mq-plano:hover { transform:none; box-shadow:none; }
}

.mq-plano-destaque { border-color:#00A99D; box-shadow:0 14px 34px rgba(0,60,54,.1); }
/* A fita é #00695f, e não o #00A99D da marca: ela é texto branco de 11px, e
   branco sobre #00A99D dá 2,93:1. Sobre o verde escuro dá 6,5:1. Fita é
   rótulo, não botão — ninguém clica nela, mas todo mundo precisa ler. */
.mq-plano-fita {
  position:absolute; top:-11px; left:24px;
  font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 11px; border-radius:999px; background:#00695f; color:#fff;
}
.mq-plano h2 { font-size:1.22rem; margin:0; letter-spacing:-.01em; }
.mq-plano-conta { color:#5a6779; font-size:.92rem; margin:0; line-height:1.5; }

/* O preço nasce escondido e o JS o mostra. Sem banco, a página não inventa
   número nenhum — mostra a linha de apoio e manda falar com a gente. */
.mq-plano-preco {
  font-size:1.55rem; font-weight:800; letter-spacing:-.025em; color:#00695f; line-height:1.15;
}
.mq-plano-preco small {
  display:block; margin-top:3px;
  font-size:.72rem; font-weight:600; letter-spacing:0; color:#5a6779;
}
.mq-plano ul { list-style:none; margin:4px 0 0; padding:0; display:grid; gap:9px; flex:1; }
.mq-plano li { display:flex; gap:10px; align-items:flex-start; font-size:.92rem; color:#5a6779; line-height:1.5; }
.mq-plano li::before { content:"✓"; color:#00A99D; font-weight:800; flex:none; }
.mq-plano .mh-botao, .mq-plano .mh-botao-vazado { margin-top:8px; width:100%; justify-content:center; }

/* ---------- a conta item a item ----------
   O que a calculadora mostrava em público. Aqui é uma tabela parada: os
   mesmos itens, o mesmo preço, sem a conta interativa — que agora é
   ferramenta de quem vende, não de quem compra. */
.mq-itens { width:100%; border-collapse:collapse; margin-top:22px; }
.mq-itens th {
  text-align:left; padding:11px 14px; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.06em; color:#6B7686; font-weight:700;
  border-bottom:1px solid #e6ebf1;
}
.mq-itens td { padding:16px 14px; border-bottom:1px solid #eef2f6; vertical-align:top; }
.mq-itens tr:last-child td { border-bottom:none; }
.mq-itens b { display:block; font-size:.98rem; margin-bottom:3px; }
.mq-itens span { color:#6B7686; font-size:.88rem; line-height:1.55; display:block; max-width:62ch; }
.mq-itens .mq-val {
  text-align:right; white-space:nowrap; font-weight:800; color:#00695f; font-size:1.02rem;
}
.mq-itens .mq-val em { display:block; font-style:normal; font-weight:600; font-size:.74rem; color:#6B7686; margin-top:2px; }
@media (max-width:640px){
  .mq-itens thead { display:none; }
  .mq-itens td { display:block; border:none; padding:6px 0; }
  .mq-itens tr { display:block; padding:16px 0; border-bottom:1px solid #eef2f6; }
  .mq-itens .mq-val { text-align:left; }
}

/* ---------- os degraus da secretária ----------
   O único item com preço de volume, e o único em que o número da tabela
   muda conforme o consultório cresce. Escondê-lo para "simplificar" faria
   a conta do médico de dois consultórios não bater com a página. */
.mq-degraus { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
/* `.mq-itens .mq-degrau`, e não só `.mq-degrau`: o degrau é um <span> dentro
   da tabela, e a regra `.mq-itens span { color:#6B7686 }` tem especificidade
   maior que uma classe sozinha. Sem o prefixo o verde não valia — e o cinza
   herdado dava 4,16:1 sobre o #E6F7F5 da pastilha. */
.mq-itens .mq-degrau {
  font-size:.78rem; font-weight:600; color:#00695f;
  background:#E6F7F5; border-radius:8px; padding:5px 10px;
  display:inline-block;      /* o `span { display:block }` da tabela empilharia */
}

/* ---------- as perguntas ---------- */
.mq-duvidas { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; margin-top:26px; }
.mq-duvida { background:#f7f9fb; border-radius:14px; padding:22px 20px; }
.mq-duvida h3 { font-size:1rem; margin:0 0 8px; }
.mq-duvida p  { margin:0; color:#5a6779; font-size:.92rem; line-height:1.6; }

/* ---------- o fecho ----------
   A mesma faixa verde do convite da capa (.mh-cta), numa coluna só. Não
   reusei a .mh-cta porque ela é uma grade de duas colunas feita para a
   foto; sem a foto, o texto ficaria espremido em 55% da largura e sobraria
   um vão verde do lado. O recuo é o mesmo — 26px, até a linha de 1068. */
.mq-pr-fecho {
  background:linear-gradient(140deg,#00695f,#00A99D 130%); color:#fff;
  padding:60px max(26px, (100% - 1068px) / 2);
}
.mq-pr-fecho h2 { font-size:clamp(1.5rem, 3vw, 2.05rem); letter-spacing:-.02em; margin:0; max-width:22ch; }
.mq-pr-fecho p  { margin:14px 0 24px; max-width:54ch; color:#D9F3F0; line-height:1.6; }
/* Vazado sobre o verde: a borda cinza-claro do padrão some neste fundo —
   mesma correção do mh-fim no blog. */
.mq-pr-fecho .mh-botao-vazado { border-color:rgba(255,255,255,.55); color:#fff; }
.mq-pr-fecho .mh-botao-vazado:hover { border-color:#fff; background:rgba(255,255,255,.1); color:#fff; }

/* ---------- o que está em todos ---------- */
.mq-todos { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px 26px; margin-top:22px; }
.mq-todos li { display:flex; gap:10px; align-items:flex-start; font-size:.94rem; color:#5a6779; line-height:1.55; }
.mq-todos li::before { content:"✓"; color:#00A99D; font-weight:800; flex:none; }
.mq-todos { list-style:none; padding:0; }

/* ---------- nota sobre os tons de texto ----------
   O apoio desta página é #5a6779, e não o #6B7686 que o resto do marque usa
   em fundo branco. Motivo medido, não estético: sobre o verde-claro do
   cartão destacado (#E6F7F5) o #6B7686 dá 4,16:1, e sobre o cinza dos
   outros dois, 4,36:1 — os dois abaixo dos 4,5:1 que texto pequeno pede.
   O #5a6779 (o mesmo do blog) dá 5,20 e 5,45. Em fundo branco o #6B7686
   passa (4,60) e por isso continua onde está: a tabela item a item e os
   subtítulos das seções.

   O olho verde-claro da capa era #9EE5DC: 4,19:1 contra o pixel real do
   degradê atrás dele. #BFEDE7 dá 4,70 e continua distinto do parágrafo. */