/* Estrutura da criança: navegação compacta e superfícies tranquilas. */
.hb-shell {
  --shell-bg: #f7f6f3;
  --shell-card: #fff;
  --shell-ink: #292338;
  --shell-muted: #716b80;
  --shell-line: #e7e3e8;
  --shell-accent: #cf237a;
  background: var(--shell-bg);
}
html[data-tema="midnight"] .hb-shell,
html[data-contraste="alto"] .hb-shell {
  --shell-bg: var(--bg);
  --shell-card: var(--card);
  --shell-ink: var(--text);
  --shell-muted: var(--muted);
  --shell-line: var(--border);
  --shell-accent: var(--grad-b);
}
.hb-shell .hb-top { align-items: center; gap: 16px; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--shell-line); }
.hb-shell .hb-saudacao h1 { color: var(--shell-ink); font-size: clamp(20px, 2.1vw, 26px); font-weight: 800; }
.hb-shell .hb-saudacao p { display: none; }
.hb-shell .hb-chips { gap: 8px; }
.hb-shell .hb-chip { min-height: 36px; padding: 7px 11px; gap: 6px; border: 1px solid var(--shell-line); border-radius: 12px; background: var(--shell-card); }
.hb-shell .hb-chip > div { display: flex; align-items: baseline; gap: 4px; }
.hb-shell .hb-chip b { font: 800 12px/1.2 'Nunito', sans-serif; color: var(--shell-ink); }
.hb-shell .hb-chip small { font-size: 10px; color: var(--shell-muted); }
.hb-shell .hb-chip .hb-ico { width: 16px; height: 16px; }
.hb-shell .hb-round { width: 36px; height: 36px; border: 1px solid transparent; background: transparent; border-radius: 11px; }
.hb-shell .hb-round:hover { border-color: var(--shell-line); background: var(--shell-card); }
.hb-shell .hb-round .hb-ico { width: 19px; height: 19px; color: var(--shell-ink) !important; }
.hb-shell :is(button, a):focus-visible { outline: 2px solid var(--shell-accent); outline-offset: 3px; }
#hb-recolher { display: none; }

@media (min-width: 1024px) {
  .hb-shell .hb-sidebar { width: 216px; padding: 22px 14px 14px; height: 100dvh; overflow: hidden; border-right: 1px solid var(--shell-line); background: var(--shell-card); }
  .hb-shell .hb-logo { padding: 0 6px; margin-bottom: 24px; gap: 8px; justify-content: space-between; }
  .hb-shell .hb-logo .hb-wordmark-frame { width: 138px; height: 39px; }
  #hb-recolher { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border: 1px solid var(--shell-line); background: var(--shell-card); color: var(--shell-muted); border-radius: 8px; cursor: pointer; }
  #hb-recolher svg { width: 18px; height: 18px; }
  .hb-shell .hb-nav { flex: 1; min-height: 0; gap: 2px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: transparent transparent; }
  .hb-shell .hb-nav:hover, .hb-shell .hb-nav:focus-within { scrollbar-color: var(--shell-line) transparent; }
  .hb-shell .hb-nav-section { padding: 18px 11px 6px; font-size: 9px; letter-spacing: .9px; color: var(--shell-muted); }
  .hb-shell .hb-nav :is(a, button) { flex-shrink: 0; gap: 11px; min-height: 40px; padding: 9px 11px; border-radius: 11px; color: var(--shell-muted); font-size: 12px; font-weight: 750; line-height: 1.4; }
  .hb-shell .hb-nav .hb-ico { width: 18px; height: 18px; flex-shrink: 0; }
  .hb-shell .hb-nav :is(a, button):hover { color: var(--shell-ink); background: var(--shell-bg); }
  .hb-shell .hb-nav :is(a, button).ativo { color: var(--shell-accent); background: color-mix(in srgb, var(--shell-accent) 9%, var(--shell-card)); }
  .hb-shell .hb-badge { font-size: 10px; min-width: 20px; padding: 2px 5px; }
  .hb-shell .hb-main { max-width: none; padding: 22px 28px 36px; }
  .hb-shell .hb-avatar-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; align-items: center; margin: 14px 0 0; padding: 14px 5px 8px; background: transparent; border-top: 1px solid var(--shell-line); border-radius: 0; color: var(--shell-ink); text-align: left; text-decoration: none; }
  .hb-shell .hb-avatar-wrap { grid-row: 1 / 3; width: 40px; height: 40px; margin: 0; }
  .hb-shell .hb-avatar-img, .hb-shell .hb-avatar-mono { width: 40px; height: 40px; margin: 0; border: 0; font-size: 20px; }
  .hb-shell .hb-avatar-card h4 { font: 800 12px/1.4 'Nunito', sans-serif; overflow-wrap: anywhere; }
  .hb-shell .hb-nivel { margin: 0; font-size: 10px; color: var(--shell-muted); }
  .hb-shell .hb-avatar-card :is(.hb-avatar-crown, .hb-avatar-star, .hb-xp-track, .hb-xp-label, .hb-motto) { display: none; }
  .hb-shell .hb-lang { margin-top: 10px; gap: 4px; }
  .hb-shell .hb-lang .rd-lang-btn { padding: 5px; border-width: 1px; font-size: 10px; }
  .hb-shell.hb-nav-recolhida .hb-sidebar { width: 72px; padding-inline: 10px; }
  .hb-shell.hb-nav-recolhida .hb-logo { justify-content: center; padding: 0; }
  .hb-shell.hb-nav-recolhida .hb-wordmark-frame { display: none; }
  .hb-shell.hb-nav-recolhida #hb-recolher svg { transform: rotate(180deg); }
  .hb-shell.hb-nav-recolhida .hb-nav-section { height: 18px; padding: 0; overflow: hidden; font-size: 0; }
  .hb-shell.hb-nav-recolhida .hb-nav :is(a, button) { position: relative; justify-content: center; min-height: 44px; padding: 10px; }
  .hb-shell.hb-nav-recolhida .hb-nav [data-i18n]:not(.hb-nav-section),
  .hb-shell.hb-nav-recolhida .hb-avatar-card :is(h4, .hb-nivel) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hb-shell.hb-nav-recolhida .hb-nav .hb-badge { position: absolute; top: 0; right: 0; font-size: 8px; min-width: 15px; padding: 1px 3px; }
  .hb-shell.hb-nav-recolhida .hb-avatar-card { grid-template-columns: 40px; justify-content: center; }
  .hb-shell.hb-nav-recolhida .hb-lang { flex-direction: column; }
}

