/* ===== ordem no celular: colunas somem, cada bloco recebe sua posição ===== */
.app{display:flex;flex-direction:column}
.col-a,.col-b,.col-c,.col-d{display:contents}
.topo{order:0}
.palco{order:1}.ritmo{order:2}.pes{order:3}.monitor{order:4}.tamanho{order:5}
.col-d>*{order:6}
.col-c>*{order:7}
.col-c .cta,.col-c .aviso{order:8}

/* ===== desktop: tudo numa tela ===== */
@media (min-width:1100px){
  body{background:var(--bg)}
  .app{display:grid;max-width:1480px;padding:0 24px 40px;grid-template-columns:minmax(340px,380px) minmax(0,1fr) minmax(340px,390px);column-gap:20px;row-gap:20px;align-items:start}
  .topo{grid-column:1/-1;margin:0 -24px;padding:0 24px}
  .col-a,.col-b,.col-c{display:flex;flex-direction:column;gap:12px;min-width:0}
  .col-a{grid-column:1;grid-row:2}
  .col-b{grid-column:2;grid-row:2}
  .col-c{grid-column:3}
  .col-d{display:grid;grid-column:1/-1;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  .col-d>.cab{grid-column:1/-1;margin:4px 2px 0}
  .col-a>*,.col-b>*,.col-c>*{margin-top:0!important;margin-bottom:0!important}
  .col-c>.cab{margin:0 2px -4px!important}
  .monitor{padding:16px}
  .monitor .reels{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .pl{margin-bottom:0}
  /* folha vira janela centralizada */
  .folha{top:40px;bottom:40px;left:50%;right:auto;width:560px;margin:0;transform:translate(-50%,110%);border-radius:22px}
  .aberta .folha{transform:translate(-50%,0)}
  .alca{display:none}
}
@media (min-width:1100px) and (max-height:980px){
  .monitor .reels .reel{aspect-ratio:9/14}
}

@media (min-width:1100px){
  /* topo maior */
  .topo{height:76px}
  .topo img{height:34px}
  .aovivo{height:30px;padding:0 12px;font-size:13px}
  .direita{gap:12px}
  .direita .ic{width:46px;height:46px}
  .direita .ic svg{width:21px;height:21px}
  /* placar ocupa a largura toda */
  .palco{grid-column:1/-1;grid-row:2;margin:0!important;padding:18px 28px 22px;border-radius:26px;display:flex;flex-direction:column;align-items:center}
  .palco .hero-rot{font-size:16px;justify-content:center}
  .palco .hero-rot svg{width:19px;height:19px}
  .palco .placar{gap:8px;margin-top:14px;justify-content:center;width:100%}
  .palco .placar .gap{width:22px}
  .palco .flap{flex:0 0 auto;width:min(8.2vw,112px);max-width:none;height:108px;font-size:84px;border-radius:14px}
  .palco .flap .h span{height:108px;line-height:108px}
  .palco .flap .bt span,.palco .flap .fb span{top:-54px}
  .palco .flap .tp,.palco .flap .ft{border-radius:14px 14px 0 0}
  .palco .flap .bt,.palco .flap .fb{border-radius:0 0 14px 14px}
  /* ritmo logo abaixo do placar, na largura toda */
  .ritmo{grid-column:1/-1;grid-row:3;margin:0!important}
  .col-a,.col-b,.col-c{grid-row:4}
}