/* 09/11/2026 (rodada 94): a página /comparativo (comparison.php). Entra no <head> antes do modern-home.css: toda regra começa por .ca-compare.
   As cores são os tokens do site (--ca-*), que o modo escuro troca sozinho (html[data-theme=dark]). Até 61.99em, os cartões; dali para cima, a
   tabela. Nada rola para o lado a 320 px. */
.ca-compare [hidden] { display: none !important; }
.ca-compare .ca-compare__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ca-compare .ca-compare__hero { padding-bottom: 1.25rem; }
.ca-compare .ca-compare__hero .ca-lead { max-width: 52rem; }
.ca-compare .ca-compare__updated { display: flex; align-items: flex-start; gap: .5rem; max-width: 52rem; margin: 1rem 0 0; color: var(--ca-muted); font-size: .92rem; line-height: 1.5; }
.ca-compare .ca-compare__updated i { margin-top: .15rem; color: var(--ca-blue); }
.ca-compare .ca-compare__body { padding-top: .5rem; }

/* O "Comparar com": as fichas quebram de linha, nunca rolam para o lado. */
.ca-compare .ca-compare__picker { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1.25rem; }
.ca-compare .ca-compare__picker-label { flex: 0 0 100%; color: var(--ca-muted); font-size: .85rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.ca-compare .ca-compare__chip { min-height: 44px; padding: .5rem .95rem; border: 1px solid var(--ca-line-strong); border-radius: 999px; background: var(--ca-surface); color: var(--ca-ink); font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.ca-compare .ca-compare__chip:hover { border-color: var(--ca-blue); }
.ca-compare .ca-compare__chip:focus-visible { outline: 3px solid var(--ca-blue); outline-offset: 2px; }
.ca-compare .ca-compare__chip.is-active { border-color: var(--ca-blue); background: var(--ca-tint); color: var(--ca-link-strong); }

/* A tabela (computador). */
.ca-compare .ca-compare__table-wrap { display: none; }
.ca-compare .ca-compare__table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; border: 1px solid var(--ca-line); border-radius: var(--ca-radius); background: var(--ca-surface); font-size: .9rem; line-height: 1.45; }
.ca-compare .ca-compare__table th, .ca-compare .ca-compare__table td { padding: .85rem .8rem; border-bottom: 1px solid var(--ca-line); color: var(--ca-ink); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.ca-compare .ca-compare__table tbody tr:last-child th, .ca-compare .ca-compare__table tbody tr:last-child td { border-bottom: 0; }
.ca-compare .ca-compare__table thead th { background: var(--ca-soft); font-weight: 400; }
.ca-compare .ca-compare__table thead th:first-child { border-top-left-radius: var(--ca-radius); }
.ca-compare .ca-compare__table thead th:last-child { border-top-right-radius: var(--ca-radius); }
.ca-compare .ca-compare__table tbody th { color: var(--ca-muted); font-weight: 700; }
.ca-compare .ca-compare__table thead th:first-child { width: 10.5rem; }
.ca-compare .ca-compare__corner { color: var(--ca-muted); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.ca-compare .ca-compare__table .is-own { background: var(--ca-tint); }
.ca-compare .ca-compare__name { display: block; color: var(--ca-ink); font-size: 1rem; font-weight: 800; }
.ca-compare .ca-compare__source { display: inline-flex; align-items: center; gap: .3rem; margin-top: .25rem; color: var(--ca-link); font-size: .82rem; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.ca-compare .ca-compare__date { display: block; margin-top: .2rem; color: var(--ca-muted); font-size: .78rem; }
.ca-compare .ca-compare__unknown { color: var(--ca-muted); font-style: italic; }

/* Os cartões (celular): uma linha da tabela por cartão, o Carteira Azul destacado em azul claro. */
.ca-compare .ca-compare__cards { display: grid; gap: 1rem; }
.ca-compare .ca-compare__card { padding: 1.1rem 1.1rem .4rem; border: 1px solid var(--ca-line); border-radius: var(--ca-radius); background: var(--ca-surface); box-shadow: 0 6px 16px rgba(32, 64, 116, .06); }
.ca-compare .ca-compare__card h3 { margin: 0 0 .6rem; color: var(--ca-ink); font-size: 1.02rem; font-weight: 800; line-height: 1.35; }
.ca-compare .ca-compare__card dl { margin: 0; }
.ca-compare .ca-compare__item { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: .75rem; padding: .65rem 0; border-top: 1px solid var(--ca-line); }
.ca-compare .ca-compare__item:first-child { border-top: 0; }
.ca-compare .ca-compare__item.is-own { margin: 0 -.6rem; padding-left: .6rem; padding-right: .6rem; border-radius: .7rem; background: var(--ca-tint); }
.ca-compare .ca-compare__item dt { color: var(--ca-ink); font-weight: 800; font-size: .9rem; overflow-wrap: anywhere; }
.ca-compare .ca-compare__item dd { margin: 0; color: var(--ca-ink); font-size: .92rem; line-height: 1.45; overflow-wrap: anywhere; }
.ca-compare .ca-compare__card--sources ul { margin: 0 0 .7rem; padding: 0; list-style: none; }
.ca-compare .ca-compare__card--sources li { padding: .45rem 0; border-top: 1px solid var(--ca-line); font-size: .9rem; }
.ca-compare .ca-compare__card--sources li:first-child { border-top: 0; }
.ca-compare .ca-compare__card--sources a { color: var(--ca-link); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.ca-compare .ca-compare__card--sources span { display: block; color: var(--ca-muted); font-size: .82rem; }

/* As notas e os artigos do blog. */
.ca-compare .ca-compare__notes, .ca-compare .ca-compare__posts { max-width: 52rem; margin-top: 2rem; }
.ca-compare .ca-compare__notes-title { margin: 0 0 .7rem; color: var(--ca-ink); font-size: 1.15rem; font-weight: 800; }
.ca-compare .ca-compare__notes ul, .ca-compare .ca-compare__posts ul { margin: 0; padding-left: 1.2rem; color: var(--ca-muted); font-size: .95rem; line-height: 1.6; }
.ca-compare .ca-compare__notes a, .ca-compare .ca-compare__posts a { color: var(--ca-link); font-weight: 700; }
.ca-compare .ca-compare__posts ul { padding-left: 0; list-style: none; }
.ca-compare .ca-compare__posts li { padding: .35rem 0; }
.ca-compare .ca-compare__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

@media (min-width: 62em) {
    .ca-compare .ca-compare__table-wrap { display: block; }
    .ca-compare .ca-compare__cards { display: none; }
    .ca-compare .ca-compare__picker-label { flex: 0 0 auto; margin-right: .25rem; }
    /* Com um aplicativo escolhido, a tabela fica com 3 colunas e o texto respira. */
    .ca-compare.is-pair .ca-compare__table thead th:first-child { width: 24%; }
    .ca-compare.is-pair .ca-compare__table { font-size: .98rem; }
}
@media (max-width: 22em) {
    .ca-compare .ca-compare__item { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ca-compare .ca-compare__chip { transition: none; }
}