/* ==========================================================================
   Preços: componentes próprios da página.
   Usa os tokens e as classes de site.css; aqui só o que é desta página.
   ========================================================================== */

/* ---------- o que é uma consulta ---------- */
.pr-exemplos li{font-size:17px;color:#3a3d45}

/* ---------- tabela dos planos ---------- */
.pr-planos{padding-top:0}
.pr-tabela{margin-top:48px}
.pr-tabela table{min-width:720px}
.pr-tabela thead th{vertical-align:bottom}
.pr-tabela thead th:first-child{width:24%}
.pr-tabela__nome{display:block;font:700 16px/1.2 var(--display);letter-spacing:-.01em}
.pr-tabela__minimo > *{font-weight:600}
.pr-tabela__minimo td{font:700 17px/1.3 var(--display);color:var(--grafite)}
.pr-tabela td{font-variant-numeric:tabular-nums}
.pr-tabela:focus-visible{outline:3px solid var(--laranja);outline-offset:3px}

/* selo "mais em conta": aparece no plano marcado pelo simulador */
.pr-rec{display:none}
.is-rec .pr-rec{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font:500 11.5px/1.2 var(--mono);letter-spacing:.02em;white-space:nowrap}
.is-rec .pr-rec::before{content:"";width:7px;height:7px;background:currentColor;transform:rotate(45deg);border-radius:1.5px}
.pr-tabela thead .is-rec .pr-rec{color:var(--grafite)}

/* selo de destaque e descrição curta do plano, editados no CMS (classes próprias:
   .pr-rec e .is-rec são ligadas e desligadas pelo precos.js).
   O texto do selo é grafite sobre a tinta laranja (15:1); o laranja de texto
   sobre a tinta fica em 4,4:1, abaixo do AA para texto pequeno. O laranja fica
   no losango, que é só decoração. */
.pr-selo{display:inline-flex;align-items:center;gap:7px;max-width:100%;margin-top:6px;padding:4px 10px;border-radius:999px;background:var(--laranja-tinta);color:var(--grafite);font:600 12px/1.3 var(--mono);letter-spacing:.02em;text-align:left;white-space:normal;overflow-wrap:break-word}
.pr-selo::before{content:"";flex:none;width:7px;height:7px;background:var(--laranja);transform:rotate(45deg);border-radius:1.5px}
.pr-desc{display:block;margin:6px 0 0;font:400 15px/1.45 var(--texto);letter-spacing:0;color:var(--cinza-texto);white-space:normal;overflow-wrap:break-word}
/* no cabeçalho grafite da tabela: selo alinhado à direita da coluna. A descrição
   curta do plano não entra no cabeçalho (só no card do simulador), para o leitor
   de tela não repeti-la em cada célula da coluna */
.pr-tabela thead .pr-selo{display:flex;width:-moz-fit-content;width:fit-content;margin-left:auto;white-space:nowrap}

.pr-notas{margin-top:28px;max-width:46em}
.pr-notas li{font-size:16px;color:#3a3d45}
.pr-planos__cta{margin:34px 0 0}
.pr-vazio{margin-top:40px;max-width:40em}
.pr-vazio .btn{margin-top:6px}

/* ---------- simulador ---------- */
.pr-sim{background:var(--off)}
.pr-sim__painel{display:grid;gap:18px;margin-top:48px}
.pr-sim__controle{background:var(--papel);border-radius:20px;padding:28px 30px 26px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:end}
.pr-sim__rotulo{grid-column:1/-1;font:500 13px var(--mono);color:var(--cinza-texto);letter-spacing:.04em}
.pr-sim__valor{grid-column:1;display:block;margin-top:6px;font:500 clamp(30px,4vw,48px)/1.05 var(--mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--grafite)}
.pr-sim__atalhos{grid-column:2;grid-row:2;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.pr-sim__range{grid-column:1/-1}
.pr-sim__escala{grid-column:1/-1}
.pr-sim__atalho{font:500 14px/1 var(--mono);color:var(--grafite);background:var(--papel);border:1px solid var(--linha);border-radius:999px;padding:10px 14px;cursor:pointer;transition:background-color .15s ease, border-color .15s ease, color .15s ease}
.pr-sim__atalho:hover{border-color:var(--grafite)}
.pr-sim__atalho[aria-pressed="true"]{background:var(--grafite);border-color:var(--grafite);color:var(--off)}

/* trilho do range com a parte percorrida em laranja (--p vem do precos.js) */
.pr-sim__range{--p:2%;-webkit-appearance:none;appearance:none;display:block;width:100%;height:32px;margin:22px 0 4px;background:transparent;cursor:pointer}
.pr-sim__range:focus{outline:none}
.pr-sim__range::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(to right,var(--laranja) 0,var(--laranja) var(--p),var(--linha) var(--p),var(--linha) 100%)}
.pr-sim__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-8px;background:var(--grafite);border:4px solid var(--papel);border-radius:6px;transform:rotate(45deg);box-shadow:0 2px 10px rgba(23,25,31,.3)}
.pr-sim__range::-moz-range-track{height:8px;border-radius:4px;background:var(--linha)}
.pr-sim__range::-moz-range-progress{height:8px;border-radius:4px;background:var(--laranja)}
.pr-sim__range::-moz-range-thumb{width:18px;height:18px;background:var(--grafite);border:4px solid var(--papel);border-radius:5px;transform:rotate(45deg);box-shadow:0 2px 10px rgba(23,25,31,.3)}
.pr-sim__range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(232,105,46,.55)}
.pr-sim__range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(232,105,46,.55)}
.pr-sim__escala{display:flex;justify-content:space-between;font:400 12px var(--mono);color:var(--cinza-texto);font-variant-numeric:tabular-nums}

