dialog#panel {
  position: fixed;
  inset: 5vh 5vw;
  max-width: 640px;
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  background: var(--color-panel-bg);
  color: var(--color-text);
}

/* Split view (desktop only, ver .scene:has(...) em styles.css e a troca
   showModal()/show() em js/panel.js): em vez do modal flutuante
   centralizado, o painel vira uma faixa fixa de 40vw encostada na borda
   direita, altura cheia — o hero (60vw restantes) fica inteiro à mostra
   do lado esquerdo. Isso só é possível porque no
   desktop o JS abre o dialog com show() em vez de showModal() — um
   dialog modal torna o resto da página inert (não-interativo) por
   definição nativa do navegador, nenhum CSS consegue driblar isso.
   show() não promove o dialog pra "top layer" nem cria ::backdrop, por
   isso o z-index explícito abaixo (garante que fique acima do resto da
   página, já que perdemos o "furo" automático do topo da pilha) e por
   isso a regra de ::backdrop mais abaixo neste arquivo só se aplica
   mesmo no mobile (onde ainda usamos showModal()).

   width usa max(40vw, 480px): numa tela pequena (ex.: MacBook 13", ~1440px
   lógicos), 40vw já fica abaixo de 480px e a coluna de texto ficaria
   apertada — o piso garante uma largura mínima confortável de leitura,
   "roubando" espaço do hero nesses casos (ver .scene em styles.css,
   que usa min(60vw, 100vw - 480px) pra sempre preencher exatamente o
   espaço que sobra, sem gap nem sobreposição).

   A geometria (inset/width/height) fica fixa independente de [open] — só
   transform/opacity mudam entre os dois estados. É isso que dá a sensação
   de "empurrar": o painel já existe fora da tela (translateX(100%)) e
   desliza pra dentro, em vez de só aparecer/desaparecer no lugar.
   @starting-style diz ao navegador de onde animar quando o <dialog> vai de
   fechado (nem renderizado) pra aberto — sem isso, a primeira aparição
   seria instantânea, sem "de onde vir". display com allow-discrete mantém
   o dialog visível (rendered) durante a transição de fechamento, já que
   display normalmente troca de forma abrupta (sem meio-termo). */
@media (min-width: 768px) {
  dialog#panel {
    inset: 0 0 0 auto;
    width: max(40vw, 480px);
    max-width: none;
    height: 100%;
    margin: 0;
    border-radius: 0;
    border-width: 0 0 0 1px;
    z-index: 20;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.8s ease, opacity 0.8s ease, display 0.8s ease allow-discrete;
  }

  dialog#panel[open] {
    transform: translateX(0);
    opacity: 1;
  }

  @starting-style {
    dialog#panel[open] {
      transform: translateX(100%);
      opacity: 0;
    }
  }
}

/* O próprio <dialog> não rola: ele é uma coluna flex com o botão de fechar
   fixo no topo e o conteúdo rolando dentro de .panel-content. Se o dialog
   fosse o container de rolagem, o #close-panel (position: absolute) sumiria
   junto com o texto — deixando quem está no celular sem como fechar. */
dialog#panel[open] {
  display: flex;
  flex-direction: column;
}

/* O padding vive aqui (não no dialog#panel) de propósito: a barra de
   rolagem nativa aparece encostada na borda de quem tem overflow, então
   se o padding estivesse no dialog ela ficaria recuada por ele. Assim
   ela fica quase colada na borda do painel, e o texto ganha respiro por
   conta própria (padding-right pequeno, padding-left um pouco menor que
   o padrão anterior de 2rem). Além do padding, a barra em si (largura e
   cor) é estilizada abaixo pra ficar fina — sem isso, a barra padrão do
   navegador (grossa, cinza) chamava atenção mesmo já colada na borda. */
.panel-content {
  overflow-y: auto;
  padding: 2rem 0.25rem 2rem 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

.panel-content::-webkit-scrollbar {
  width: 6px;
}

.panel-content::-webkit-scrollbar-track {
  background: transparent;
}

.panel-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 3px;
}

/* Só existe de verdade no mobile: show() (usado no desktop split view, ver
   js/panel.js) não cria ::backdrop nenhum — isso é exclusivo de dialogs
   abertos via showModal(). No mobile o backdrop escurecido é proposital:
   bloqueia mesmo a interação com o fundo enquanto o painel é lido. */
dialog#panel::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

/* PANEL_TITLE: é a mesma marca do .brand-mark (Victor Mono, branco) —
   só o "_" (cursor-blink) fica amarelo, igual no topo da página. */
dialog#panel h2.panel-title {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 0.5rem 0;
}

/* PANEL_SUBTITLE: no estilo da hero-headline — é o elemento grande do
   cabeçalho do painel. No mobile continua com o clamp responsivo; só o
   desktop tem um tamanho fixo menor (o teto do clamp, 2.5rem/40px, tinha
   ficado grande demais). */
dialog#panel p.panel-subtitle {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  line-height: 1.15;
  color: var(--color-text);
  margin: 0 0 1.75rem 0;
}

@media (min-width: 768px) {
  dialog#panel p.panel-subtitle {
    font-size: 36px;
  }
}

/* PANEL_BODY: Lora — Georgia ficava encorpada demais pra leitura corrida
   longa. */
dialog#panel p {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.panel-areas {
  margin-top: 2rem;
}

.panel-areas h3 {
  font-family: var(--font-label);
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-label);
  margin: 0 0 1rem 0;
}

.panel-area {
  margin-bottom: 1.25rem;
}

.panel-area h4 {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.125rem;
  margin: 0 0 0.25rem 0;
}

.panel-area p {
  font-size: 1rem;
  margin-bottom: 0;
}

/* Bloco de contato no fim do painel — reforça o convite no pico de
   persuasão (quem leu até aqui). Reaproveita .whatsapp-link (mesmo botão
   do hero). */
.panel-contact {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  text-align: center;
}

/* Qualificado com "dialog#panel p" (não só ".panel-contact-note"): a
   regra genérica de parágrafo do painel logo acima tem um #id nela, que
   sozinho já bate a especificidade de uma classe — sem esse prefixo,
   font-size/margin daqui eram ignorados silenciosamente. */
dialog#panel p.panel-contact-note {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1rem;
  margin: 0 0 0.5rem 0;
}

/* Desceu pra depois do botão — margin agora é em cima (era embaixo,
   quando vinha antes dele). Tamanho 20% menor (1rem -> 0.8rem): é
   informação de apoio, não precisa do mesmo peso da nota acima. */
dialog#panel p.panel-contact-address {
  font-family: var(--font-body);
  font-size: 0.75rem;
  margin: 2rem 0 0 0;
}

/* Citações/links embutidos no corpo do texto abrem em nova aba direto no
   ponto da afirmação. Azul clássico de link — o vermelho/laranja é
   reservado pro hero e pro CTA do WhatsApp. */
dialog#panel p a {
  color: var(--color-link);
  text-decoration: underline;
}

#close-panel {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--color-text);
  font-size: 1.25rem;
  cursor: pointer;
}