/* Talko · páginas de comparativo (7/out/2026). Complementa talko-lp.css e talko-motion.css.
   As páginas talko_vs_*.html são geradas por ~/.claude/skills/talko-propostas/comparativos/gerar.py. */

.hero__btns{display:flex;flex-wrap:wrap;gap:12px}

/* placar do topo */
.score{padding:28px;display:grid;gap:14px}
@media (min-width:1024px){.score{padding:36px}}
.score__head{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.14)}
.score__head span{font-size:16px;font-weight:600;color:var(--color-on-dark-muted)}
.score__head span:first-child{color:var(--color-accent)}
.score__row{display:grid;gap:6px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.10)}
.score__row:last-child{border-bottom:0;padding-bottom:0}
.score__vals{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:baseline}
.score__vals b{font-family:var(--font-heading);font-weight:500;font-size:34px;line-height:1.05;color:var(--color-accent);letter-spacing:-.02em}
.score__vals i{font-family:var(--font-heading);font-style:normal;font-size:26px;line-height:1.1;color:#fff;opacity:.82}
.score__rot{font-size:16px;color:#fff;font-weight:500}
.score__obs{font-size:16px;color:var(--color-on-dark-muted)}
@media (min-width:1024px){.score__vals b{font-size:42px}.score__vals i{font-size:30px}}

/* posicionamento lado a lado */
.vs{display:grid;gap:12px;align-items:stretch}
@media (min-width:900px){.vs{grid-template-columns:1fr auto 1fr;gap:20px}}
.vs__card{background:#fff;border-radius:var(--radius-card);padding:28px;box-shadow:inset 0 0 0 1px var(--color-border)}
.vs__card--talko{box-shadow:inset 0 0 0 2px var(--color-ink),var(--shadow-md)}
.vs__card h3{font-size:28px;margin-bottom:10px}
.vs__card--talko h3{color:var(--color-primary)}
.vs__x{align-self:center;justify-self:center;width:56px;height:56px;border-radius:50%;background:var(--color-ink);color:var(--color-accent);display:grid;place-items:center;font-family:var(--font-heading);font-style:italic;font-size:22px}

/* tabela recurso por recurso */
.cmp-wrap{background:#fff;border-radius:var(--radius-block);box-shadow:inset 0 0 0 1px var(--color-border),var(--shadow-md);overflow:hidden}
.cmp{width:100%;border-collapse:collapse}
.cmp th,.cmp td{padding:18px 22px;text-align:left;vertical-align:top;font-size:17px;border-bottom:1px solid var(--color-border)}
.cmp tr:last-child td{border-bottom:0}
.cmp thead th{background:var(--color-surface);font-weight:600;color:var(--color-ink);font-size:16px}
.cmp thead th.t{background:var(--color-accent)}
.cmp td.f{font-weight:600;color:var(--color-ink);width:34%}
.cmp td.t{background:rgba(215,255,49,.12)}
.cell{display:flex;gap:10px;align-items:flex-start;line-height:1.45}
.cell .tk-ic{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:16px;margin-top:-1px}
.cell--yes .tk-ic{background:rgba(31,157,85,.14);color:var(--color-success)}
.cell--mid .tk-ic{background:rgba(183,121,31,.16);color:#8A5A12}
.cell--no .tk-ic{background:rgba(214,69,69,.12);color:var(--color-error)}
.cell--na .tk-ic{background:var(--color-surface);color:var(--color-muted)}
.cell .tx{color:var(--color-text)}
.cell--na .tx{color:var(--color-muted)}
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px;font-size:16px;color:var(--color-muted)}
.legend .cell{align-items:center}
@media (max-width:767px){
  .cmp thead{display:none}
  .cmp,.cmp tbody,.cmp tr,.cmp td{display:block;width:100%}
  .cmp tr{padding:16px 18px;border-bottom:1px solid var(--color-border)}
  .cmp tr:last-child{border-bottom:0}
  .cmp td{border:0;padding:6px 0}
  .cmp td.f{width:100%;font-size:18px;padding-bottom:8px}
  .cmp td.t{background:rgba(215,255,49,.16);border-radius:12px;padding:10px 12px}
  .cmp td.c{padding:10px 12px}
  .cmp td[data-l]::before{content:attr(data-l);display:block;font-size:16px;font-weight:600;color:var(--color-ink);margin-bottom:4px}
}

/* preço lado a lado */
.price-vs{display:grid;gap:12px}
@media (min-width:900px){.price-vs{grid-template-columns:1fr 1fr;gap:20px}}
.pv{border-radius:var(--radius-card);padding:28px;background:#fff;box-shadow:inset 0 0 0 1px var(--color-border)}
.pv--talko{background:var(--color-ink);color:var(--color-on-dark-muted);box-shadow:none}
.pv__who{font-size:16px;font-weight:600;color:var(--color-muted)}
.pv--talko .pv__who{color:var(--color-accent)}
.pv__v{font-family:var(--font-heading);font-weight:500;font-size:34px;line-height:1.1;color:var(--color-ink);margin-top:6px;letter-spacing:-.02em}
.pv--talko .pv__v{color:#fff}
.pv__obs{margin-top:10px;font-size:16px}
.verdict{margin-top:20px;background:var(--color-card-tint);border-radius:var(--radius-card);padding:24px 28px;display:flex;gap:16px;align-items:flex-start}.verdict iconify-icon,.verdict .tk-ic{flex:0 0 28px;color:var(--color-primary);margin-top:2px}
.verdict p{font-size:19px;color:var(--color-ink);line-height:1.55}
.verdict b{color:var(--color-primary)}

/* escolha */
.choose{display:grid;gap:12px}
@media (min-width:900px){.choose{grid-template-columns:1fr 1fr;gap:20px}}
.choose__card{border-radius:var(--radius-card);padding:28px}
.choose__card--talko{color:#fff}
.choose__card--comp{background:#fff;box-shadow:inset 0 0 0 1px var(--color-border)}
.choose__card h3{font-size:26px;margin-bottom:6px}
.choose__card--talko h3{color:#fff}
.choose__card .checks li{color:var(--color-text)}
.choose__card--talko .checks li{color:#fff}.choose__card--comp .checks iconify-icon,.choose__card--comp .checks .tk-ic{color:var(--color-muted)}

/* outros comparativos */
.others{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.others a{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:10px 18px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--color-border);color:var(--color-ink);font-weight:500;text-decoration:none;transition:box-shadow .2s ease-out,transform .2s ease-out}
.others a:hover{box-shadow:inset 0 0 0 1px var(--color-ink);transform:translateY(-2px)}
.others a[aria-current="page"]{background:var(--color-ink);color:#fff;box-shadow:none}

/* fontes */
.sources{margin-top:24px;font-size:16px;color:var(--color-muted);max-width:80ch}
.sources a{color:var(--color-primary)}
.sources ul{margin:8px 0 0;padding-left:20px}

/* planos (mesmo bloco da página principal) */
.plan a.btn{margin-top:auto;width:100%}
.nw{white-space:nowrap}