/* =====================================================================
   Sures Migrantes — design v3 (19/out/2026)
   Linguagem: Gerüst (Katagami, en-019ef945-b735-7443-918a-8e881983ab8a) — oficina Bauhaus: geometria primária,
   filetes pretos de construção, assimetria disciplinada, campo de marfim. Ilustrações: Werkblock. Ver docs/redesenho-v3/DESIGN.md.
   Sem JavaScript, sem animação, sem transição. Hover e foco só mudam cor, sublinhado ou contorno.

   Cores (contraste medido, WCAG 2.x):
     marfim  #F3EBD9 fundo · papel #FFF9EE painéis · areia #ECE0C7 painel secundário · grade #E3D8C0 (só linhas)
     carvão  #1E1B18 texto: 16,35 (papel) · 14,44 (marfim) · 13,10 (areia) · 12,12 (grade) · 7,50 (mostarda)
     cobalto #27518D plano da inscrição → texto SÓ papel (7,57:1). Marfim sobre cobalto = 6,68:1: PROIBIDO.
     mostarda #D6A420 faixas, carimbos, botões → texto SÓ carvão (7,50:1).
     vermelhão #C63A2F SÓ FORMAS. Nunca com texto em cima nem como cor de texto (máx. 4,95:1).
   Todo texto do site fica ≥ 7:1 (a declaração de acessibilidade promete isso; conferir com ferramentas/verificar-contraste.mjs).
   Fontes: League Spartan (títulos), Archivo (texto), Poppins 400 (rótulos) e 700 (nome do seminário; desde 22/out/2026, antes Space Mono) — subconjunto latino, woff2, OFL, + U+202F.
   Pontos de quebra (Gerüst): 42.5em (680 px, 8 colunas) · 56.25em (900 px, 12 colunas) · 77.5em (1240 px).
   ===================================================================== */

@font-face {
  font-family: "League Spartan";
  src: url("/assets/fonts/league-spartan-5.3.0.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-5.3.0.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {                            /* só o nome do seminário na abertura, como no cartaz (22/out/2026, pedido do operador) */
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-700-5.3.0.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {                            /* rótulos, menu, links das instituições e nota do rodapé (era a Space Mono até 22/out/2026, pedido do operador) */
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-400-5.3.0.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- cores (DESIGN.md §2a) ---------- */
  --marfim: #F3EBD9;
  --papel: #FFF9EE;
  --areia: #ECE0C7;
  --carvao: #1E1B18;
  --regra: #1F1A17;
  --vermelhao: #C63A2F;
  --cobalto: #27518D;
  --mostarda: #D6A420;
  --grade: #E3D8C0;

  /* ---------- fontes (DESIGN.md §3a) ---------- */
  --f-titulo: "League Spartan", "Archivo", sans-serif;
  --f-texto: "Archivo", sans-serif;
  --f-rotulo: "Poppins", "Archivo", sans-serif;          /* Poppins regular (22/out/2026; era Space Mono) */

  /* ---------- escala tipográfica (DESIGN.md §3b; mínimo de texto: 18 px) ---------- */
  --t-h1: clamp(2.75rem, 12.5vw, 8.5rem);
  --t-h2: clamp(2rem, 5.5vw, 3.75rem);
  --t-ano: clamp(2.5rem, 6vw, 4.5rem);
  --t-h3: clamp(1.5rem, 2.6vw, 2.125rem);
  --t-frase: clamp(1.5rem, 3.2vw, 2.5rem);
  --t-rotulo: 1.125rem;
  --t-mes: clamp(1.625rem, 3vw, 2.5rem);   /* "29 OUT." ao lado do carimbo (22/out/2026) */

  /* ---------- espaçamento: escala de 8 px (Gerüst) ---------- */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px;
  --margem: clamp(1.25rem, 4vw, 3rem);

  /* ---------- estrutura ---------- */
  --conteudo: 77.5rem;                  /* 1240 px */
  --medida: 32em;                       /* medida do texto corrido (medir: 60–70 caracteres) */
  --regra-fina: 2px;
  --regra-forte: 4px;
  --laje: 5px 5px 0 var(--regra);       /* única sombra do site, só em .botao, sem deslocamento */
  --quadro: 32px;                       /* grade de construção */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--marfim);
  color: var(--carvao);
  font: 400 1.125rem/1.6 var(--f-texto);
  font-kerning: normal;
}
@media (min-width: 60em) { body { font-size: 1.25rem; } }

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--f-titulo);
  font-weight: 800;
  line-height: 1;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1, h2 { text-transform: uppercase; letter-spacing: -.02em; }
