/* responsivo.css — Ajustes por breakpoint (Bootstrap 5) */

@media (max-width: 991.98px) {
  .dc-banner-criancas { display: none; }
  .dc-editor-area { grid-template-columns: 1fr; }
  .dc-editor-painel { order: 2; }
  .dc-editor-palco { min-height: 50vh; }
}

@media (max-width: 767.98px) {
  .dc-logo { font-size: 1.15rem; }
  .dc-logo-icone { height: 40px; width: 40px; }
  .dc-logo-hero { width: 80%; }
  .dc-banner { padding: 1.6rem 1.1rem; }
  .dc-secao-titulo h2 { font-size: 1.2rem; }
  /* Barra de ferramentas inferior no editor (celular) */
  .dc-editor-palco { min-height: 46vh; }
  .dc-barra-inferior {
    display: flex; position: sticky; bottom: 0; z-index: 20; gap: .4rem; overflow-x: auto;
    -webkit-overflow-scrolling: touch; align-items: center;
    background: #fff; border-top: 1px solid var(--dc-borda); margin-top: .5rem;
    padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom));
    border-radius: var(--dc-raio-medio) var(--dc-raio-medio) 0 0;
  }
  .dc-barra-inferior .dc-ferramenta { flex: 0 0 auto; }
  /* Cores na barra inferior do colorir (no painel elas são um grid; aqui viram bolinhas) */
  .dc-barra-inferior .dc-cor {
    width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
    border: 2px solid #fff; box-shadow: 0 0 0 1px var(--dc-borda); padding: 0;
  }
  .dc-barra-inferior .dc-cor.ativo { box-shadow: 0 0 0 3px var(--dc-azul); }

  /* Carimbos e lousa no celular: bandejas de carimbos e paleta em UMA linha com
   * rolagem horizontal, para o palco subir e caber na primeira tela. */
  .dc-carimbos { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .25rem; }
  .dc-carimbo { flex: 0 0 auto; }
  .dc-criativo-barra .dc-paleta {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    max-width: 100%; flex: 1 1 auto; min-width: 0;
  }
  .dc-criativo-barra .dc-cor { flex: 0 0 auto; }
}

/* Brincadeiras no celular: quadro de infos compacto em 2 colunas
 * (antes: minmax(180px,1fr) virava 1 coluna em telas <390px, empurrando
 * o "Como brincar" para muito abaixo da dobra). */
@media (max-width: 575.98px) {
  .dc-brinc-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem .6rem; padding: .75rem;
  }
  .dc-brinc-info-item .bi { font-size: 1rem; }
  .dc-brinc-info-rot { font-size: .66rem; }
  .dc-brinc-info-val { font-size: .8rem; }
  .dc-brinc-acoes .dc-btn-neutro { flex: 1 1 auto; justify-content: center; }
}

/* Container padrão alinhado ao cabeçalho (mesma largura em todo o site). */
@media (min-width: 1400px) {
  .dc-container-largo { max-width: 1320px; }
}