/* As tabelas (planos e comparativo) dos posts do blog (landing/blog/inlead.html), por cima do blog.css e com os tokens dele. Colunas de
   largura fixa que quebram o texto: cabe nos 328px úteis de um celular de 360px sem rolagem lateral (conferido no print). */
.corpo .comparativo{margin-block:1.6em 2em;border:1px solid var(--linha);border-radius:var(--raio-janela);overflow:hidden;background:var(--superficie)}
.comparativo table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:.9375rem;line-height:1.45}
.corpo .comparativo .legenda{margin:0;padding:12px 16px;font-size:.875rem;line-height:1.5;color:var(--texto-2);border-top:1px solid var(--linha)}
.comparativo th,.comparativo td{padding:12px 16px;text-align:left;vertical-align:top;overflow-wrap:break-word;hyphens:auto}
.comparativo thead th{background:var(--superficie-2);font-weight:600;color:var(--texto)}
/* a coluna do Turbo Quiz em destaque só no comparativo de 3 colunas; nas tabelas de planos (4 colunas) a 1ª coluna é curta */
.comparativo thead tr:not(:has(th:nth-child(4))) th:last-child{color:var(--acento-texto)}
.comparativo table:has(th:nth-child(4)) th:first-child{width:20%}
.comparativo tbody th{font-weight:600;color:var(--texto)}
.comparativo tbody td{color:var(--texto-2)}
.comparativo tbody tr+tr>*{border-top:1px solid var(--linha)}
.comparativo th:first-child{width:30%}
@media (max-width:30em){
  .comparativo table{font-size:.8125rem}
  .comparativo th,.comparativo td{padding:10px 8px}
  .corpo .comparativo .legenda{padding:10px 8px}
}