/* secoes-do-estudio.css: a casca de cada seção da página do Estúdio, no jeito dos sites de estúdio que o dono marcou
   (OFBOX, Studio CB, Airflow): o rótulo pequeno com um risco mostarda na frente, o título grande, a frase, e o fundo
   branco, cinza ou preto pra uma seção não grudar na outra. Também os miúdos que várias seções usam: a lista com o
   visto mostarda, o grifo mostarda no título, os atalhos do alto da página e o botão preto.
   Cada seção tem a sua folha (numeros, tour, ofertas, salas...) só pro miolo dela; tirar uma seção da página é
   apagar o bloco do HTML e a folha dela.
   Depende de: base.css (cores, letra e botões). Telefone nas regras soltas, computador no @media do fim. */

.secao-estudio { padding: 48px 0; scroll-margin-top: 16px; }

.secao-estudio--cinza { background: var(--bloco); }

.secao-estudio--preta { background: var(--preto); color: var(--branco); }

.secao-estudio__cabeca { display: grid; gap: 10px; margin-bottom: 24px; }

.secao-estudio__cabeca--centro { justify-items: center; text-align: center; }

/* o rótulo pequeno em caixa alta, com o risco mostarda na frente ("— POR QUE GRAVAR AQUI") */
.rotulo {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.rotulo::before { content: ""; width: 28px; height: 2px; background: var(--mostarda); }

.secao-estudio__titulo { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; }

/* a palavra grifada: no branco, um marca-texto mostarda por baixo; no preto, a própria letra mostarda */
.secao-estudio__titulo em { font-style: normal; background: linear-gradient(transparent 60%, rgba(245, 179, 1, .6) 0); }
.secao-estudio--preta .secao-estudio__titulo em { background: none; color: var(--mostarda); }

.secao-estudio__texto { max-width: 60ch; font-size: 15px; line-height: 1.6; color: var(--texto-suave); }
.secao-estudio--preta .secao-estudio__texto { color: var(--texto-no-preto); }
.secao-estudio__cabeca--centro .secao-estudio__texto { margin-inline: auto; }

/* a lista com o visto mostarda (o que vem no pacote, o que vai junto pro evento) */
.vistos { display: grid; gap: 8px; font-size: 14px; }
.vistos li { position: relative; padding-left: 26px; }
.vistos li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 16px; height: 16px; background: var(--mostarda-escuro);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.secao-estudio--preta .vistos li::before { background: var(--mostarda); }

/* o botão preto, pra quando o fundo já é mostarda ou branco e o mostarda é de outro botão */
.botao-preto {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px;
  background: var(--preto); color: var(--branco);
  font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.botao-preto:hover { background: var(--preto-claro); }
.botao-preto svg { width: 20px; height: 20px; flex: none; }

/* ------------------------------------------------------------ os atalhos do alto da página */

/* uma fileira de pílulas que leva a cada seção; no telefone ela corre de lado com o dedo */
.atalhos { padding: 14px 0; border-bottom: 1px solid var(--linha); }

.atalhos__lista {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(-1 * var(--margem)); padding-inline: var(--margem);
}
.atalhos__lista::-webkit-scrollbar { display: none; }

.atalhos__lista a {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px;
  background: var(--bloco); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.atalhos__lista a:hover { background: var(--bloco-escuro); }

@media (min-width: 900px) {
  .secao-estudio { padding: 80px 0; scroll-margin-top: 72px; }
  .secao-estudio__cabeca { gap: 14px; margin-bottom: 40px; }
  .secao-estudio__titulo { font-size: 40px; }
  .secao-estudio__texto { font-size: 17px; }
  .vistos { font-size: 15px; }
  .atalhos { padding: 18px 0; }
  .atalhos__lista { flex-wrap: wrap; justify-content: center; margin-inline: 0; padding-inline: 0; }
}