/* pacotes.css: os preços, no molde do "Três formas de começar" da OFBOX: três cartões com a etiqueta do espaço, o
   nome, o "a partir de" em letra grande, o que vem incluído com o visto mostarda e o botão que abre o WhatsApp com a
   mensagem daquele pacote. O do meio leva a borda preta e o selo "mais pedido" (a escada da Let's Media). Embaixo, a
   faixa preta do extra que já sai com o post pronto (edição, cortes em pé e fotos), a ideia do Pode Estúdio.
   No telefone os três deslizam de lado (.desliza, faixa.css); no computador ficam lado a lado.
   Depende de: base.css, secoes-do-estudio.css e faixa.css. Telefone nas regras soltas, computador no @media do fim. */

/* o vão de cima é pra o selo "mais pedido", que sai pra fora do cartão, não ser cortado pela fileira que desliza */
.pacotes__lista { padding-top: 12px; }

.pacote {
  position: relative; display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 24px 22px;
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--branco);
}

.pacote--mais-pedido { border-color: var(--preto); box-shadow: inset 0 0 0 1px var(--preto); }

.pacote__selo {
  position: absolute; top: -11px; right: 18px; padding: 3px 10px; border-radius: 999px;
  background: var(--mostarda); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}

.pacote__etiqueta {
  align-self: flex-start; padding: 3px 9px; border: 1px solid var(--preto); border-radius: 4px;
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}

.pacote__nome { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }

.pacote__preco { font-size: 14px; color: var(--texto-suave); }
.pacote__preco strong { display: block; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--texto); }

.pacote__botao { width: 100%; min-height: 44px; margin-top: auto; }

/* ------------------------------------------------------------ o extra */

.extra {
  display: grid; gap: 12px; margin-top: 20px; padding: 20px 22px;
  border-radius: var(--raio); background: var(--preto); color: var(--branco);
}

.extra__nome { font-size: 17px; font-weight: 800; }

.extra__texto { font-size: 14px; color: var(--texto-no-preto); }

.extra__preco { font-size: 22px; font-weight: 800; color: var(--mostarda); }

.extra .botao-mostarda { justify-self: start; min-height: 42px; }

/* a frase miúda embaixo dos preços: o que conta como hora e a regra de remarcar (a ideia da Airflow) */
.pacotes__regra { margin-top: 16px; font-size: 13px; color: var(--texto-suave); }

@media (min-width: 900px) {
  .pacotes__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .pacote { padding: 30px 28px; gap: 16px; }
  .pacote__nome { font-size: 22px; }
  .pacote__preco strong { font-size: 36px; }
  .extra { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 28px; margin-top: 24px; padding: 24px 28px; }
  .extra__preco { font-size: 26px; white-space: nowrap; }
  .pacotes__regra { text-align: center; }
}