h3 { font-size: var(--t-h3); font-weight: 700; line-height: 1.15; }

p { margin: 0 0 1em; }

a { color: inherit; text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: .2em; }
:focus-visible { outline: 3px solid var(--cobalto); outline-offset: 3px; }

i[lang] { font-style: italic; }

/* ---------- utilitários ---------- */
.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.envoltorio { max-width: calc(var(--conteudo) + 2 * var(--margem)); margin-inline: auto; padding-inline: var(--margem); }
.rotulo, dt {
  margin: 0;
  font: 400 var(--t-rotulo)/1.35 var(--f-rotulo);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ---------- pular para o conteúdo ---------- */
.pular {
  position: absolute; left: var(--margem); top: -20rem; z-index: 10;
  padding: var(--e-3) var(--e-5); background: var(--carvao); color: var(--papel); font-weight: 700;
}
.pular:focus { top: var(--e-4); outline-color: var(--papel); }

.grade { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--e-5); }
@media (min-width: 56.25em) { .grade { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

/* links e foco nos planos escuros (cobalto, carvão): texto e contorno em papel */
.rodape { color: var(--papel); }
.rodape :focus-visible { outline-color: var(--papel); }

/* ---------- botão: plano chapado + sombra "laje" fixa (nenhum deslocamento, nenhum transform) ---------- */
.botao {
  display: inline-block; padding: var(--e-3) var(--e-5);
  background: var(--mostarda); color: var(--carvao);
  border: var(--regra-fina) solid var(--regra); box-shadow: var(--laje);
  font: 700 1.125rem/1.3 var(--f-texto); text-decoration: none;
}
.botao:hover { text-decoration: underline; text-decoration-thickness: .12em; text-underline-offset: .18em; }
.botao--claro { background: var(--papel); color: var(--carvao); }

/* ---------- dobras (Leer más, biografia, resumo): <details> nativo, sem animação ---------- */
.dobra { border-top: var(--regra-fina) solid var(--regra); }
.dobra > summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-4);
  padding-block: var(--e-3); cursor: pointer; list-style: none; font-weight: 700;
}
.dobra > summary::-webkit-details-marker { display: none; }
.dobra > summary::after { content: "+"; font: 800 1.75rem/1 var(--f-titulo); }
.dobra[open] > summary::after { content: "−"; }
.dobra > summary:hover { text-decoration: underline; text-decoration-thickness: .12em; text-underline-offset: .18em; }
.dobra > div { padding-bottom: var(--e-4); }

/* ---------- topo ---------- */
.topo { padding-block: var(--e-4); border-bottom: var(--regra-forte) solid var(--regra); }
.topo__linha { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-2) var(--e-6); }
.menu ul, .idiomas ul { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-5); margin: 0; padding: 0; list-style: none; }
.menu a, .idiomas a {
  display: inline-block; padding-block: var(--e-1);
  font: 400 var(--t-rotulo)/1.35 var(--f-rotulo); letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
}
.menu a:hover, .idiomas a:hover { text-decoration: underline; text-decoration-thickness: .12em; text-underline-offset: .2em; }
.idiomas ul { gap: var(--e-1) var(--e-4); }
/* celular (pedido do operador, 20/out): no topo, o botão de 3 linhas à esquerda e os idiomas à direita; o botão abre o menu logo abaixo,
   uma linha por item entre filetes (empurra a página para baixo; sem animação). No computador, o menu fica aberto no topo, como antes. */
