/* O palco das três demonstrações (agenda, catálogo, balcão): o celular sempre no mesmo lugar e do mesmo
   tamanho. Ele encosta na margem interna da caixa, à esquerda, e ocupa a altura toda dela; o resultado fica
   no resto da largura. Carregado depois das três folhas das demonstrações, para valer sobre elas. */
[data-demo="agenda"] .ag-ui,
[data-demo="catalogo"] .cat-cena,
[data-demo="balcao"] .bl-ui {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  column-gap: clamp(20px, 4cqw, 40px);
  padding: 0;
}
[data-demo="agenda"] .ag-phone,
[data-demo="catalogo"] .cat-fone-col,
[data-demo="balcao"] .bl-fone-col {
  height: 100%;
  max-height: 720px;
  aspect-ratio: 9 / 18.6;
  align-self: center;
  justify-self: start;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
}
[data-demo="agenda"] .ag-phone .fone,
[data-demo="catalogo"] .cat-fone-col .fone,
[data-demo="balcao"] .bl-fone-col .fone {
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  flex: none;
}
/* no celular: só o aparelho, no centro da caixa */
@container demo (max-width: 640px) {
  [data-demo="agenda"] .ag-ui,
  [data-demo="catalogo"] .cat-cena,
  [data-demo="balcao"] .bl-ui { grid-template-columns: minmax(0, 1fr); }
  [data-demo="agenda"] .ag-phone,
  [data-demo="catalogo"] .cat-fone-col,
  [data-demo="balcao"] .bl-fone-col { justify-self: center; }
}