/* um cartão por plano */
.pr-sim__planos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:14px}
.pr-sim__plano{position:relative;display:flex;flex-direction:column;gap:14px;background:var(--papel);border:1px solid var(--linha);border-radius:18px;padding:22px 20px 18px;transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease}
.pr-sim__plano.is-rec{border-color:var(--laranja);box-shadow:0 0 0 1px var(--laranja), 0 24px 40px -28px rgba(184,78,26,.55);transform:translateY(-3px)}
.pr-sim__nome{margin:0;display:flex;flex-direction:column;align-items:flex-start;font:600 13px/1.3 var(--mono);color:var(--cinza-texto);letter-spacing:.02em}
.pr-sim__plano .pr-rec{color:var(--laranja-texto);white-space:normal;align-items:flex-start}
.pr-sim__plano .pr-rec::before{flex:none;margin-top:3px}
.pr-sim__plano .pr-desc{margin-top:-6px}
.pr-sim__pagar{margin:0;display:grid;gap:4px}
.pr-sim__pagar span{font-size:13.5px;color:var(--cinza-texto)}
.pr-sim__pagar b{font:700 clamp(24px,2.2vw,30px)/1 var(--display);letter-spacing:-.025em;color:var(--grafite);font-variant-numeric:tabular-nums;white-space:nowrap}
.pr-sim__det{margin:auto 0 0;display:grid;gap:0;border-top:1px solid var(--linha)}
.pr-sim__det > div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 0 0}
.pr-sim__det dt{font-size:13px;line-height:1.35;color:var(--cinza-texto)}
.pr-sim__det dd{margin:0;font:500 13px/1.35 var(--mono);color:var(--grafite);font-variant-numeric:tabular-nums;white-space:nowrap}
.pr-sim__nota{margin:22px 0 0;max-width:46em}
.pr-sim__mais{margin:14px 0 0;font-size:16px;color:#3a3d45}

/* ---------- teste grátis ---------- */
.duo__c .pr-aviso{font-size:15px;line-height:1.5;color:var(--grafite);border-left:3px solid var(--laranja);padding-left:12px}

/* ---------- recursos extras ---------- */
.pr-extras{background:var(--off)}

/* ---------- responsivo ---------- */
@media (max-width:860px){
  .pr-sim__controle{grid-template-columns:minmax(0,1fr);padding:22px 20px 20px}
  .pr-sim__atalhos{grid-column:1;grid-row:auto;justify-content:flex-start;margin-top:16px}
  .pr-sim__range{grid-row:3}
  .pr-sim__escala{grid-row:4}
}
@media (max-width:560px){
  .pr-sim__planos{grid-template-columns:minmax(0,1fr)}
  .pr-sim__plano{padding:18px 18px 16px}
  .pr-sim__plano.is-rec{transform:none}
}