/* Casca de modal, compartilhada pela promoção e pelo aviso de atendimento.

   Interrompe a visita, então precisa valer a interrupção: caixa larga e um
   só botão. O véu é mais fechado que o do painel de produto (.52 contra
   .38) porque aqui a intenção é justamente tirar o resto da página do
   caminho.

   Só o invólucro mora aqui. O que vai dentro é de quem chama — promocao.css
   e atendimento.css. */

.modal {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(34, 31, 30, .52);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity .24s;
}
.modal[data-aberto="true"] { opacity: 1; pointer-events: auto; }

.modal-caixa {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--papel);
  border-radius: 0;
  box-shadow: var(--sombra-alta);
  transform: translateY(12px);
  transition: transform .24s;
}
.modal[data-aberto="true"] .modal-caixa { transform: none; }

.modal-fechar {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; cursor: pointer;
  background: var(--papel);
  color: var(--texto);
}
.modal-fechar svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2; fill: none; }
.modal-fechar:hover { background: var(--nuvem); }

/* Quem pede menos movimento recebe o modal sem deslize — mas recebe o
   modal: escondê-lo seria esconder conteúdo, não animação. */
@media (prefers-reduced-motion: reduce) {
  .modal, .modal-caixa { transition-duration: .01ms; }
  .modal-caixa { transform: none; }
}

/* Quem escolheu as quebras não quer o balanceamento por cima: os dois
   brigando produzem linhas que não são nem as pedidas nem as
   equilibradas. */
.modal .sem-balanco { text-wrap: initial; }

/* Tela estreita: a caixa ganha o espaço que a moldura estava gastando.

   Manter duas palavras juntas só é possível se elas couberem, e num
   celular a moldura de 24 px é enfeite caro: os 20 px que ela devolve
   entram no texto. O resto da conta está no corpo da fonte, em
   css/atendimento.css. */
@media (max-width: 430px) {
  .modal { padding: 14px; }
  .modal-caixa { max-height: calc(100dvh - 28px); }
}

/* Palavras que o autor mandou manter juntas, com "_" no painel.

   Vale em qualquer largura. Cheguei a liberar o par no celular por medo de
   não caber, e isso separava "Grande Florianópolis" sem necessidade — o
   aperto vinha da moldura larga e da fonte grande, corrigidas logo acima,
   não do par. Quem faz caber é o corpo do texto, medido em
   css/atendimento.css.

   O limite existe e é honesto: um par comprido demais para a linha
   transborda. Quem escreve vê na hora e tira o sublinhado. */
.junto { white-space: nowrap; }

/* Última rede: palavra que sozinha não cabe em largura nenhuma parte em
   vez de vazar. break-word e não anywhere — anywhere partia palavras que
   caberiam numa linha própria. */
.modal-caixa h2 { overflow-wrap: break-word; }