/* KASPA BRASIL — /por-que-cripto (cripto.css) · 2026-10-08
   Referências (Mobbin): Goldsand (calculadora: número grande + controle + gráfico), Ramp (valor que muda com o
   controle), Base (tabela com colunas por ativo e a coluna em destaque), Ploy (contraste em 2 colunas). */
.pc article{max-width:1120px}
.pc-hero{max-width:860px;margin-bottom:12px}
.pc-hero h1{font-size:clamp(32px,4.6vw,52px);font-weight:800;letter-spacing:-.03em;margin:0 0 14px;line-height:1.05}
.pc-hero .sub{font-size:17.5px;color:var(--txt2);max-width:62ch}
.pc-hero .sub strong{color:var(--txt)}
.pc-stats{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pc-stats li{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:grid;gap:4px}
.pc-stats b{font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;color:var(--acc);font-variant-numeric:tabular-nums}
.pc-stats span{font-size:13px;color:var(--mut);line-height:1.4}
.pc-sec{margin-top:72px;scroll-margin-top:80px}
.pc-sec>.sec-sub{margin-bottom:24px}
.pc-note{font-size:12.5px;color:var(--mut2);margin:10px 0 0;max-width:90ch}
.pc .prose{margin-top:22px}
.bad{color:var(--down)}

/* ferramenta: controle + número grande | gráfico + linhas de resultado */
.pc-tool{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:18px;align-items:stretch;background:linear-gradient(160deg,#0f2427,var(--panel2) 60%);border:1px solid var(--acc-b);border-radius:20px;padding:20px}
.pc-in{display:flex;flex-direction:column;gap:12px;min-width:0}
.pc-in h3{margin:0;font-size:19px}
.pc-in .cin input{width:100%;background:none;border:0;color:var(--txt);font:600 18px/1 var(--sans);padding:12px 0;outline:none}
.pc-chips{display:flex;flex-wrap:wrap;gap:6px}
.pc-chips button{font:600 12.5px/1 var(--sans);color:var(--txt2);background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:7px 11px;cursor:pointer}
.pc-chips button:hover{border-color:var(--acc-b);color:var(--txt)}
.pc-chips button[aria-pressed=true]{background:var(--acc);border-color:var(--acc);color:#06110f}
.pc-lbl{font-size:13.5px;color:var(--mut);font-weight:600}
.pc-lbl b{color:var(--txt)}
.pc-range{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:0;cursor:pointer}
.pc-range::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--acc) var(--fill,0%),#1d3539 var(--fill,0%))}
.pc-range::-moz-range-track{height:6px;border-radius:6px;background:#1d3539}
.pc-range::-moz-range-progress{height:6px;border-radius:6px;background:var(--acc)}
.pc-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#e8fff8;border:4px solid var(--acc);margin-top:-8px;box-shadow:0 0 0 5px rgba(73,234,188,.14)}
.pc-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#e8fff8;border:4px solid var(--acc)}
.pc-range:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:8px}
.pc-big{margin-top:auto;display:grid;gap:6px;background:var(--panel2);border:1px solid var(--line2);border-radius:14px;padding:16px}
.pc-big .l{font-size:13.5px;color:var(--mut)}
.pc-big b{font-size:clamp(34px,4.4vw,52px);line-height:1;letter-spacing:-.03em;color:var(--txt);font-variant-numeric:tabular-nums}
.pc-loss{font-size:13.5px;color:var(--down)}
.pc-out{display:flex;flex-direction:column;gap:10px;min-width:0}
.pc-chart{width:100%;height:auto;display:block;background:var(--panel2);border:1px solid var(--line2);border-radius:14px}
.pc-chart .ax line{stroke:#18302f;stroke-width:1}
.pc-chart .ax text{fill:var(--mut2);font:11px var(--mono)}
.pc-chart .ln{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.pc-chart .ln.meta{stroke:#c6ddd8;stroke-dasharray:5 5;stroke-width:1.6}
.pc-chart .ln.cdi{stroke:#6aaaf5}
.pc-chart .ln.poup{stroke:var(--warn)}
.pc-chart .ln.cash{stroke:var(--down)}
.pc-chart .pt.meta{fill:#c6ddd8}.pc-chart .pt.cdi{fill:#6aaaf5}.pc-chart .pt.poup{fill:var(--warn)}.pc-chart .pt.cash{fill:var(--down)}
.pc-chart.sm{border:0;background:none}
.pc-legend{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;margin:0;padding:0;font-size:12.5px;color:var(--mut)}
.pc-legend li{display:flex;align-items:center;gap:7px}
.pc-legend i{width:16px;height:3px;border-radius:2px;display:inline-block}
.pc-legend .l-meta{background:repeating-linear-gradient(90deg,#c6ddd8 0 5px,transparent 5px 9px)}
.pc-legend .l-cdi{background:#6aaaf5}.pc-legend .l-poup{background:var(--warn)}.pc-legend .l-cash{background:var(--down)}
.pc-rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pc-row{display:grid;gap:3px;background:var(--panel2);border:1px solid var(--line2);border-left:3px solid;border-radius:10px;padding:10px 12px}
.pc-row span{font-size:12px;color:var(--mut)}
.pc-row b{font-size:18px;font-variant-numeric:tabular-nums}
.pc-row small{font-size:12px;color:var(--acc)}
.pc-row.cash{border-left-color:var(--down)}.pc-row.cash small{color:var(--down)}
.pc-row.poup{border-left-color:var(--warn)}.pc-row.cdi{border-left-color:#6aaaf5}
.pc-row.neg small{color:var(--down)}

/* fiat: texto + caixa "o lado bom do real" */
.pc-cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:start}
.pc-cols .prose{margin-top:0}
.pc-box{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:14px;padding:18px 20px}
.pc-box h3{margin:0 0 10px;font-size:16px}
.pc-box ul{margin:0;padding-left:18px;color:var(--txt2);font-size:14.5px;display:grid;gap:6px}

/* contraste em 2 colunas (Ploy) */
.pc-vs{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel)}
.pc-vs-h,.pc-vs-r{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.2fr)}
.pc-vs-h span{padding:12px 16px;font:700 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.pc-vs-h .k{color:var(--acc);background:rgba(73,234,188,.06)}
.pc-vs-r>*{padding:14px 16px;border-top:1px solid var(--line2);font-size:14.5px;line-height:1.5}
.pc-vs-r b{font-weight:700;color:var(--txt)}
.pc-vs-r span{color:var(--txt2)}
.pc-vs-r .k{background:rgba(73,234,188,.06);color:var(--txt)}
.pc-vs-r .k.bad{color:#ffb4a8}

/* oferta */
.pc-supply{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:12px}
.pc-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px}
.pc-card.k{border-color:var(--acc-b);background:linear-gradient(180deg,#0f2a28,var(--panel))}
.pc-card h3{margin:0 0 2px;font-size:18px}
.pc-k{margin:0 0 12px;font-size:12.5px;color:var(--mut)}
.pc-cap{margin:10px 0 0;font-size:14px;color:var(--txt2)}
.pc-cap b{color:var(--txt);font-size:16px}
.pc-txt{margin:10px 0 0;font-size:14px;color:var(--mut);line-height:1.55}
.pc-bar{height:14px;border-radius:8px;background:#1d3539;overflow:hidden}
.pc-bar i{display:block;height:100%;width:100%;transform:scaleX(var(--p,0));transform-origin:0 50%;background:linear-gradient(90deg,var(--acc2),var(--acc))}

/* tabela (Base) */
.pc-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.pc-table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.pc-table th,.pc-table td{padding:12px 16px;text-align:left;border-top:1px solid var(--line2);vertical-align:top}
.pc-table thead th{border-top:0;font:700 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.pc-table tbody th{font-weight:600;color:var(--mut);width:22%}
.pc-table td{color:var(--txt2);font-variant-numeric:tabular-nums}
.pc-table .k{background:rgba(73,234,188,.06);color:var(--txt)}
.pc-table thead .k{color:var(--acc)}
.pc-table td.bad{color:var(--down)}

/* bitcoin e kaspa */
.pc-roles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pc-roles p{margin:8px 0 0;color:var(--txt2);font-size:14.5px;line-height:1.55}
.pc-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0 22px}
.pc-choice{background:var(--panel2);border:1px solid var(--line2);border-radius:14px;padding:16px}
.pc-choice h3{margin:0 0 6px;font-size:15.5px}
.pc-choice p{margin:0;font-size:14px;color:var(--mut);line-height:1.5}
.pc-tombo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.pc-big.tombo{margin:0;height:100%;align-content:center}
.pc-big.tombo b{color:var(--down)}
.pc-check{margin-top:22px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:14px;padding:18px 22px}
.pc-check h3{margin:0 0 10px;font-size:16px}
.pc-check ol{margin:0;padding-left:20px;display:grid;gap:7px;color:var(--txt2);font-size:14.5px}

/* riscos */
.pc-risks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pc-risk{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--down);border-radius:14px;padding:16px 18px}
.pc-risk h3{margin:0 0 6px;font-size:15.5px}
.pc-risk p{margin:0;font-size:14px;color:var(--txt2);line-height:1.55}
.pc-sec .guides{grid-template-columns:repeat(5,minmax(0,1fr))}

@media(max-width:960px){
  .pc-stats{grid-template-columns:1fr 1fr}
  .pc-tool,.pc-tombo,.pc-cols{grid-template-columns:1fr}
  .pc-supply{grid-template-columns:1fr 1fr}
  .pc-supply .pc-card:first-child{grid-column:1/-1}
  .pc-risks,.pc-choices{grid-template-columns:1fr 1fr}
  .pc-sec .guides{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:640px){
  .pc-sec{margin-top:56px}
  .pc-tool{padding:14px;border-radius:16px}
  .pc-rows{grid-template-columns:1fr}
  .pc-supply,.pc-roles,.pc-risks,.pc-choices{grid-template-columns:1fr}
  .pc-vs-h{display:none}
  .pc-vs-r{grid-template-columns:1fr 1fr}
  .pc-vs-r b{grid-column:1/-1;padding-bottom:0;border-top:1px solid var(--line)}
  .pc-vs-r span{border-top:0;padding-top:6px}
  .pc-vs-r span:not(.k):before{content:"Real";display:block;font:700 10.5px/1.4 var(--mono);color:var(--mut2);text-transform:uppercase;letter-spacing:.08em}
  .pc-vs-r span.k:before{content:"Bitcoin e Kaspa";display:block;font:700 10.5px/1.4 var(--mono);color:var(--acc);text-transform:uppercase;letter-spacing:.08em}
  .pc-sec .guides{grid-template-columns:1fr 1fr}
}

/* links no meio do texto: sublinhados (axe link-in-text-block) */
.pc-vs-r a,.pc-risk a,.pc-check a,.pc-txt a,.pc-box a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(73,234,188,.5)}
.pc-tablewrap:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
