/* O site de vendas (095): os planos em cartões, o "Sob consulta" (169), o que vem em todos e a tabela que os
   compara. Os nomes das cores e das letras estão em
   estilo.css. */

.planos .miolo > .apoio-do-trecho {
  margin-bottom: 0.5rem;
}

/* ---------- Os cartões: um por plano, com o preço em letra de placa. ---------- */

.lista-de-planos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.plano {
  display: grid;
  grid-template-rows: auto auto auto auto auto 1fr;
  align-content: start;
  padding: 1.75rem 1.5rem 1.5rem;
  border: 1.5px solid var(--tinta);
  border-radius: 1.5rem;
  background: var(--rua);
  box-shadow: 0 14px 30px rgb(27 27 24 / 12%);
}

.plano h3 {
  font-size: 2.25rem;
}

.para-quem {
  min-height: 3em;
  margin-top: 0.375rem;
  color: var(--tinta-fraca);
}

.preco {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.375rem;
  align-items: baseline;
  margin-top: 1rem;
  color: var(--tinta-fraca);
  font-weight: 500;
}

.preco strong {
  color: var(--tinta);
  font: 700 3.5rem/1 var(--placa);
  font-variant-numeric: tabular-nums;
}

.plano .principal {
  margin-top: 1.25rem;
}

.limites {
  margin: 1.25rem 0 0;
  padding: 0;
  border-bottom: 1.5px solid var(--tinta);
  list-style: none;
}

.limites li {
  padding: 0.625rem 0;
  border-top: 1.5px solid var(--tinta);
}

/* "Sob consulta" (169) e o aviso sem os planos: a faixa inteira embaixo dos cartões, sem preço. */
.plano.sob-consulta,
.plano.sem-planos {
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto;
  gap: 0.5rem 1.5rem;
  align-items: center;
  box-shadow: none;
}

.plano.sob-consulta h3,
.plano.sem-planos h3 {
  font-size: 1.75rem;
}

.plano.sob-consulta .para-quem,
.plano.sem-planos .para-quem {
  min-height: 0;
  margin: 0;
}

.plano.sem-planos {
  grid-template-columns: auto minmax(0, 1fr);
}

/* ---------- O que vem em todos, uma vez só. ---------- */

.em-todos {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.em-todos .vistos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 52rem;
  margin-top: 1rem;
  font-weight: 500;
}

.garantia-dos-planos {
  max-width: 62ch;
  margin-top: 1.5rem;
  color: var(--tinta-fraca);
}

/* Na página dos planos os cartões vêm logo depois do título. */
.cabeca-da-pagina + .planos {
  padding-top: 0;
}


/* ---------- A tabela: os planos, linha por linha. ---------- */

.comparacao {
  background: var(--rua);
}

.rola-de-lado {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  overflow-x: auto;
}

.tabela-dos-planos {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.tabela-dos-planos th,
.tabela-dos-planos td {
  padding: 0.875rem 0.75rem;
  border-bottom: 1.5px solid var(--tinta);
  text-align: left;
  vertical-align: baseline;
}

.tabela-dos-planos thead th {
  border-bottom-width: 3px;
  font: 700 1.5rem/1.05 var(--placa);
  text-transform: uppercase;
}

.tabela-dos-planos tbody th {
  font-weight: 500;
}

.tabela-dos-planos td {
  font-weight: 700;
}

.tabela-dos-planos th:first-child {
  padding-left: 0;
}

/* ---------- Os créditos da IA (108): a mesma tabela, sobre a terra, e o que vale para todos, em linhas. ---------- */

.creditos .tabela-dos-planos {
  min-width: 32rem;
}

.notas-dos-creditos {
  max-width: 52rem;
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
  padding: 0;
  border-top: 1.5px solid var(--tinta);
  list-style: none;
  font-size: 1.125rem;
}

.notas-dos-creditos li {
  padding: 0.75rem 0;
  border-bottom: 1.5px solid var(--tinta);
  color: var(--tinta-fraca);
}

.notas-dos-creditos strong {
  color: var(--tinta);
}