/*
  Páginas de conteúdo do OrçaDent.

  Uma coluna, texto grande, muito respiro. Quem chega aqui veio de uma busca
  com uma pergunta na cabeça — a página tem que responder rápido e sem
  disputar atenção consigo mesma. Herda a paleta e as fontes do style.css.
*/

/* A MEDIDA DE LEITURA.

   O comentário no topo deste arquivo promete "texto grande, muito respiro", e
   o arquivo entregava o contrário: --text-base (14px) numa coluna de 760px dá
   112 caracteres por linha. O olho perde a linha de volta bem antes disso — a
   faixa confortável vai até uns 75. Corpo em --text-md (16px) e coluna de
   600px dão 77. É a mudança que mais muda a cara destas páginas, que são
   justamente onde quem vem da busca cai primeiro. */
.artigo{padding:56px 0 90px;max-width:min(600px,calc(100% - 44px))}
/* O gerador não é texto corrido: é uma ferramenta de duas colunas, e 600px
   espremeria as duas. Só ele sai da medida de leitura. */
.artigo-ferramenta{max-width:min(880px,calc(100% - 44px))}
.migalhas{font:var(--text-xs) "DM Sans",sans-serif;color:var(--text-muted);margin-bottom:26px}
.migalhas a{color:var(--teal);text-decoration:none}
.migalhas a:hover{text-decoration:underline}
.migalhas span{margin:0 6px;color:var(--text-muted)}

.artigo h1{
  font:600 var(--display-lg)/1.12 Fraunces,serif;
  letter-spacing:-.03em;
  color:var(--ink);
  margin:0 0 18px;
}
.artigo-resumo{
  font:var(--text-lg)/1.62 "DM Sans",sans-serif;
  color:#4c6962;
  margin:0 0 12px;
  padding-bottom:34px;
  border-bottom:1px solid var(--border);
}
.artigo h2{
  font:600 var(--display-sm)/1.2 Fraunces,serif;
  letter-spacing:-.03em;
  color:var(--ink);
  margin:46px 0 14px;
}
.artigo h3{font:600 var(--text-lg)/1.3 "DM Sans",sans-serif;color:var(--ink);margin:0}
.artigo p{font:var(--text-md)/1.75 "DM Sans",sans-serif;color:var(--muted);margin:0 0 17px}
.artigo p b,.artigo li b{color:var(--ink);font-weight:600}
.artigo i{font-style:italic}

.artigo-lista{counter-reset:passo;list-style:none;padding:0;margin:0 0 15px;display:grid;gap:13px}
.artigo-lista li{
  counter-increment:passo;
  position:relative;
  padding-left:40px;
  font:var(--text-md)/1.7 "DM Sans",sans-serif;
  color:var(--muted);
}
.artigo-lista li::before{
  content:counter(passo);
  position:absolute;
  left:0;
  top:1px;
  width:26px;
  height:26px;
  border-radius:50%;
  background:#f2e2d2;
  color:#a2603a;
  display:grid;
  place-items:center;
  font:600 var(--text-xs) "DM Sans",sans-serif;
}

/* Fala transcrita: o que o paciente diz e o que a dentista responde. Sem isso os diálogos do artigo virariam parágrafos comuns. */
.artigo-fala{
  margin:0 0 15px;
  padding:13px 17px;
  border-left:3px solid var(--teal);
  background:var(--neutral-100);
  border-radius:0 5px 5px 0;
  font:italic var(--text-md)/1.7 "DM Sans",sans-serif;
  color:#3d5b55;
}
.artigo-fala b{font-style:normal;font-weight:700;color:#28524b}
.artigo-fala.paciente{border-left-color:var(--clay-700);background:var(--neutral-100)}
.artigo-marcas{list-style:none;padding:0;margin:0 0 15px;display:grid;gap:11px}
.artigo-marcas li{
  position:relative;
  padding-left:28px;
  font:var(--text-md)/1.7 "DM Sans",sans-serif;
  color:var(--muted);
}
.artigo-marcas li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--teal);
  font-weight:700;
}

