/* pagina.css do capítulo 11, "O que surgiu em 2026" (IA explicada, FAROL), 30/10/2026.
   A página usa a base do capítulo 4 (/tamanho/farol.css e /tamanho/pagina.css, com o corte entre as seções sob
   .ia-pagina--corte). Aqui fica só o que é deste capítulo: o celular deitado.

   Celular deitado (844 × 390, e qualquer janela deitada com até 500 px de altura). Com o palco no alto, a 60svh, sobravam
   234 px de palco e 86 px de área: o palco só mostrava o nome da cena e a fita (NOTAS-engenheiro, pendência 1). Como em
   1440 e como no cap. 1 (site/texto/pagina.css, o mesmo caso): as fichas numa coluna estreita à esquerda e o palco preso
   à direita com a altura inteira da janela. O palco fica com uns 400 × 390 px, no regime de desenho que o palco.js já
   tem para o celular baixo (palco com menos de 560 de largura e 460 de altura, medido a 390 × 398): nada do desenho muda.
   A linha de leitura volta ao meio da tela, como em 1440 (o palco não está mais no alto). O "onde estou" vai no peitoril,
   que aqui é a faixa presa no alto da coluna das fichas. A cartela do corte usa a composição de 1440 (a frase ao lado
   do título), com as medidas cortadas para 390 px de altura. */
@media (max-width: 959px) and (orientation: landscape) and (max-height: 500px) {
  .ia-janela {
    display: grid; align-items: start;
    grid-template-columns: var(--gut) minmax(240px, 340px) 20px minmax(0, 1fr) var(--gut);   /* a 844: fichas de 340 px (com 300, uma ficha longa passava da altura da tela) e palco de 400 */
  }
  .ia-janela > .palco-global {
    grid-column: 4; grid-row: 1;
    position: sticky; top: 0; z-index: 2;
    height: 100vh; height: 100svh;
    border-bottom: 0;
  }
  .ia-passos { grid-column: 2; grid-row: 1; padding: 0 0 calc(50vh + 40px); }
  .passo + .passo { margin-top: 48vh; margin-top: 48svh; }
  .ia-pagina--corte .ia-peitoril {
    grid-column: 2; grid-row: 1; align-self: start;
    position: sticky; top: 0; z-index: 3;
    justify-content: flex-start; padding: 0;
  }
  /* o ritmo do corte como em 1440: a linha de leitura no meio da tela */
  .ia-pagina--corte .ia-cena-cab { margin-bottom: 16vh; margin-bottom: 16svh; }
  .ia-pagina--corte .cena + .cena { margin-top: 48vh; margin-top: 48svh; }
  .ia-pagina--corte .cena { scroll-margin-top: 40vh; scroll-margin-top: 40svh; }
  .ia-pagina--corte .ia-passos > .cena:first-of-type { margin-top: calc(var(--ia-peitoril) + 8svh); scroll-margin-top: calc(var(--ia-peitoril) + 12px); }
  /* a cartela: a composição de 1440 (título e frase lado a lado, sobre o romano), na altura de 390 px */
  .ia-pagina--corte .ia-cartela {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 34ch); grid-template-rows: auto minmax(0, 1fr) auto auto;
    column-gap: 28px; padding: 20px var(--gut) 24px;
  }
  .ia-pagina--corte .ia-cartela .ia-cena-num { font-size: clamp(120px, 42svh, 180px); }
  .ia-pagina--corte .ia-cartela h2 { grid-column: 1; grid-row: 4; margin-top: 4px; font-size: clamp(36px, 5.6vw, 48px); max-width: 14ch; }
  .ia-pagina--corte .ia-cartela .ia-cena-cab__frase { grid-column: 2; grid-row: 4; margin-top: 0; font-size: 17px; }
  /* a capa: o título de 96 px (regra de 390 em pé) descia abaixo da dobra a 844 × 390 («EM 2026» cortado no primeiro
     quadro; revisão visual do corte, ajuste 5); com 56 px, «O que surgiu em 2026» fica acima dela */
  .ia-capa h1 { font-size: 56px; }
}