/* Tela "pais" da página única (site/js/paginas/pais.js): o estilo da antiga site/pais.html, preso a
   body.pg-pais com :where() (especificidade zero, a cascata fica igual). docs/13-site.md "Página única" */
body:where(.pg-pais) { padding-bottom: 32px; }
:where(.pg-pais) .pais-pg { max-width: 820px; margin: 0 auto; padding: 104px 16px 0; display: flex; flex-direction: column; gap: 20px; }
:where(.pg-pais) .pais-pg h1 { margin: 0; text-align: center; font-size: clamp(30px, 5vw, 48px); text-shadow: 0 5px 0 var(--contorno); }
:where(.pg-pais) .bloco { background: var(--creme); color: var(--contorno); border: 6px solid var(--contorno); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 18px 22px; font: 600 17px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
:where(.pg-pais) .bloco h2 { margin: 0 0 8px; font: 800 clamp(22px, 3vw, 28px)/1.2 "Baloo 2", system-ui, sans-serif; }
:where(.pg-pais) .bloco h3 { margin: 0; font: 800 20px/1.3 "Baloo 2", system-ui, sans-serif; }
:where(.pg-pais) .bloco p { margin: 6px 0; }
:where(.pg-pais) .bloco a { color: var(--roxo); text-decoration-thickness: 2px; word-break: break-word; }
:where(.pg-pais) .ep { border-top: 3px dashed #d9d3c4; padding-top: 12px; margin-top: 12px; }
:where(.pg-pais) .ep:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
:where(.pg-pais) details { margin-top: 6px; }
:where(.pg-pais) summary { cursor: pointer; font-weight: 800; color: var(--roxo); min-height: 44px; display: flex; align-items: center; }
:where(.pg-pais) details ul { margin: 6px 0 0; padding-left: 20px; }
:where(.pg-pais) details li { margin: 6px 0; }
:where(.pg-pais) .bloco .botao { font-size: 20px; margin-top: 8px; }
:where(.pg-pais) .bloco .botao, :where(.pg-pais) dialog.confirma .botao { font-family: "Baloo 2", system-ui, sans-serif; font-weight: 800; }
:where(.pg-pais) dialog.confirma { border: 6px solid var(--contorno); border-radius: var(--raio); background: var(--creme); color: var(--contorno);
  box-shadow: var(--sombra); padding: 22px; max-width: min(92vw, 460px); text-align: center; font: 600 18px/1.5 system-ui, sans-serif; }
:where(.pg-pais) dialog.confirma::backdrop { background: rgba(22,33,58,.75); }
:where(.pg-pais) dialog.confirma .acoes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
:where(.pg-pais) dialog.confirma .botao { font-size: 20px; }
:where(.pg-pais) dialog.confirma .botao.perigo { background: var(--coral); }