/* ─────────────────────────────────────────────────────────────
   PISO DE TAMANHO NO TELEFONE
   O desenho da casa usa maiúsculas pequenas e espaçadas — funciona
   em monitor a 60 cm, não funciona num telefone a 30 cm. Aqui nada
   fica abaixo de 11,5 px, e o espaçamento entre letras diminui,
   porque abaixo de 12 px ele atrapalha em vez de ajudar.
   Este ficheiro é carregado DEPOIS do estilo de cada página.
   ───────────────────────────────────────────────────────────── */
@media (max-width:52rem){

  /* ── comum a todas as páginas ── */
  .bar{font-size:12px; letter-spacing:.1em}
  .tagline{font-size:12.5px; letter-spacing:.11em}
  .sec{font-size:12px; letter-spacing:.18em}
  .tiny{font-size:13px}
  .small{font-size:15px}
  figcaption{font-size:13px}
  figure.esq figcaption{font-size:13px}
  .estado{font-size:12px; letter-spacing:.09em}

  /* ── capa: pórtico ── */
  .hero-bar{font-size:12px; letter-spacing:.14em}
  .hero-regua span{font-size:11.5px; letter-spacing:.18em}
  .hero-sub{font-size:16px; line-height:1.62}
  .hero-nota{font-size:11.5px; letter-spacing:.09em; line-height:1.7}
  .btn{font-size:12.5px; letter-spacing:.11em; padding:.85rem 1.2rem}

  /* ── capa: corpo ── */
  .divisa-banda p{font-size:18px}
  .divisa-banda small{font-size:11.5px; letter-spacing:.16em}
  .declara{font-size:17.5px; line-height:1.66}
  .numeros b{font-size:1.6rem}
  .numeros span{font-size:11.5px; letter-spacing:.08em}
  .area-d{font-size:15px; line-height:1.65}
  .mb-n{font-size:12px; letter-spacing:.12em}
  .mb-t{font-size:17px}
  .mb-c{font-size:12px}
  .pergunta{font-size:17px; line-height:1.72}
  .metodo b{font-size:16.5px}
  .metodo p{font-size:15px}
  .autor-nm{font-size:1.45rem}
  .autor-lin{font-size:15.5px}
  .autor-d{font-size:16px}
  .cv b{font-size:12px; letter-spacing:.11em}
  .cv li{font-size:15px}
  .mat-t{font-size:19px}
  .preco{font-size:1.5rem}
  .preco small{font-size:11.5px; letter-spacing:.1em}
  .mat-d{font-size:15.5px}
  .inclui li{font-size:15px}
  .mat-nota{font-size:13.5px}
  .aviso-t{font-size:12px; letter-spacing:.14em}
  .aviso{font-size:15px}
  .credito{font-size:12.5px; line-height:1.7}

  /* ── catálogo ── */
  .nota{font-size:15px}
  .controles button{font-size:12px; letter-spacing:.08em; padding:.6rem .9rem}
  .controles label{font-size:12px; letter-spacing:.06em}
  .bl-n{font-size:12px; letter-spacing:.12em}
  .bl-t{font-size:17.5px}
  .bl-conta{font-size:12px}
  .bl-d{font-size:15px}
  .dc-c{font-size:12px; letter-spacing:.05em}
  .dc-t{font-size:16.5px}
  .dc-e{font-size:11.5px; letter-spacing:.09em}
  .dc-d{font-size:15px}
  .dc-ir{font-size:12.5px; letter-spacing:.11em; padding:.7rem 1.1rem}
  .dc-falta{font-size:13px}
  .rodape{font-size:15px}

  /* ── páginas de disciplina ── */
  .card h3{font-size:12px; letter-spacing:.11em}
  .card h2{font-size:1.34rem}
  .card h4{font-size:17.5px}
  .abre{font-size:16.5px}
  .read{font-size:18.5px; line-height:1.7}
  .fonte{font-size:17px}
  .fonte .ref{font-size:13px}
  .chave{font-size:17px}
  .exercicio b{font-size:12px; letter-spacing:.13em}
  .exercicio p{font-size:17px}
  .passos button{font-size:13px; padding:.55rem .8rem}
  .passos .onde{font-size:11.5px; letter-spacing:.1em}
  .passos .regra{font-size:12.5px}
  .vaievem button{font-size:15px}
  .vaievem small{font-size:11.5px; letter-spacing:.1em}
  .tl .yr{font-size:13px}
  .tl .nm{font-size:17px}
  .tl .ob{font-size:14.5px}
  .livre li{font-size:15px}
  .livre em{font-size:13px}
  nav.abas button{font-size:15px}

  /* ── as três páginas antigas do deserto, que têm verbetes ── */
  .rot{font-size:12px; letter-spacing:.1em}
  .vb .t{font-size:17px}
  .vb .p{font-size:12px; letter-spacing:.09em}
  .diz{font-size:15px}
  .muda{font-size:15px}
  .parte h2{font-size:18px}
  .parte .lead{font-size:15px}
  .parte li{font-size:15px}
  .cnt{font-size:12.5px}
  .empty{font-size:15px}
  .pergunta{font-size:17px}
  #q{font-size:16px}
  nav button{font-size:15px}
  .ouvir span{font-size:12px; letter-spacing:.09em}

  /* ── desenhos ──
     O desenho é feito numa moldura de 470 unidades. Num telefone de 390 px
     ele encolhe para 72% e a letra miúda cai para 10,4 px. Em vez de mexer
     nas fontes de dentro (que arrastaria a geometria toda e podia colidir),
     damos-lhe largura mínima e deixamos deslizar de lado o pouco que falta.
     A legenda fica presa à esquerda para não fugir com o desenho. */
  figure.esq{overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding-left:0; padding-right:0;
    /* sem isto, o desenho corta um pedaço de letra bem na borda do
       telefone e parece a página quebrada — o degradê avisa que dá
       pra arrastar, em vez de cortar seco */
    -webkit-mask-image:linear-gradient(to right, transparent, #000 22px,
      #000 calc(100% - 22px), transparent);
    mask-image:linear-gradient(to right, transparent, #000 22px,
      #000 calc(100% - 22px), transparent)}
  figure.esq svg{min-width:430px; padding:0 .5rem; box-sizing:border-box}
  figure.esq figcaption{position:sticky; left:0; box-sizing:border-box;
    width:calc(100vw - 2.3rem); padding:.6rem 1.15rem 0}

  /* ── fundamentos ── */
  .lead{font-size:17px}
  .quadro{font-size:15px}
  .marca{font-size:12px; letter-spacing:.14em}
  h2 .n{font-size:12px; letter-spacing:.13em}
  .ref{font-size:13px}
}

/* ═══ ementa no celular ═══ */
@media (max-width:52rem){
  .ident{grid-template-columns:repeat(2,1fr)}
  .ident dd{font-size:1.05rem}
  .ementa > p{font-size:1.12rem}
  .metas li{font-size:1.08rem; padding-left:2.1rem}
  .prog span{font-size:1.06rem}
  .bibl li{font-size:1.02rem}
  .bibl li .nota{font-size:.88rem; line-height:1.55}
  .ementa h3{font-size:.7rem}
}