.menu-movel { display: none; }
@media (max-width: 42.49em) {
  .menu--fixo { display: none; }
  .topo__linha { display: block; position: relative; }
  .menu-movel { display: block; }
  .menu-movel > summary {
    display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
    margin-left: -10px; list-style: none; cursor: pointer;                   /* o desenho alinha com a margem; a área de toque passa dela */
  }
  .menu-movel > summary::-webkit-details-marker { display: none; }
  .menu-movel__icone {                                                   /* três filetes carvão */
    position: relative; display: block; width: 24px; height: 18px;
    background: linear-gradient(var(--carvao) 0 0) top / 100% 3px no-repeat, linear-gradient(var(--carvao) 0 0) center / 100% 3px no-repeat,
                linear-gradient(var(--carvao) 0 0) bottom / 100% 3px no-repeat;
  }
  .menu-movel[open] .menu-movel__icone { background: none; }             /* aberto: vira um X (parado, sem transição) */
  .menu-movel[open] .menu-movel__icone::before, .menu-movel[open] .menu-movel__icone::after {
    content: ""; position: absolute; left: -2px; right: -2px; top: calc(50% - 1.5px); height: 3px; background: var(--carvao); transform: rotate(45deg);
  }
  .menu-movel[open] .menu-movel__icone::after { transform: rotate(-45deg); }
  .menu--movel { margin-top: var(--e-4); }
  .menu--movel ul { display: block; border-top: var(--regra-forte) solid var(--regra); }
  .menu--movel li { border-bottom: var(--regra-fina) solid var(--regra); }
  .menu--movel li:last-child { border-bottom: 0; }                       /* o filete do topo fecha a lista */
  .menu--movel a { display: block; padding-block: var(--e-4); font-size: 1rem; letter-spacing: .04em; }
  .topo .idiomas { position: absolute; top: 0; right: var(--margem); display: flex; align-items: center; min-height: 44px; }
  .idiomas ul { gap: var(--e-1) var(--e-4); }
  .idiomas a { font-size: .9375rem; padding-block: var(--e-2); }
}
.idiomas a[aria-current] { text-decoration: underline; text-decoration-thickness: .2em; text-underline-offset: .3em; }

/* ---------- seções (ritmo: cada uma tem a sua densidade e a sua primária, DESIGN.md §4) ---------- */
.secao { padding-block: var(--e-8); }
@media (min-width: 56.25em) { .secao { padding-block: var(--e-9) var(--e-8); } }
.secao__titulo { font-size: var(--t-h2); margin-bottom: var(--e-6); }
.texto { max-width: var(--medida); }

/* ---------- abertura: construção densa à direita (grade + círculo vermelhão cortado), vazio à esquerda ---------- */
.abertura { position: relative; isolation: isolate; overflow: clip; padding-block: var(--e-7) var(--e-6); }   /* clip nos 2 eixos: o círculo nunca invade o topo */
.abertura .rotulo { display: inline-block; padding: var(--e-1) var(--e-3); background: var(--mostarda); color: var(--carvao); }
/* nome do seminário com a tipografia do cartaz (22/out/2026, pedido do operador): Poppins Bold em caixa baixa, valores do Canva —
   espaçamento entre letras 3 (= 0,003 em) e entrelinha 0,89 (conferidos nos pixels do cartaz: base a base 217 px numa fonte de 244 px).
   "Migrantes" mede ~5,17 em — cabe nos tamanhos calculados para os 5,33 em do antigo "MIGRANTES". */
.abertura h1 {
  position: relative; margin-top: var(--e-5); font-size: var(--t-h1); line-height: .89;
  font-family: "Poppins", var(--f-titulo); font-weight: 700; text-transform: none; letter-spacing: .003em;
}
.abertura__frase {
  max-width: 22em; margin: var(--e-6) 0 0; padding-top: var(--e-5); border-top: var(--regra-forte) solid var(--regra);
  font: 600 var(--t-frase)/1.2 var(--f-texto); text-wrap: balance;
}

/* ilustrações: decorativas (alt=""), sempre entre filetes */
.ilustracao img { width: 100%; }
.ilustracao--abertura { margin: var(--e-7) calc(-1 * var(--margem)) 0; border-block: var(--regra-forte) solid var(--regra); }

/* celular (pedido do operador, 20/out): rótulo pequeno e nome grande (hierarquia), menos espaço em volta do nome e o subtítulo colado nele, sem filete */
@media (max-width: 42.49em) {
  .abertura { padding-top: var(--e-5); }
  .abertura .rotulo { padding: 2px var(--e-2); font-size: .8125rem; }
  /* o nome ocupa a largura: "Migrantes" (Poppins) mede ~5,17 em e "MIGRANTES" (League Spartan) 5,33 em — largura útil ÷ 5,45 deixa folga nos dois casos */
  .abertura h1 { margin-top: var(--e-3); font-size: calc((100vw - 2 * var(--margem)) / 5.45); }
  .abertura__frase { margin-top: var(--e-4); padding-top: 0; border-top: 0; }
}

