/* ═══════════════════════════════════════════════════════════════════
   telemovel.css — a letra da banda estreita, mais pequena e ao centro.

   Pedido do dono, 21-set: no telemóvel «toda a escrita está muito
   grande, tanto o título antes do título principal como o título, e não
   está tudo centrado». Quer o texto ao centro, o sobretítulo mais
   pequeno e o título principal também.

   ═══ O CENTRO VEM DA `letra.css` ═══
   A escala tipográfica da banda estreita e o eixo ao centro já estavam
   escritos na `letra.css` — só não eram carregados (o `functions.php`
   não a punha na lista). Passou a ser. Esta folha vem DEPOIS dela e só
   faz o que o dono pediu a mais: encolher os titulares e os sobretítulos.

   ═══ PORQUE É QUE HÁ `!important` ═══
   Os titulares trazem o tamanho EM LINHA no marcado gerado
   (`style="font-size: 38px"`, no <h2> ou num `.rline` lá dentro), e um
   `style=` em linha só perde para uma regra `!important`. Apanham-se
   pelo valor, e não por página: um titular de 38 passa a 29 em qualquer
   página onde apareça. Os valores são px de ARTBOARD (a Designer escala
   com a coluna, como antes) — a 390 pintam exactamente isto.

       44 → 32     38 → 29     36 → 28     34 → 27     29 → 24

   Os subtitulares das páginas legais (24) descem para 20, para não
   ficarem do tamanho do título da página (29 → 24).
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ OS TITULARES ═══ */
.palco--estreito .quadro :is(h1, h2)[style*="font-size: 44px"],
.palco--estreito .quadro :is(h1, h2) [style*="font-size: 44px"] { font-size: 32px !important; }

.palco--estreito .quadro :is(h1, h2)[style*="font-size: 38px"],
.palco--estreito .quadro :is(h1, h2) [style*="font-size: 38px"] { font-size: 29px !important; }

.palco--estreito .quadro :is(h1, h2)[style*="font-size: 36px"],
.palco--estreito .quadro :is(h1, h2) [style*="font-size: 36px"] { font-size: 28px !important; }

.palco--estreito .quadro :is(h1, h2)[style*="font-size: 34px"],
.palco--estreito .quadro :is(h1, h2) [style*="font-size: 34px"],
.palco--estreito .quadro h1 .line { font-size: 27px !important; }

.palco--estreito .quadro :is(h1, h2)[style*="font-size: 29px"],
.palco--estreito .quadro :is(h1, h2) [style*="font-size: 29px"],
.palco--estreito .quadro :is(h1, h2) [style*="font-size: 1.82rem"],
.palco--estreito .quadro .orectit { font-size: 24px !important; }

/* Os subtitulares das legais, abaixo do título da página. */
.palco--estreito .quadro .lgh2 { font-size: 20px !important; }

/* ═══ OS SOBRETÍTULOS ═══
   A linha dos quatro pontos por cima de cada titular. O artboard não
   lhe dá classe em todas as páginas; reconhece-se pelos pontos (a caixa
   flex com `gap: 3px`). Fica em versais itálicas, a 12px a 390 (e nunca
   abaixo de 11 pintados, o chão da casa), e ao centro, com os pontos. */
.palco--estreito .quadro :has(> span[style*="display: flex; gap: 3px"]) {
  justify-content: center !important;
  font-size: calc(max(0.75rem * min(var(--kt, 1), 1), 11px) / var(--kt, 1)) !important;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.3;
}
.palco--estreito .quadro :has(> span[style*="display: flex; gap: 3px"]) > :not([style*="display: flex; gap: 3px"]),
.palco--estreito .quadro :has(> span[style*="display: flex; gap: 3px"]) > :not([style*="display: flex; gap: 3px"]) * {
  font-size: inherit !important;
  letter-spacing: inherit !important;
}

/* ═══ O CORPO FICA COMO ESTAVA: 16, E A ESCALAR COM A PÁGINA ═══
   A `letra.css` punha o corpo a 17px PINTADOS em qualquer largura (e a
   entrada a 19). No telemóvel o dono achou a letra grande, e o píxel a
   mais empurrava parágrafos contra o que vem a seguir — no PRO, o
   parágrafo do herói entrava no botão «Pedir tabela profissional».

   E há uma razão mais funda: a página é um desenho em coordenadas que se
   escala inteiro. Uma letra presa aos píxeis do ecrã ocupa MAIS desenho
   num telemóvel de 320 do que num de 390, e o texto passa a crescer para
   cima do que vem a seguir — era para isso que o tema trazia guiões de
   refluxo que nunca foram carregados. Aqui, ATÉ 390, a letra escala com
   a página, como no sítio que está no ar: o desenho é o mesmo em todos os
   telemóveis (16 pintados a 390, 13 a 320, acima do chão de 11). ACIMA
   de 390 (telemóveis grandes, tablets até 1023) deixa de crescer: fica
   no tamanho do telemóvel em vez de pintar 26px a 640. O `× min(--kt, 1)`
   aqui e o `÷ --kt` da `letra.css` fazem a conta. Continua em `rem`:
   quem aumenta a letra do navegador aumenta o sítio.

   Fora do palco (rodapé fixo, aviso, acções) não há `--kt`: fica igual. */
:root {
  --c1: 1.0625rem;
  --c2: 1rem;
  --c3: 0.9375rem;
  --c4: 0.84375rem;
}
.palco--estreito {
  --c1: calc(1.0625rem * min(var(--kt, 1), 1));   /* entrada: 17 */
  --c2: calc(1rem * min(var(--kt, 1), 1));        /* corpo: 16 */
  --c3: calc(0.9375rem * min(var(--kt, 1), 1));   /* nota, rótulo: 15 */
  --c4: calc(0.84375rem * min(var(--kt, 1), 1));  /* micro: 13,5 */
}

/* ═══ AS LEGAIS: TÍTULOS E ENTRADA AO CENTRO, O TEXTO JURÍDICO À ESQUERDA ═══
   Os titulares de secção e a entrada passam ao eixo, como o título da
   página. Os parágrafos e as alíneas ficam encostados: são páginas de
   consulta, e uma lista de alíneas ao centro começa cada linha num sítio
   diferente — perde-se a leitura em coluna. */
.palco--estreito .quadro .lgsub,
.palco--estreito .quadro .lgh2,
.palco--estreito .quadro .lgh3 { text-align: center !important; }

/* ═══ AS DUAS ACÇÕES AO FUNDO ═══
   Com a escala ligada, os rótulos em Designer ficavam a 17px e o
   «Contacto» cortava-se («CONT…») em todos os telemóveis. A 13px, com o
   ícone um pouco mais perto, cabem os dois de 320 para cima, e continuam
   acima do chão de 11. */
.acoes .acoes-b { font-size: 0.8125rem; letter-spacing: 0; gap: 6px; }

/* ═══ OS DOIS SOBRETÍTULOS COMPRIDOS ═══
   «As mais compradas · personalização incluída» (Roupa) e «Os mais
   pedidos · personalização incluída» (Brindes) não cabem numa linha nos
   telemóveis mais estreitos sem descer abaixo dos 11px. Partem-se em duas,
   e a segunda cresce PARA CIMA, para o respiro que têm por cima, em vez de
   descer sobre o titular que vem logo a seguir. */
.palco--estreito .quadro #armario-mob,
.palco--estreito .quadro [style*="left: 20px; top: 802px; width: 350px; height: 30px"] {
  align-items: flex-end !important;
  text-align: center;
}