/* --- chamada para ação, no fim de cada página --- */
.artigo-cta{
  margin:52px 0 0;
  background:var(--forest);
  border-radius:var(--radius-sm);
  padding:30px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  flex-wrap:wrap;
}
.artigo-cta h2{font:600 24px/1.2 Fraunces,serif;color:#fff;margin:0 0 8px;letter-spacing:-.03em}
.artigo-cta p{font:var(--text-base)/1.65 "DM Sans",sans-serif;color:#a9c4bb;margin:0;max-width:44ch}
.artigo-cta .button{flex:none;background:var(--lime);color:#26331d}
/* A flecha do botão vem verde do `.button span` da home, onde o fundo é
   claro. Aqui o fundo é lima e o verde cai para 3,97:1 — ela segue a cor
   do próprio rótulo. */
.artigo-cta .button span{color:inherit}

/* --- modelo de orçamento --- */
.modelo{display:grid;gap:9px;margin:22px 0 15px}
.modelo-bloco{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:15px 18px;
}
.modelo-bloco span{
  display:block;
  font:700 var(--text-2xs) "DM Sans",sans-serif;
  letter-spacing:1.4px;
  color:#a2603a;
  margin-bottom:7px;
}
.modelo-bloco p{margin:0;font:var(--text-sm)/1.7 "DM Sans",sans-serif;color:#4c6962}
.modelo-bloco i{color:var(--text-muted)}
.modelo-bloco small{display:block;margin-top:7px;font-size:var(--text-xs);color:var(--text-muted)}
.modelo-bloco.destaque{background:var(--forest);border-color:var(--forest)}
.modelo-bloco.destaque span{color:#9dbdb4}
/* O <b> herdava .artigo p b{color:var(--ink)}, que é escuro, e o valor
   desaparecia no fundo verde. Precisa vencer aquela regra. */
.modelo-bloco.destaque p{color:#fff;font:600 26px Fraunces,serif}
.modelo-bloco.destaque p b{color:#fff;font-weight:600}

/* --- tabela comparativa --- */
.tabela-comparativa{
  margin:24px 0 15px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.tc-head,.tc-linha{
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr;
  gap:14px;
  padding:13px 18px;
  align-items:center;
}
.tc-head{background:var(--forest);color:#fff}
.tc-head b{font:600 var(--text-xs) "DM Sans",sans-serif}
.tc-head b.bom{color:var(--lime)}
.tc-linha{border-top:1px solid var(--neutral-200);background:var(--paper)}
.tc-linha span{font:600 var(--text-xs) "DM Sans",sans-serif;color:var(--ink)}
.tc-linha i{font-style:normal;font:var(--text-xs)/1.5 "DM Sans",sans-serif;color:var(--text-muted)}
.tc-linha i.bom{color:var(--text-muted);font-weight:600}

/* --- dois lados --- */
.dois-lados{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:22px 0 15px}
.dois-lados>div{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:19px 21px;
}
.dois-lados>div.bom{background:#eef5ef;border-color:#cfe2d3}
.dois-lados span{
  display:block;
  font:700 var(--text-2xs) "DM Sans",sans-serif;
  letter-spacing:1.4px;
  color:var(--text-muted);
  margin-bottom:11px;
}
.dois-lados.bom span,.dois-lados>div.bom span{color:var(--text-muted)}
.dois-lados ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dois-lados li{font:var(--text-xs)/1.55 "DM Sans",sans-serif;color:var(--muted)}

/* --- caixa de preço --- */
.preco-caixa{
  display:flex;
  gap:26px;
  align-items:center;
  flex-wrap:wrap;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:24px 26px;
  margin:22px 0 15px;
}
.preco-caixa>div{flex:none}
.preco-caixa span{
  display:block;
  font:700 var(--text-2xs) "DM Sans",sans-serif;
  letter-spacing:1.4px;
  color:#a2603a;
}
.preco-caixa b{
  display:block;
  font:600 var(--display-lg) Fraunces,serif;
  color:var(--ink);
  letter-spacing:-1.4px;
  margin:3px 0;
}
.preco-caixa small{font:var(--text-xs) "DM Sans",sans-serif;color:var(--text-muted)}
.preco-caixa p{flex:1;min-width:250px;margin:0}

@media(max-width:760px){
  .artigo{padding:36px 0 64px}
  .artigo h1{letter-spacing:-1px}

  .artigo-resumo{font-size:var(--text-base)}
  .tc-head,.tc-linha{grid-template-columns:1fr;gap:5px}
  .tc-head span{display:none}
  .tc-linha span{margin-bottom:3px}
  .dois-lados{grid-template-columns:1fr}
  .artigo-cta{padding:24px 22px}
  .artigo-cta .button{width:100%;justify-content:center}
}

/* ---------------------------------------------------------------- GERADOR
   A ferramenta gratuita. Formulário à esquerda, resultado à direita,
   atualizando a cada tecla: quem chega por busca precisa ver que funciona
   antes de decidir preencher tudo. */
.gerador{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:24px;
  margin:26px 0 20px;
  align-items:start;
}
.ger-form{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:24px 26px;
}
.ger-form h2{margin:0 0 6px;font-size:var(--text-xl)}
.ger-dica{font:var(--text-xs)/1.6 "DM Sans",sans-serif;color:var(--text-muted);margin:0 0 18px}
.ger-form .fields.two{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:11px}
.ger-form label,.ger-full{
  display:grid;
  gap:6px;
  font:600 var(--text-xs) "DM Sans",sans-serif;
  color:#4e6962;
}
.ger-full{margin:11px 0}
.ger-form input{
  width:100%;
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  background:var(--surface-card);
  padding:10px 11px;
  color:#254d47;
  font:var(--text-sm) "DM Sans",sans-serif;
  outline-color:#56a094;
}
.ger-sub{
  font:700 var(--text-2xs) "DM Sans",sans-serif;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--text-muted);
  margin:20px 0 10px;
}
.ger-item{
  display:grid;
  grid-template-columns:1fr 118px 30px;
  gap:8px;
  margin-bottom:8px;
  align-items:center;
}
.ger-item button{
  border:1px solid #e6d5cb;
  background:transparent;
  color:var(--clay-700);
  border-radius:var(--radius-xs);
  height:32px;
  cursor:pointer;
  font-size:var(--text-base);
  line-height:1;
}
.ger-add{
  width:100%;
  border:1px dashed #cfd6cb;
  background:transparent;
  color:var(--teal);
  border-radius:var(--radius-xs);
  padding:10px;
  font:600 var(--text-xs) "DM Sans",sans-serif;
  cursor:pointer;
  margin-top:2px;
}
.ger-add:hover{border-color:var(--teal)}
.ger-acoes{display:flex;margin-top:20px}
.ger-limpar{
  border:1px solid var(--border);
  background:transparent;
  color:var(--text-muted);
  border-radius:var(--radius-xs);
  padding:11px 16px;
  font:600 var(--text-xs) "DM Sans",sans-serif;
  cursor:pointer;
}

.ger-saida{position:sticky;top:22px}
.ger-papel{
  background:var(--surface-card);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  overflow:hidden;
  box-shadow:0 16px 40px rgba(37,66,60,.09);
  min-height:200px;
}
.ger-vazio{
  padding:44px 26px;
  text-align:center;
  font:var(--text-xs)/1.7 "DM Sans",sans-serif;
  color:var(--text-muted);
  font-style:italic;
  margin:0;
}
.gp-topo{padding:17px 22px;border-bottom:1px solid var(--neutral-200)}
.gp-topo b{display:block;font:600 var(--text-base) Fraunces,serif;color:var(--ink)}
.gp-topo small{font:var(--text-xs) "DM Sans",sans-serif;color:var(--text-muted)}
.gp-quem{padding:16px 22px;border-bottom:1px solid var(--neutral-200)}
.gp-quem span{
  display:block;
  font:700 var(--text-2xs) "DM Sans",sans-serif;
  letter-spacing:1.4px;
  color:#a2603a;
}
.gp-quem b{font:600 var(--text-lg) Fraunces,serif;color:var(--ink)}
.gp-itens{padding:8px 22px}
.gp-itens>div{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:10px 0;
  border-bottom:1px solid var(--neutral-200);
}
.gp-itens>div:last-child{border-bottom:0}
.gp-itens span{font:var(--text-sm)/1.4 "DM Sans",sans-serif;color:#4c6962}
.gp-itens b{flex:none;font:600 var(--text-sm) "DM Sans",sans-serif;color:var(--ink)}
.gp-incluso{padding:12px 22px;background:var(--neutral-100)}
.gp-incluso span{
  display:block;
  font:700 var(--text-2xs) "DM Sans",sans-serif;
  letter-spacing:1.4px;
  color:var(--text-muted);
}
.gp-incluso p{margin:3px 0 0;font:var(--text-xs)/1.55 "DM Sans",sans-serif;color:#5c716b}
.gp-total{background:var(--forest);color:#fff;padding:18px 22px}
.gp-total span{
  display:block;
  font:700 var(--text-2xs) "DM Sans",sans-serif;
  letter-spacing:1.4px;
  color:#9dbdb4;
}
.gp-total b{font:600 29px Fraunces,serif;letter-spacing:-1px}
.gp-pag{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:16px 22px}
.gp-pag>div{border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 13px}
.gp-pag span{
  display:block;
  font:700 var(--text-2xs) "DM Sans",sans-serif;
  letter-spacing:1.2px;
  color:#a2603a;
}
.gp-pag b{display:block;font:600 var(--text-md) Fraunces,serif;color:var(--teal);margin:3px 0 1px}
.gp-pag small{font:var(--text-xs) "DM Sans",sans-serif;color:var(--text-muted)}
.ger-nota{margin:14px 2px 0;font:var(--text-xs)/1.65 "DM Sans",sans-serif;color:var(--text-muted)}

@media(max-width:860px){
  .gerador{grid-template-columns:1fr}
  .ger-saida{position:static}
  .ger-form .fields.two{grid-template-columns:1fr}
  .ger-item{grid-template-columns:1fr 100px 30px}
  .ger-limpar{width:100%}
}
/* 16px no celular: abaixo disso o iOS dá zoom ao focar e não volta */
@media(max-width:820px){
  .ger-form input{font-size:var(--text-md)}
}

/* --- leia também: liga as páginas entre si --- */
.leia-tambem{margin-top:52px;padding-top:30px;border-top:1px solid var(--border)}
.leia-tambem h2{margin:0 0 16px;font-size:var(--text-lg)}
.lt-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lt-grid a{
  display:block;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:14px 16px;
  text-decoration:none;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.lt-grid a:hover{border-color:#9dbdb4;box-shadow:0 3px 12px rgba(37,66,60,.07)}
.lt-grid b{
  display:block;
  font:600 var(--text-sm) "DM Sans",sans-serif;
  color:var(--ink);
  margin-bottom:3px;
}
.lt-grid small{font:var(--text-xs)/1.5 "DM Sans",sans-serif;color:var(--text-muted)}
@media(max-width:760px){
  .lt-grid{grid-template-columns:1fr}
}

/* O gerador é a porta de entrada mais forte: fica marcado no menu. */
.nav nav a.nav-destaque{color:var(--teal);font-weight:600}
.nav-destaque::after{content:"grátis";display:none}

/* ------------------------------------- O CARTÃO VERDE NO FIM DO ARTIGO
   Dois defeitos que estavam no ar nas páginas de Termos, Privacidade e nos
   artigos:

   1. `.artigo p b` pinta o negrito com a cor da tinta — e dentro deste
      cartão a tinta é a MESMA cor do fundo. O "Veja também:" estava
      invisível: verde-escuro sobre verde-escuro, 1,06:1. A convergência de
      cores da Fase 1 igualou os dois tons e transformou o quase-invisível em
      exatamente invisível; o defeito já existia.

   2. O link para a Política de Privacidade não tinha cor nenhuma, então saía
      no AZUL padrão do navegador — #0000ee sobre verde-escuro, 1,3:1. Era o
      único azul do site inteiro.
------------------------------------------------------------------------- */
.artigo-cta b,.artigo-cta p b,.artigo-cta strong{color:var(--lime-300)}

/* Link no corpo do artigo: sublinhado, porque num texto corrido a cor sozinha
   não distingue link de palavra em destaque — e quem não enxerga cor não vê
   diferença nenhuma. */
.artigo p a,.artigo li a{
  color:var(--green-700);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.artigo p a:hover,.artigo li a:hover{color:var(--green-900)}

/* `.artigo p a` (mais específico) vinha depois e ganhava aqui dentro, pintando
   o link de verde sobre o verde do cartão. Esta regra sobe ao mesmo nível. */
/* `:not(.button)` porque esta regra também pegava o BOTÃO do cartão e
   pintava o rótulo de lima — a mesma lima do fundo dele. O texto "Criar
   minha primeira proposta" ficava invisível nas cinco páginas de conteúdo. */
.artigo .artigo-cta a:not(.button),.artigo-cta p a:not(.button){
  color:var(--lime-300);
  text-decoration:underline;
  text-underline-offset:3px;
}
.artigo .artigo-cta a:not(.button):hover,.artigo-cta p a:not(.button):hover{color:var(--neutral-50)}


/* ------------------------------------------- AS PERGUNTAS NO FIM DO ARTIGO
   Duas coisas estavam erradas aqui, e as duas vinham de `style` no HTML:

   · `padding:0 0 20px` deixava a primeira pergunta encostada na borda de
     baixo do cartão verde — zero pixel entre um bloco escuro e o próximo.
   · o <section> também é `.container`, então dentro da coluna do artigo ele
     descontava a margem DE NOVO e as perguntas ficavam 24px mais estreitas
     que o texto acima delas.

   E faltava dizer o que aquela pilha de linhas era. */
.artigo-faq{width:100%;padding:56px 0 20px}
.artigo-faq>h2{
  font:600 var(--display-sm)/1.2 Fraunces,serif;
  letter-spacing:-.03em;
  color:var(--ink);
  margin:0 0 18px;
}
.artigo-faq .faq-list{max-width:none}