/* ============================================================
   Calculadora de serviços

   Autossuficiente: é montada em páginas com CSS diferente (a capa do marque
   e a landing do Domínio Médico). Herdar botão e caixa de uma delas faria a
   calculadora mudar de cara conforme o vizinho.

   `--calc-cor` é trocada pelo JS conforme o produto da aba — verde no
   marque, azul no Domínio Médico.
   ============================================================ */

/* ---------- a casca do outro produto ----------
   A página /calculadora é servida nos dois: marque.med.br e Domínio Médico.
   Ela carrega os dois cabeçalhos e os dois rodapés, e quem escolhe é o host
   — a classe `e-marque` entra no <html> antes do primeiro quadro.

   Por que CSS, se o script no pé da página já tira a casca inativa do DOM:
   o script roda depois do HTML estar lido, e o cabeçalho é a primeira coisa
   que o navegador desenha. Sem estas duas linhas, quem abre a calculadora
   no Domínio Médico vê o cabeçalho do marque por um quadro. */
html.e-marque [data-casca="dm"],
html:not(.e-marque) [data-casca="marque"] { display:none !important; }

/* ============================================================
   NO DOMÍNIO MÉDICO, NADA DE VERDE
   ============================================================
   Esta página é desenhada com o marque-home.css — foi lá que ela nasceu —, e
   aquela folha pinta de #00A99D tudo que é de destaque: o fundo do botão, o
   <em> do título, a borda e a luz do botão vazado, o anel do foco. No
   marque isso é a marca; no Domínio Médico é a marca do concorrente de
   dentro de casa, e aparecia bem no meio da frase "Vamos conversar sobre
   *o seu consultório*", que ficava verde.

   O escopo é o HOST, e não o `data-casca`: o cabeçalho e o rodapé têm o
   atributo, mas o MIOLO da página é um só — o título, os botões e o anel do
   foco não estão dentro de casca nenhuma. Quem sabe de que produto é a
   página é a classe `e-marque` no <html>, posta antes do primeiro quadro.

   De quebra o texto fica legível: branco sobre o verde do marque dá 2,93:1,
   e sobre este azul passa de 12:1 — por isso aqui o hover pode usar o mesmo
   azul do resto, enquanto no marque ele precisa descer três paradas de tom
   para alcançar 5,6:1. */