@media (min-width: 56.25em) {
  .abertura { padding-block: var(--e-8); }
  .ilustracao--abertura picture { display: block; flex: 1; min-height: 0; }
  .ilustracao--abertura img { height: 100%; object-fit: cover; object-position: 42% center; }   /* recorte: parte do círculo azul + faixas e figuras */
  /* "Migrantes" mede ~5,17 em (era "MIGRANTES", 5,33): com 9,2vw (máx. 8rem) o nome cabe inteiro nas 7 colunas de 900 a 1440+ px (nunca quebra a palavra) */
  .abertura h1 { font-size: clamp(5rem, 9.2vw, 8rem); }
  /* a imagem acompanha a altura do nome + apresentação (pedido do operador): estica e é recortada pelas bordas, sem distorcer */
  .abertura__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-5); align-items: stretch; }
  .abertura__texto { grid-column: 1 / span 7; grid-row: 1; }
  .ilustracao--abertura {
    grid-column: 8 / -1; grid-row: 1; margin: 0; display: flex;
    margin-right: calc(-1 * var(--margem) - max(0px, (100vw - var(--conteudo) - 2 * var(--margem)) / 2));
  }
}

/* ---------- apresentação: dentro da abertura, logo abaixo do subtítulo (pedido do operador, 19/out); filete mostarda abre a leitura ---------- */
.apresentacao { margin-top: var(--e-6); }
.apresentacao .secao__corpo > p:first-child { margin-top: 0; }

/* ---------- sessões: densas, módulos riscados; carimbos em cobalto e mostarda ---------- */
.sessoes-secao { padding-top: var(--e-7); padding-bottom: 0; }
.sessoes-secao .secao__titulo { padding-top: var(--e-5); border-top: var(--regra-forte) solid var(--regra); }
.sessoes { margin: 0; padding: 0; list-style: none; }
.sessoes > li:first-child > .sessao { border-top: 0; padding-top: var(--e-2); }   /* revisão R3: sem filete duplo sob "SESIONES" */
.sessao {
  display: grid; gap: var(--e-6); grid-template-areas: "cabeca" "cartaz" "dobras";
  padding-block: var(--e-7) var(--e-8); border-top: var(--regra-fina) solid var(--regra);
}
.sessao__cabeca { grid-area: cabeca; min-width: 0; }
.sessao__cabeca > :last-child { margin-bottom: 0; }        /* sem o botão do vídeo aqui, a ficha fecha a coluna */
.sessao__lado { grid-area: cartaz; }                    /* cartaz + botão do vídeo logo abaixo */
.sessao__lado .sessao__acoes { margin-top: var(--e-6); }
.dobras { grid-area: dobras; max-width: var(--medida); }

/* carimbo: o ano dentro de uma forma primária que alterna de sessão em sessão (texto sempre todo dentro da cor).
   Ao lado, dia e mês abreviado em destaque ("29 OUT.", na língua da página), na fonte dos títulos — sem número de sessão (22/out/2026, pedido do operador).
   Alinhamento pela linha de base: "2026" e "29 OUT." na mesma linha, nas três formas. */
.sessao__data { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-3) var(--e-5); margin: 0 0 var(--e-5); }
.sessao__ano {
  display: inline-grid; font: 800 var(--t-ano)/1 var(--f-titulo);
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em;
}
.sessao__data--circulo .sessao__ano {               /* círculo mostarda, ano carvão */
  width: 3.3em; aspect-ratio: 1; place-items: center; border-radius: 50%; background: var(--mostarda); color: var(--carvao);
}
.sessao__data--semicirculo .sessao__ano {           /* semicírculo cobalto, lado reto embaixo, ano papel */
  width: 3.3em; height: 1.65em; place-items: end center; padding-bottom: .12em;
  border-radius: 1.65em 1.65em 0 0; background: var(--cobalto); color: var(--papel);
}
.sessao__data--quarto .sessao__ano {                /* quarto de círculo mostarda, ano carvão */
  width: 3.1em; height: 3.1em; place-items: end start; padding: 0 0 .14em .2em;
  border-radius: 0 3.1em 0 0; background: var(--mostarda); color: var(--carvao);
}
.sessao__quando { font: 800 var(--t-mes)/1 var(--f-titulo); letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; }
.sessao h3 { max-width: 24em; }

/* ficha: tabela riscada */
.ficha { margin: var(--e-6) 0; }
.ficha > div { padding-block: var(--e-3); border-top: var(--regra-fina) solid var(--regra); }
.ficha dd { margin: var(--e-1) 0 0; }
.pessoa { display: block; }
.pessoa + .pessoa { margin-top: var(--e-2); }
.pessoa strong { display: block; font-weight: 700; }
.fusos { display: flex; flex-wrap: wrap; gap: 0 var(--e-5); margin: 0; padding: 0; list-style: none; }
@media (min-width: 42.5em) {
  .ficha > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); column-gap: var(--e-5); align-items: baseline; }
  .ficha dd { margin: 0; }
}
.sessao__acoes { margin: 0; display: flex; flex-wrap: wrap; gap: var(--e-5); }   /* inscrição (mostarda) e, depois, acesso à sala (papel) */

