/* Home 05 — Diferenciais: tabela comparativa (templates/home/diferenciais.php). */
.comparativo { max-width: 56rem; margin-inline: auto; overflow-x: auto; border-radius: var(--raio-grande); border: 1px solid var(--cor-borda); background: #fff; box-shadow: var(--sombra); }
.comparativo table { width: 100%; border-collapse: collapse; font-size: 0.9875rem; }
.comparativo th, .comparativo td { padding: 1rem 1.25rem; text-align: left; border-bottom: 1px solid var(--cor-borda); }
.comparativo tbody tr:last-child > * { border-bottom: 0; }
.comparativo thead th { font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-ardosia); background: #F8FAFC; }
.comparativo thead .comparativo__vec { color: #fff; background: var(--cor-azul); }
.comparativo tbody th { font-weight: 600; color: var(--cor-marinho); }
.comparativo td .icone { display: inline-block; width: 1.1rem; height: 1.1rem; vertical-align: -0.2em; margin-right: 0.35rem; }
.comparativo__comum { color: var(--cor-ardosia); }
.comparativo__comum .icone { color: #DC2626; }
td.comparativo__vec { background: #EFF6FF; font-weight: 600; color: var(--cor-marinho); }
td.comparativo__vec .icone { color: var(--cor-conversao); }

/* No celular, cada critério vira um cartão com as duas respostas empilhadas (nada fica escondido). */
@media (max-width: 40rem) {
    .comparativo thead { display: none; }
    .comparativo tr, .comparativo th, .comparativo td { display: block; }
    .comparativo tbody tr { border-bottom: 1px solid var(--cor-borda); }
    .comparativo tbody th { padding-bottom: 0.25rem; border: 0; }
    .comparativo td { padding-block: 0.6rem; border: 0; }
    .comparativo td::before { content: attr(data-rotulo); display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-ardosia); }
    td.comparativo__vec { margin: 0 0.75rem 0.9rem; border-radius: var(--raio); }
}