html:not(.e-marque) { --dm-azul: #012C8D; }

html:not(.e-marque) .mh-botao { background: var(--dm-azul); }
html:not(.e-marque) .mh-silencio h2 em { color: var(--dm-azul); }

/* A luz que acompanha o ponteiro dentro do botão vazado também é verde na
   folha do marque: é uma variável, e trocar a variável troca o efeito
   inteiro sem reescrever o gradiente. */
html:not(.e-marque) .mh-botao-vazado,
html:not(.e-marque) .mh-botao-fino { --luz: rgba(1,44,141,.14); }
html:not(.e-marque) .mh-botao-vazado:hover,
html:not(.e-marque) .mh-botao-fino:hover {
  border-color: var(--dm-azul); color: var(--dm-azul);
  box-shadow: 0 8px 18px -8px rgba(1,44,141,.45);
}

/* Quem navega por Tab vê o anel — e ele era verde também. */
html:not(.e-marque) .mh-botao:focus-visible,
html:not(.e-marque) .mh-botao-claro:focus-visible,
html:not(.e-marque) .mh-botao-vazado:focus-visible,
html:not(.e-marque) .mh-botao-fino:focus-visible { outline-color: var(--dm-azul); }

html:not(.e-marque) .mh-nav a:hover,
html:not(.e-marque) .mh-rodape-cols a:hover,
html:not(.e-marque) .mh-rodape-pe a { color: var(--dm-azul); }
html:not(.e-marque) .mh-menu-btn[aria-expanded="true"] { border-color: var(--dm-azul); color: var(--dm-azul); }

.calc {
  --calc-cor: #00A99D;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#15233B;
}

/* As abas que trocavam de produto saíram: cada endereço tem a sua
   calculadora, e quem escolhe qual é o host. Ver o comentário do
   assets/js/calculadora.js. */

/* ---------- quantos médicos ---------- */
/* Fica ANTES da lista: o número muda o preço de metade dos itens, e
   descobrir isso depois de montar o pacote é remontar tudo. */
.calc-medicos {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:20px; padding:14px 18px;
  background:color-mix(in srgb, var(--calc-cor) 6%, #fff);
  border:1px solid color-mix(in srgb, var(--calc-cor) 20%, #fff);
  border-radius:14px; font-size:.94rem; font-weight:600;
}
.calc-stepper { display:flex; align-items:center; gap:4px; }
.calc-stepper button {
  width:36px; height:36px; border-radius:10px; cursor:pointer;
  border:1.5px solid color-mix(in srgb, var(--calc-cor) 35%, #fff);
  background:#fff; color:var(--calc-cor); font:inherit; font-size:1.2rem; font-weight:700;
  line-height:1; transition:.14s;
}
.calc-stepper button:hover { background:var(--calc-cor); color:#fff; border-color:var(--calc-cor); }
.calc-stepper b { min-width:44px; text-align:center; font-size:1.15rem; }

/* ---------- corpo ---------- */
.calc-corpo { display:grid; grid-template-columns:1fr 320px; gap:26px; align-items:start; }
@media (max-width: 900px){ .calc-corpo { grid-template-columns:1fr; } }

.calc-resumo { color:#6B7686; margin:0 0 16px; font-size:.95rem; }

/* ---------- os itens ---------- */
.calc-lista { display:grid; gap:10px; }
.calc-item {
  display:flex; align-items:flex-start; gap:13px; width:100%; text-align:left;
  background:#fff; border:1.5px solid #eef1f6; border-radius:14px;
  padding:15px 16px; cursor:pointer; font:inherit; color:inherit; transition:.16s;
}
.calc-item:hover { border-color:color-mix(in srgb, var(--calc-cor) 45%, #fff); }
.calc-item.on { border-color:var(--calc-cor); background:color-mix(in srgb, var(--calc-cor) 5%, #fff); }

/* O item base não é clicável — e o cursor precisa dizer isso antes do
   clique que não acontece. */
.calc-item.base { cursor:default; }
.calc-item.base:hover { border-color:var(--calc-cor); }

.calc-marca {
  flex:none; width:22px; height:22px; border-radius:7px; margin-top:2px;
  border:1.5px solid #dfe4ec; background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:800; color:#fff;
}
.calc-item.on .calc-marca { background:var(--calc-cor); border-color:var(--calc-cor); }

.calc-item-txt { flex:1; min-width:0; }
.calc-item-txt b { display:block; font-size:.96rem; margin-bottom:3px; }
.calc-item-txt span { display:block; font-size:.84rem; color:#5a6779; line-height:1.5; }

.calc-selo {
  font-style:normal; font-size:.66rem; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:var(--calc-cor);
  background:color-mix(in srgb, var(--calc-cor) 12%, #fff);
  border-radius:20px; padding:2px 8px; margin-left:6px; vertical-align:middle;
}

.calc-preco { flex:none; font-weight:800; font-size:.98rem; white-space:nowrap; }
.calc-preco small { font-weight:600; font-size:.74rem; color:#6B7686; }
.calc-preco i { font-style:normal; font-weight:600; font-size:.82rem; color:#9AA4B2; }
/* a conta por extenso embaixo do valor: "R$ 89 × 3 médicos" */
.calc-preco em {
  display:block; font-style:normal; font-weight:600;
  font-size:.7rem; color:#9AA4B2; margin-top:2px;
}
.calc-total-itens i { font-style:normal; color:#9AA4B2; font-size:.76rem; }

/* ---------- a soma ---------- */
/* Gruda ao rolar: a conta é o motivo de a pessoa estar nesta página, e ela
   sai da tela justo quando há mais itens para escolher. */
.calc-total { position:sticky; top:88px; }
@media (max-width: 900px){ .calc-total { position:static; } }

.calc-total-cx {
  background:#fff; border:1px solid #eef1f6; border-radius:16px; padding:20px;
  box-shadow:0 18px 40px rgba(15,41,66,.08);
}
.calc-total-topo {
  display:flex; justify-content:space-between; align-items:baseline;
  padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid #eef1f6;
  font-size:.86rem; color:#6B7686;
}
.calc-total-topo b { color:#15233B; }

.calc-total-itens { list-style:none; margin:0 0 14px; padding:0; display:grid; gap:7px; }
.calc-total-itens li { display:flex; justify-content:space-between; gap:12px; font-size:.84rem; }
.calc-total-itens span { color:#5a6779; }
.calc-total-itens b { flex:none; }

.calc-total-linha {
  display:flex; justify-content:space-between; align-items:baseline;
  padding-top:13px; border-top:1px solid #eef1f6;
}
.calc-total-linha span { font-size:.86rem; color:#6B7686; }
.calc-total-linha b { font-size:1.5rem; letter-spacing:-.02em; color:var(--calc-cor); }

.calc-aviso {
  margin-top:12px; background:#FCF3E0; color:#7a5200;
  border-radius:10px; padding:10px 12px; font-size:.8rem; line-height:1.5;
}

.calc-cta {
  display:block; margin-top:16px; text-align:center; text-decoration:none;
  background:var(--calc-cor); color:#fff; font-weight:700; font-size:.96rem;
  border-radius:11px; padding:14px 20px; transition:.16s;
}
.calc-cta:hover { filter:brightness(.93); }
.calc-nota { display:block; text-align:center; margin-top:9px; font-size:.74rem; color:#9AA4B2; }

/* o aviso do degrau: quem tem um médico só não vê o desconto acontecer, e
   precisa saber que ele existe antes de comparar com outro fornecedor */
.calc-degrau {
  display:block; margin-top:5px; font-size:.78rem; font-weight:600;
  color:var(--calc-cor);
}

/* ---------- o desconto da apresentação ---------- */
/* Duplo clique no total abre a caixa. Sem affordance nenhuma de propósito:
   quem está do outro lado da mesa vê preço cheio, e o desconto aparece
   quando quem apresenta decide. */
.calc-total-valor { user-select:none; -webkit-user-select:none; }
.calc-total-valor s {
  display:block; font-size:.8rem; font-weight:600;
  color:#9AA4B2; text-decoration-thickness:1.5px; margin-bottom:1px;
}
.calc-total-abate {
  display:flex; justify-content:space-between; gap:12px;
  font-size:.84rem; font-weight:700; color:var(--calc-cor);
  padding-top:9px; border-top:1px dashed color-mix(in srgb, var(--calc-cor) 35%, #fff);
}

.calc-cx-fundo {
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(15,41,66,.5); backdrop-filter:blur(2px);
}
.calc-cx-fundo[hidden] { display:none; }

.calc-cx {
  width:100%; max-width:340px; background:#fff; color:#15233B;
  border-radius:16px; padding:22px;
  box-shadow:0 24px 60px rgba(15,41,66,.28);
}
.calc-cx > b { font-size:1.05rem; }
.calc-cx > p { margin:5px 0 15px; font-size:.82rem; color:#6B7686; line-height:1.5; }

.calc-cx-in {
  width:100%; box-sizing:border-box; font:inherit; font-size:1.35rem; font-weight:700;
  text-align:center; letter-spacing:-.01em; color:#15233B;
  border:1.5px solid #dfe4ec; border-radius:11px; padding:12px 14px;
}
.calc-cx-in:focus { outline:none; border-color:var(--calc-cor); }

.calc-cx-atalhos { display:flex; gap:7px; margin-top:10px; }
.calc-cx-atalhos button {
  flex:1; font:inherit; font-size:.85rem; font-weight:700; cursor:pointer;
  color:#5a6779; background:#f2f5f8; border:none; border-radius:9px; padding:9px 0;
  transition:.14s;
}
.calc-cx-atalhos button:hover { background:var(--calc-cor); color:#fff; }

.calc-cx-previa {
  min-height:20px; margin-top:12px; text-align:center;
  font-size:.86rem; color:#5a6779;
}
.calc-cx-previa b { color:var(--calc-cor); }
.calc-cx-previa i { font-style:normal; font-size:.78rem; color:#9AA4B2; }
.calc-cx-previa.ruim { color:#B42318; }

.calc-cx-btns { display:flex; gap:8px; margin-top:16px; }
.calc-cx-btns button {
  font:inherit; font-size:.85rem; font-weight:700; cursor:pointer;
  border-radius:10px; padding:11px 12px; border:1.5px solid #dfe4ec;
  background:#fff; color:#6B7686; transition:.14s;
}
.calc-cx-btns button:hover { border-color:#c3ccda; }
.calc-cx-btns [data-cx="limpar"] { flex:none; }
.calc-cx-btns [data-cx="fechar"] { flex:1; }
.calc-cx-ok {
  flex:1; background:var(--calc-cor) !important; border-color:var(--calc-cor) !important;
  color:#fff !important;
}
.calc-cx-ok:hover { filter:brightness(.93); }

@media (max-width: 420px){
  .calc-cx-btns { flex-wrap:wrap; }
  .calc-cx-btns [data-cx="limpar"] { flex:1 0 100%; order:3; }
}

/* ---------- de qual domínio é este orçamento ---------- */
/* Fica acima do "quantos médicos" porque é a primeira coisa que se decide
   numa reunião: de quem é a proposta. Só aparece no Domínio Médico. */
.calc-dominio {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin-bottom:10px; padding:14px 18px;
  background:#fff; border:1px solid #eef1f6; border-radius:14px;
  font-size:.94rem; font-weight:600;
}

/* o campo com busca: 47 domínios não se acham rolando uma lista */
.calc-busca { position:relative; min-width:280px; }
@media (max-width: 520px){ .calc-busca { min-width:0; width:100%; } }

.calc-busca input {
  width:100%; box-sizing:border-box;
  font:inherit; font-size:.9rem; font-weight:600; color:#15233B;
  border:1.5px solid #dfe4ec; border-radius:10px; padding:10px 34px 10px 12px;
  background:#fff;
}
.calc-busca input::placeholder { font-weight:500; color:#9AA4B2; }
.calc-busca input:focus { outline:none; border-color:var(--calc-cor); }

.calc-busca-x {
  position:absolute; top:50%; right:8px; transform:translateY(-50%);
  width:22px; height:22px; border:none; border-radius:50%; cursor:pointer;
  background:#eef1f6; color:#6B7686; font:inherit; font-size:1rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.calc-busca-x:hover { background:#dfe4ec; }

.calc-busca-lista {
  position:absolute; z-index:60; top:calc(100% + 6px); left:0; right:0;
  max-height:290px; overflow-y:auto; margin:0; padding:6px; list-style:none;
  background:#fff; border:1px solid #eef1f6; border-radius:12px;
  box-shadow:0 18px 40px rgba(15,41,66,.16);
}
.calc-busca-lista[hidden] { display:none; }

.calc-busca-lista [data-dom] {
  padding:8px 10px; border-radius:8px; cursor:pointer; line-height:1.3;
}
.calc-busca-lista [data-dom] b { display:block; font-size:.86rem; font-weight:700; }
.calc-busca-lista [data-dom] span { display:block; font-size:.74rem; color:#6B7686; }
.calc-busca-lista [data-dom]:hover,
.calc-busca-lista [data-dom].sob { background:color-mix(in srgb, var(--calc-cor) 9%, #fff); }
.calc-busca-lista [data-dom].escolhido b { color:var(--calc-cor); }

.calc-busca-cidade {
  padding:9px 10px 4px; font-size:.68rem; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; color:#9AA4B2;
}
.calc-busca-nada { padding:12px 10px; font-size:.84rem; color:#6B7686; }

/* o domínio escolhido carimbado no resumo, para a proposta impressa ou
   fotografada não virar "aquele R$ 1.200 de alguém" */
.calc-total-site {
  margin:-4px 0 12px; padding:9px 11px; border-radius:10px;
  background:color-mix(in srgb, var(--calc-cor) 7%, #fff);
  line-height:1.35;
}
.calc-total-site b { display:block; font-size:.86rem; color:var(--calc-cor); }
.calc-total-site span { font-size:.76rem; color:#6B7686; }

/* o valor por médico: metade dos serviços multiplica pela equipe e a outra
   metade não, então a divisão do total é a única conta que responde
   "quanto isso me custa por médico" */
.calc-total-cabeca {
  margin-top:6px; text-align:right;
  font-size:.82rem; font-weight:700; color:#6B7686;
}

/* ---------- gerar proposta (só a equipe vê) ---------- */
.calc-proposta {
  display:block; width:100%; margin-top:9px; cursor:pointer;
  font:inherit; font-size:.85rem; font-weight:700;
  color:var(--calc-cor); background:color-mix(in srgb, var(--calc-cor) 9%, #fff);
  border:1.5px dashed color-mix(in srgb, var(--calc-cor) 40%, #fff);
  border-radius:11px; padding:11px 14px; transition:.16s;
}
.calc-proposta:hover { background:color-mix(in srgb, var(--calc-cor) 16%, #fff); }

.calc-cx-larga { max-width: 440px; }
.calc-prop-campos { display:grid; gap:12px; text-align:left; }
.calc-prop-campos label { display:block; font-size:.8rem; font-weight:700; color:#5a6779; }
.calc-prop-campos label i { font-style:normal; font-weight:500; color:#9AA4B2; }
.calc-prop-campos input,
.calc-prop-campos select,
.calc-prop-campos textarea {
  width:100%; box-sizing:border-box; margin-top:5px;
  font:inherit; font-size:.88rem; font-weight:600; color:#15233B;
  border:1.5px solid #dfe4ec; border-radius:10px; padding:10px 12px; background:#fff;
}
.calc-prop-campos textarea { font-weight:500; resize:vertical; }
.calc-prop-campos input:focus,
.calc-prop-campos select:focus,
.calc-prop-campos textarea:focus { outline:none; border-color:var(--calc-cor); }

/* o endereço mostra o prefixo fixo: o que se digita é só o apelido */
.calc-prop-url {
  display:flex; align-items:center; margin-top:5px;
  border:1.5px solid #dfe4ec; border-radius:10px; background:#fff; overflow:hidden;
}
.calc-prop-url:focus-within { border-color:var(--calc-cor); }
.calc-prop-url i {
  font-style:normal; font-size:.76rem; font-weight:600; color:#9AA4B2;
  padding:0 0 0 11px; white-space:nowrap;
}
.calc-prop-url input { border:none !important; padding-left:2px !important; margin-top:0 !important; }

.calc-prop-link {
  display:block; word-break:break-all; font-weight:700; font-size:.84rem;
  color:var(--calc-cor); text-decoration:none;
}
.calc-prop-copiar {
  margin-top:8px; font:inherit; font-size:.78rem; font-weight:700; cursor:pointer;
  color:#5a6779; background:#f2f5f8; border:none; border-radius:8px; padding:6px 12px;
}
.calc-cx-previa .ruim { color:#B42318; }

/* Com que conta a proposta vai ser gravada. Fica logo abaixo da prévia, em
   letra miúda: é informação de conferência, não de leitura. */
.calc-prop-quem {
  margin-top:8px; font-size:.78rem; color:#6B7686; line-height:1.4;
}
.calc-prop-quem.ruim { color:#B42318; font-weight:600; }