/* capa de livro na biografia: miniatura com link, filete como os cartazes (pedido do operador, 22/out) */
.capa-livro a { display: inline-block; }
.capa-livro img { display: block; width: 10rem; height: auto; border: var(--regra-fina) solid var(--regra); }

/* cartaz: link para a versão em alta resolução; quarto de círculo vermelhão atrás do canto superior (nunca sob a legenda) */
.cartaz { position: relative; isolation: isolate; margin: 0; max-width: 34rem; }
.cartaz a { display: block; }
.cartaz img { width: 100%; border: var(--regra-fina) solid var(--regra); }

@media (min-width: 56.25em) {
  .sessao {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-5); row-gap: var(--e-6);
    grid-template-areas: none; grid-template-rows: auto 1fr; align-items: start;
  }
  .sessao__cabeca { grid-column: 1 / span 7; grid-row: 1; padding-right: var(--e-6); }
  .dobras         { grid-column: 1 / span 7; grid-row: 2; max-width: none; margin-right: var(--e-6); }
  .sessao__lado   { grid-column: 8 / -1; grid-row: 1 / span 2; margin-top: var(--e-6); }
  .cartaz         { width: 100%; max-width: none; }
  .sessao--sem-cartaz .sessao__cabeca, .sessao--sem-cartaz .dobras { grid-column: 1 / span 8; }
}

/* ---------- instituições: quadro riscado de linhas (não cartões); marcadores vermelhão ---------- */
.instituicoes { margin: 0; padding: 0; list-style: none; border-top: var(--regra-forte) solid var(--regra); }
.instituicoes li {
  display: grid; grid-template-columns: var(--e-6) minmax(0, 1fr); column-gap: var(--e-4); row-gap: var(--e-3);
  align-items: center; padding-block: var(--e-5); border-bottom: var(--regra-fina) solid var(--regra);
}
.marcador { width: var(--e-5); height: var(--e-5); background: var(--vermelhao); }
.marcador--circulo { border-radius: 50%; }
.marcador--triangulo { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.logo { display: flex; align-items: center; }
/* todos os logos com a mesma altura (pedido do operador, 20/out); a largura segue a proporção de cada um. A altura vai no <img>
   e não no .logo: o <picture> do meio não tem altura definida, e o max-height: 100% de antes não valia (o do GT saía com 125 px) */
.logo img { height: 5rem; width: auto; max-width: 100%; object-fit: contain; }
.instituicoes__links { grid-column: 1 / -1; margin: 0; font: 400 var(--t-rotulo)/1.5 var(--f-rotulo); overflow-wrap: anywhere; }   /* celular: links embaixo; endereços longos podem quebrar */
@media (min-width: 56.25em) {
  .instituicoes li { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-5); }
  .marcador { grid-column: 1; }
  .logo { grid-column: 2 / span 4; }
  .instituicoes__links { grid-column: 6 / -1; }
}

/* ---------- rodapé: plano carvão enxuto, filete mostarda, semicírculo vermelhão na borda de baixo (sem texto em cima) ---------- */
.rodape {
  position: relative; isolation: isolate; overflow: clip; margin-top: var(--e-7);
  padding-block: var(--e-7);
  background: var(--carvao); border-top: var(--e-3) solid var(--mostarda);
}
.rodape__lista { margin: 0; padding: 0; list-style: none; }
.rodape__lista li + li { margin-top: var(--e-2); }
.rodape__nota { margin: var(--e-5) 0 0; padding-top: var(--e-4); border-top: var(--regra-fina) solid var(--papel); font: 400 var(--t-rotulo)/1.45 var(--f-rotulo); }
@media (min-width: 56.25em) {
  .rodape__info { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-4) var(--e-7); }
  .rodape__lista { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-7); }
  .rodape__lista li + li { margin-top: 0; }
  .rodape__nota { margin: 0; padding-top: 0; border-top: 0; }
}