@media (max-width: 640px) {
  .hb-shell .hb-top { gap: 12px; padding-bottom: 14px; margin-bottom: 18px; }
  .hb-shell .hb-chips { gap: 4px; }
  .hb-shell .hb-chip { padding: 6px; gap: 4px; }
  .hb-shell .hb-chip .hb-ico { width: 14px; height: 14px; }
  .hb-shell .hb-round { width: 32px; height: 34px; }
}

/* Fora do ecrã mobile o avatar do topo não existe (o mockup é mobile):
   a folha base traz display:none e o bloco ≤1023px põe-no a block. */
.hb-avatar-topo { display: none; }

/* «Hoje na escola» é uma secção do layout mobile (o desktop tem a grelha
   semanal completa na vista Horário). */
.hb-hoje-escola { display: none; }

/* ──────────────────────────────────────────────────────────────────────────
   SOMOS mobile app — light interface v1
   Uma camada exclusivamente mobile/tablet. O desktop mantém a composição
   existente. A paleta reutiliza os tokens reais da plataforma: creme quente,
   tinta azul-noite, violeta e acentos pedagógicos suaves.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  /* Ecrã fixo: o body nunca faz scroll — é isto que mata o elástico do
     WKWebView/Safari no documento. Cada ecrã de topo é o seu próprio
     scroller (o nav inferior, filho do body, fica imóvel). O
     capacitor.config.json desliga também o bounce nativo. */
  html,
  body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  #screen-login,
  #screen-hub,
  #screen-ex,
  #screen-baseline {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: none;
  }

  /* O hub vive dentro de div.wrapper (altura auto por omissão): sem isto,
     o height:100% dos ecrãs não resolve e ficam presos sem scroll. */
  body > .wrapper {
    height: 100%;
  }

  .hb-shell {
    /* Tokens do mockup iOS (__mockup_ios_mobile.html): creme quente,
       linhas lilás e o violeta saturado da marca — não um violeta suado. */
    --shell-bg: #FFF9F2;
    --shell-card: #ffffff;
    --shell-ink: #1a1a2e;
    --shell-muted: #6F6F91;
    --shell-line: #EEE8FF;
    --shell-accent: var(--grad-b, #7C3AED);
    min-height: 100dvh;
    background:
      radial-gradient(circle at 0 0, rgba(155,93,229,.055), transparent 34%),
      var(--shell-bg);
  }

  .hb-shell .hb-main {
    width: min(100%, 480px);
    margin: 0 auto;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 14px calc(92px + env(safe-area-inset-bottom, 0px));
    background: transparent;
  }

  /* Cabeçalho como o mockup: avatar + saudação/data + chip de racha.
     Os botões redondos (sino, paleta, família) migram para Mais → Conta. */
  .hb-shell .hb-top {
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
  }
  .hb-avatar-topo { display: block; width: 46px; height: 46px; flex: 0 0 46px; }
  .hb-avatar-topo img,
  .hb-avatar-topo-mono {
    width: 100%; height: 100%; border-radius: 50%;
    border: 2.5px solid #fff; box-shadow: 0 3px 10px rgba(124,58,237,.25);
  }
  .hb-avatar-topo img { object-fit: cover; object-position: top center; background: #fff; }
  .hb-avatar-topo-mono {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
    font-family: 'Baloo 2', sans-serif; font-size: 20px; font-weight: 900; color: #fff;
  }
  .hb-shell .hb-saudacao { min-width: 0; flex: 1; }
  .hb-shell .hb-saudacao h1 {
    margin: 0;
    color: var(--shell-ink);
    font-size: clamp(19px, 5.4vw, 22px);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hb-shell .hb-saudacao p {
    display: block;
    margin-top: 3px;
    color: var(--shell-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hb-shell .hb-chips {
    display: flex;
    gap: 6px;
    max-width: 100%;
    overflow-x: auto;
    padding: 2px 1px 4px;
    scrollbar-width: none;
  }
  .hb-shell .hb-chips::-webkit-scrollbar { display: none; }
  /* Só o chip da racha fica no topo (🔥 12 dias); as estrelas vivem nas
     Conquistas e os botões redondos em Mais → Conta. */
  .hb-shell .hb-chips .hb-chip:first-child,
  .hb-shell .hb-chips .hb-round { display: none; }
  .hb-shell .hb-chips .hb-chip {
    flex: 0 0 auto;
    min-height: 0;
    padding: 7px 12px;
    gap: 6px;
    border: 2px solid #ffe3c2;
    border-radius: 99px;
    background: #fff;
    box-shadow: none;
  }
  .hb-shell .hb-chips .hb-chip b { color: var(--orange, #F4841F); font-size: 13px; }
  .hb-shell .hb-chips .hb-chip small { color: var(--orange, #F4841F); font-size: 11px; font-weight: 800; }

  .hb-shell .hb-view { color: var(--shell-ink); }
  .hb-shell .hb-view > h2,
  .hb-shell .ex-cabeca h2 {
    color: var(--shell-ink);
    font-size: clamp(25px, 7vw, 30px);
    line-height: 1.08;
    letter-spacing: -.035em;
  }
  .hb-shell .hb-sub2,
  .hb-shell .ex-cabeca p,
  .hb-shell .ex-resumo { color: var(--shell-muted); }

  .hb-shell .hb-cols,
  .hb-shell .hb-col-a,
  .hb-shell .hb-col-b,
  .hb-shell .hb-row2 { gap: 12px; }

  .hb-shell :is(.hb-card, .hb-hero, .hb-proxima, .ex-faz-agora) {
    border: 1px solid var(--shell-line) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 7px 24px rgba(32,27,74,.055) !important;
  }
  .hb-shell .hb-card { padding: 16px !important; }
  .hb-shell .hb-card-head { margin-bottom: 12px; }
  .hb-shell .hb-card-head h3 {
    color: var(--shell-ink);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .035em;
  }
  .hb-shell .hb-card-head .hb-ico-h { color: var(--shell-accent); }

  .hb-shell :is(.hb-pill, .hb-pill-ok, .hb-mini, .badge-rever, .badge-dominado) {
    border-radius: 999px !important;
  }

  .hb-shell button,
  .hb-shell a { -webkit-tap-highlight-color: transparent; }
  .hb-shell :is(button, a):active { transform: scale(.985); }

  /* Exercícios / Explorar: cartões mais próximos da linguagem da app nativa. */
  #view-explorar .ex-cabeca { margin-bottom: 14px; }
  #view-explorar :is(.ex-card, .review-card) {
    border-width: 1px !important;
    border-color: var(--shell-line) !important;
    border-radius: 17px !important;
    background: #fff !important;
    box-shadow: 0 6px 20px rgba(32,27,74,.045) !important;
  }
  #view-explorar .ex-card::after { height: 3px; opacity: .68; }
  #view-explorar .icon-wrap { border-width: 1px; border-radius: 14px; }
  #view-explorar .ct { color: var(--shell-ink); font-size: 16px; }
  #view-explorar .cd { color: var(--shell-muted); }

  /* Horário e listas: linhas brancas leves, sem aparência de tabela pesada. */
  #view-horario :is(.hb-card, .hor-card, .hor-aula, .hor-dia) {
    border-color: var(--shell-line) !important;
    box-shadow: 0 5px 18px rgba(32,27,74,.04) !important;
  }

  /* Diário: mantém o livro real, mas aproxima os controlos do mockup claro. */
  #dz-raiz {
    --dz-rosa: #6f5ce8;
    --dz-rosa-claro: #ece8ff;
  }
  #dz-raiz .dz-topo {
    max-width: none;
    margin: 0 0 14px;
    padding: 0;
  }
  #dz-raiz .dz-topo h3 {
    color: var(--shell-ink);
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: -.03em;
  }
  #dz-raiz .dz-zona { gap: 14px; }
  #dz-raiz .dz-lateral {
    gap: 8px;
    padding: 0;
  }
  #dz-raiz .dz-lateral button {
    min-height: 44px;
    border: 1px solid var(--shell-line);
    border-radius: 13px;
    background: #fff;
    color: var(--shell-ink);
    box-shadow: 0 4px 14px rgba(32,27,74,.04);
    font-weight: 800;
  }
  #dz-raiz .dz-lateral #dz-nova {
    border-color: transparent;
    background: linear-gradient(135deg,#7c69eb,#6250d7);
    color: #fff;
    box-shadow: 0 8px 20px rgba(111,92,232,.24);
  }
  #dz-raiz .dz-quem {
    border-color: var(--shell-line);
    border-radius: 14px;
    background: #f8f6ff;
  }
  #dz-raiz .dz-paginacao {
    color: var(--shell-muted);
  }

  /* Barra inferior iOS-like: visual estável, sem «ilha» volumosa. */
  .rd-bottom-nav {
    left: 0;
    right: 0;
    bottom: 0;

    /* Anula o translateX(-50%) da pílula centrada ≥430px: com largura
       total, esse transform punha o nav meio fora do ecrã. */
    transform: none;
    width: 100%;
    max-width: none;
    min-height: 62px;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-top: 1px solid rgba(225,222,236,.9);
    border-radius: 0;
    background: rgba(255,255,255,.94);
    box-shadow: 0 -8px 24px rgba(28,24,62,.045);
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
  }
  .rd-nav-item {
    flex: 1 1 0;
    min-width: 0;
    gap: 3px;
    padding: 5px 2px;
    border-radius: 10px;
    color: #7b8098;
    background: transparent !important;
    font-weight: 800;
  }
  .rd-bottom-nav .rd-nav-item .hb-ico {
    width: 21px;
    height: 21px;
    margin: 0;
  }
  .rd-bottom-nav .rd-nav-item .label {
    max-width: 74px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9.5px;
    line-height: 1.1;
  }
  .rd-nav-item.ativo,
  .rd-nav-item[aria-current="page"] {
    color: var(--shell-accent) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Sem grelha de pontos na app mobile: o mockup aprovado é de fundo liso.
     Os pontos vivem no body (index.html), não no hub — sem isto sobrevivem
     nas margens à volta do conteúdo. */
  body,
  #screen-hub,
  .hb-shell { background-image: none !important; }

  /* Hero «Missão de hoje» = cartão de prática do mockup: gradiente violeta
     cheio, texto branco e CTA branco. As montanhas de linha fina saem. */
  .hb-shell .hb-hero {
    background: linear-gradient(135deg, var(--grad-a), var(--grad-b)) !important;
    border-color: transparent !important;
    border-radius: 22px !important;
    box-shadow: 0 12px 30px rgba(124,58,237,.30) !important;
  }
  .hb-shell .hb-hero-monte { display: none; }
  .hb-shell .hb-hero-alvo {
    background: rgba(255,255,255,.18);
    box-shadow: none;
    color: #fff;
  }
  .hb-shell .hb-hero-etiq {
    color: #fff;
    background: rgba(255,255,255,.16);
  }
  .hb-shell .hb-hero-body h2 { color: #fff; }
  .hb-shell .hb-hero-meta { color: rgba(255,255,255,.92); }
  .hb-shell .hb-hero-prog .rd-progress-track { background: rgba(255,255,255,.28); }
  .hb-shell .hb-hero-prog .rd-progress-fill { background: #fff; }
  .hb-shell .hb-hero-prog small { color: rgba(255,255,255,.88); }
  .hb-shell .hb-hero-cta {
    background: #fff;
    color: var(--grad-b);
    box-shadow: none;
    border-radius: 14px;
  }

  /* «Hoje na escola»: pílulas das aulas de hoje em scroll horizontal,
     com o ponto da cor da disciplina (mockup iOS, ecrã 2). */
  .hb-hoje-escola { display: block; }
  .hb-sec-titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 16px 2px 9px;
  }
  .hb-sec-titulo h4 {
    font-family: 'Baloo 2', sans-serif;
    font-size: 16px;
    font-weight: 900;
    color: var(--shell-ink);
  }
  .hb-sec-titulo .hb-link { padding: 0; }
  .hb-aulas {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 1px 4px;
    scrollbar-width: none;
  }
  .hb-aulas::-webkit-scrollbar { display: none; }
  .hb-aula {
    flex: 0 0 auto;
    min-width: 104px;
    padding: 10px 13px;
    border: 2px solid var(--shell-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(32,27,74,.04);
    text-align: left;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
  }
  .hb-aula .hora {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: var(--shell-muted);
  }
  .hb-aula .disc {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 13.5px;
    font-weight: 900;
    color: var(--shell-ink);
    white-space: nowrap;
  }
  .hb-aula .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  /* Tab activa com pílula lavanda (o mockup destaca o separador com fundo,
     não só com cor). */
  .rd-nav-item.ativo,
  .rd-bottom-nav .rd-nav-item[aria-current="page"] {
    background: var(--tint, #EDE9FE) !important;
    border-radius: 13px;
  }

  /* Mais: caixa branca arredondada por grupo, linhas com divisor e quadrado
     pastel — como o ecrã 4 do mockup. */
  .mais-lista { display: block; }
  .mais-lista .mais-sec {
    margin: 16px 2px 8px;
    color: var(--shell-muted);
  }
  .mais-lista .mais-sec:first-child { margin-top: 4px; }
  .mais-grupo {
    background: #fff;
    border: 2px solid var(--shell-line);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(32,27,74,.04);
  }
  .mais-grupo a,
  .mais-grupo button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 13px 15px;
    background: #fff;
    border: none;
    border-bottom: 1.5px solid #f4f0fb;
    border-radius: 0;
    box-shadow: none;
    font-family: 'Nunito', sans-serif;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--shell-ink);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  .mais-grupo a:last-child,
  .mais-grupo button:last-child { border-bottom: none; }
  .mais-ico {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .mais-ico .hb-ico { color: var(--shell-accent); }
  .mais-seta { margin-left: auto; color: #c7c0dd; font-size: 17px; font-weight: 900; }

  /* Conquistas: linhas → medalhas em grelha centrada, como o mockup. */
  .hb-conq-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  #view-conquistas .rd-achievement {
    margin: 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 16px 10px 14px;
    border: 1px solid var(--shell-line);
    background: #fff;
    box-shadow: 0 6px 18px rgba(32,27,74,.05);
  }
  #view-conquistas .rd-achievement-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-size: 25px;
  }
  #view-conquistas .rd-achievement-info h4 { font-size: 12.5px; }
  #view-conquistas .rd-achievement-info p { font-size: 10px; line-height: 1.3; }

  /* Revisões: filas leves + CTA em pílula violeta (o gradiente cheio
     parecia datado ao lado dos cartões brancos). */
  .hb-shell .hb-rev-item {
    border-color: var(--shell-line);
    border-radius: 15px;
    box-shadow: 0 4px 14px rgba(32,27,74,.04);
  }
  .hb-shell .hb-conq-btn.ss-cta {
    background: var(--grad-b, var(--shell-accent));
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(124,58,237,.22);
  }
}

@media (max-width: 640px) {
  .hb-shell .hb-main {
    width: 100%;
    padding-inline: 12px;
  }
  .hb-shell :is(.hb-card, .hb-hero, .hb-proxima, .ex-faz-agora) { border-radius: 17px !important; }
  #dz-raiz .dz-zona { display: flex !important; flex-direction: column; }
  #dz-raiz .dz-lateral {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  #dz-raiz .dz-lateral .dz-lateral-divisoria,
  #dz-raiz .dz-lateral .dz-quem { grid-column: 1 / -1; }
  #dz-raiz #dz-palco { width: 100%; padding-inline: 4px; }
}