/* fora-do-estudio.css: o estúdio que vai até o cliente, numa seção preta, na variação que o dono escolheu em
   17/10/2026. À esquerda a foto do jogo com o selo vermelho de "ao vivo", e por cima do pé escuro o rótulo, o título e
   os tipos de evento em pílulas; à direita a mala: uma etiqueta de bagagem mostarda, com o furo no alto, a lista do que
   vai junto em linhas picotadas com a caixinha marcada, e o botão que pede a proposta.
   No telefone a foto vem em cima e a etiqueta embaixo.
   Depende de: base.css e secoes-do-estudio.css (o botão preto). Telefone nas regras soltas, computador no @media do fim. */

.fora__dentro { display: grid; gap: 16px; }

/* ------------------------------------------------------------ a foto */

.fora__foto { position: relative; display: grid; align-content: end; min-height: 440px; overflow: hidden; border-radius: 16px; isolation: isolate; }
.fora__foto img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.fora__foto::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .9));
}

.fora__ao-vivo {
  position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px;
  border-radius: 6px; background: #e0262e; color: var(--branco);
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.fora__ao-vivo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--branco); }

.fora__texto { display: grid; gap: 12px; padding: 22px; }

.fora__tipos { display: flex; flex-wrap: wrap; gap: 6px; }
.fora__tipos li { padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 12px; font-weight: 700; }

/* ------------------------------------------------------------ a mala */

.mala {
  position: relative; display: grid; align-content: start; gap: 14px; padding: 48px 22px 24px;
  border-radius: 16px; background: var(--mostarda); color: var(--preto);
}
/* o furo da etiqueta de bagagem */
.mala::before { content: ""; position: absolute; top: 18px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--preto); }

.mala__titulo { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }

.mala__lista { border-top: 2px dashed rgba(17, 17, 17, .35); }
.mala__lista li {
  display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 2px dashed rgba(17, 17, 17, .35);
  font-size: 14px; font-weight: 700;
}
.mala__lista li::before {
  content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; flex: none;
  border: 2px solid var(--preto); border-radius: 5px; font-size: 13px; font-weight: 800; line-height: 1;
}

.mala .botao-preto { justify-self: start; margin-top: 4px; }

@media (min-width: 900px) {
  .fora__dentro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; }
  .fora__foto { min-height: 480px; border-radius: 18px; }
  .fora__ao-vivo { top: 20px; left: 20px; font-size: 12px; padding: 6px 12px; }
  .fora__texto { gap: 14px; padding: 30px; }
  .fora__tipos li { padding: 6px 12px; font-size: 13px; }
  .mala { gap: 16px; padding: 56px 30px 30px; border-radius: 18px; }
  .mala::before { top: 20px; width: 22px; height: 22px; margin-left: -11px; }
  .mala__titulo { font-size: 26px; }
  .mala__lista li { padding: 11px 0; font-size: 15px; }
}