/* ---------- páginas de texto (privacidade, acessibilidade, 404): cabeçalho areia com grade e quarto de círculo ---------- */
.pagina { overflow-x: clip; }
.pagina__cabeca {
  position: relative; isolation: isolate; padding-block: var(--e-8) var(--e-7); padding-right: clamp(4.5rem, 16vw, 12rem);
}
.pagina__cabeca::before {                            /* plano areia de borda a borda, com a grade de construção */
  content: ""; position: absolute; z-index: -2; inset: 0 calc(50% - 50vw);
  background-color: var(--areia);
  background-image:
    repeating-linear-gradient(to right, var(--grade) 0 1px, transparent 1px var(--quadro)),
    repeating-linear-gradient(to bottom, var(--grade) 0 1px, transparent 1px var(--quadro));
  border-bottom: var(--regra-forte) solid var(--regra);
}
.pagina__cabeca::after {                             /* quarto de círculo vermelhão, cortado pela borda direita */
  content: ""; position: absolute; z-index: -1; bottom: 0; right: calc(50% - 50vw);
  width: clamp(4rem, 14vw, 11rem); aspect-ratio: 1; border-radius: 100% 0 0 0; background: var(--vermelhao);
}
.pagina .rotulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.pagina h1 { margin-top: var(--e-5); font-size: clamp(2.25rem, 6vw, 4.25rem); max-width: 16em; }
.pagina__erro { display: inline-block; padding: var(--e-2) var(--e-3); background: var(--mostarda); color: var(--carvao); }
.pagina__corpo { margin-top: var(--e-8); }
.texto-longo h2 {
  margin: var(--e-7) 0 var(--e-4); padding-top: var(--e-4); border-top: var(--regra-fina) solid var(--regra);
  font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15;
}
.texto-longo h3 { margin: var(--e-6) 0 var(--e-2); font-size: 1.375rem; }
.texto-longo ul, .texto-longo ol { padding-left: 1.25em; margin: 0 0 1em; }
.texto-longo ul { list-style: square; }
.texto-longo li + li { margin-top: .4em; }
.texto-longo strong { font-weight: 700; }
.pagina__voltar { margin-top: var(--e-7); }
@media (min-width: 56.25em) {
  .pagina__cabeca { grid-column: 1 / -1; }
  .pagina__corpo { grid-column: 4 / span 7; }
}

/* ---------- celular: tamanhos revistos (pedido do operador, 20/out) ----------
   Hierarquia: nome 51–71 px > título de seção 32 > título de sessão 22 > texto 18 (não muda) > rótulos mono 15.
   Carimbo, logos e espaços menores: nada compete com os títulos, e a página encurta. */
@media (max-width: 42.49em) {
  :root {
    --t-rotulo: .9375rem;                  /* 15 px: PONENTE, IDIOMA, "Sesión 3 · 17 sept.", links das instituições, "sin cookies" */
    --t-h3: 1.375rem;                      /* 22 px: título da sessão (abaixo do subtítulo de 24 px) */
    --t-ano: 1.875rem;                     /* 30 px: o carimbo passa de 132 para 99 px */
    --t-mes: 1.5rem;                       /* 24 px: "29 OUT." ao lado do carimbo */
  }
  .secao { padding-block: var(--e-7); }
  .sessoes-secao { padding-top: var(--e-6); }
  .secao__titulo { margin-bottom: var(--e-5); }
  .sessao { gap: var(--e-5); padding-block: var(--e-6) var(--e-7); }
  .sessoes > li:last-child > .sessao { padding-bottom: var(--e-2); }   /* a seção seguinte já abre o espaço: sem vão duplo */
  .sessao__data { margin-bottom: var(--e-4); }
  .ficha { margin: var(--e-5) 0 0; }
  .sessao__lado .sessao__acoes { margin-top: var(--e-5); }
  .ilustracao--abertura { margin-top: var(--e-6); }
  /* logos: altura fixa de 56 px (eram até 125 px), largura proporcional */
  .instituicoes li { padding-block: var(--e-4); row-gap: var(--e-2); }
  .logo img { height: 3.5rem; }
  .rodape { margin-top: var(--e-6); padding-block: var(--e-6); }
  .pagina__corpo { margin-top: var(--e-6); }
}

/* ---------- cores forçadas (alto contraste do Windows): sem formas, botões com borda, logos sobre branco ---------- */
@media (forced-colors: active) {
  .marcador, .pagina__cabeca::after { display: none; }
  .sessao__ano { border: 2px solid CanvasText; }
  .botao { border: 2px solid ButtonText; }
  .logo { forced-color-adjust: none; background: #fff; padding: .5rem; }
}