/* Cartões de plano, usados na landing e no painel */
.planos { display: grid; gap: 14px; align-items: stretch; }
.plano {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 24px 22px;
  border-radius: 18px; background: var(--s); border: 1px solid var(--b);
}
.plano h3 { font-size: 20px; }
.plano-pra { font-size: 13.5px; color: var(--m); line-height: 1.5; min-height: 40px; }
.preco { display: flex; align-items: baseline; gap: 4px; margin: 4px 0 2px; }
.preco small { font-size: 15px; color: var(--t2); font-weight: 600; }
.preco b { font: 700 44px/1 var(--titulo); letter-spacing: -.04em; }
.preco span { color: var(--m); font-size: 14px; }
.tudo-de { font-size: 12.5px; font-weight: 600; color: var(--t2); text-transform: uppercase; letter-spacing: .06em; }
.plano .lista-check { flex: 1; align-content: start; }
.plano > .btn { width: 100%; height: 46px; margin-top: 6px; }
.plano-destaque {
  border-color: var(--p-borda);
  background: radial-gradient(ellipse 120% 60% at 50% 0%, rgba(0, 212, 170, .12), transparent 70%), var(--s2);
  box-shadow: 0 30px 60px -30px rgba(0, 212, 170, .35);
}
.selo {
  position: absolute; top: -11px; left: 22px; height: 22px; padding: 0 10px; border-radius: 99px;
  background: var(--p); color: #04201a; font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center;
}
@media (min-width: 900px) {
  .planos { grid-template-columns: 1fr 1.08fr 1fr; }
  .plano-destaque { transform: translateY(-8px); }
}
.planos-4 { grid-template-columns: 1fr; }
.lista-check li.fora { color: var(--m2); }
.lista-check li.fora .ico { color: var(--m2); }
.gratis {
  position: absolute; top: 18px; right: 18px; height: 22px; padding: 0 9px; border-radius: 6px;
  background: var(--ambar-fundo); color: var(--ambar); font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center;
}
.faixa-teste {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; padding: 16px 18px;
  border-radius: 14px; border: 1px solid rgba(245, 165, 36, .35);
  background: linear-gradient(90deg, rgba(245, 165, 36, .10), transparent 70%), var(--s);
}
.faixa-teste p { flex: 1; min-width: 240px; font-size: 14.5px; color: var(--t2); line-height: 1.55; }
.faixa-teste p b { color: var(--t); }
.faixa-teste-selo { height: 30px; padding: 0 12px; border-radius: 99px; background: var(--ambar); color: #2a1a00; font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; white-space: nowrap; }
@media (min-width: 700px) { .planos-4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .planos.planos-4 { grid-template-columns: repeat(4, 1fr); } .planos-4 .preco b { font-size: 40px; } }
.mais-ia { font-size: 12.5px; color: var(--p); font-weight: 600; margin-top: -6px; }
.por-dia { display: inline-flex; align-self: flex-start; height: 24px; padding: 0 9px; border-radius: 6px; background: var(--p-fundo); color: var(--p); font-size: 12.5px; font-weight: 700; align-items: center; margin-top: -4px; }
.quantidades { margin: 4px 0 0; display: grid; gap: 0; flex: 1; align-content: start; }
.quantidades div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--b); font-size: 13.5px; }
.quantidades dt { display: flex; align-items: center; gap: 8px; color: var(--m); }
.quantidades dt .ico { width: 15px; height: 15px; }
.quantidades dd { margin: 0; font-weight: 650; color: var(--t); text-align: right; }
.quantidades dd.zero { font-weight: 500; font-size: 12.5px; color: var(--m2); }
.todos-recursos { margin-top: 18px; padding: 22px; border-radius: 16px; background: var(--s); border: 1px solid var(--b); }
.todos-recursos h3 { font-size: 19px; }
.todos-recursos > p { color: var(--m); font-size: 14px; margin: 6px 0 16px; }
.todos-recursos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px 24px; }
.todos-recursos li { display: flex; gap: 10px; font-size: 14px; color: var(--t2); }
.todos-recursos .ico { color: var(--p); width: 16px; height: 16px; margin-top: 2px; flex: none; }
@media (min-width: 700px) { .todos-recursos ul { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .todos-recursos ul { grid-template-columns: repeat(3, 1fr); } }