/* ═══════════════════════════════════════════════════════════════════
   ponta-a-ponta.css — a faixa dos serviços (e a régua do rodapé) vão
   de uma ponta à outra de QUALQUER ecrã.

   Pedido do dono, 22-set: «esta barra que diz serviços tem de ir de
   ponta a ponta de qualquer ecrã sem qualquer tipo de margem lateral».

   O desenho acaba nos 1440 (e cresce até 1680); num ecrã mais largo a
   faixa parava aí e ficavam dois ombros de tecido. Na banda estreita
   acontecia o mesmo entre 640 e 1023. A caixa da faixa estica agora
   para os dois lados o que falta até às pontas — o `--sangra` que o
   `quadro.js` já calcula — e a fita lá dentro continua a andar ao mesmo
   ritmo: vêem-se MAIS serviços, não os mesmos maiores.

   ═══ PORQUE NÃO A `sangra.css` ═══
   Faz o mesmo, mas a mais: abre também o carril dos testemunhos e as
   filas do armário e dos brindes — e estas duas NÃO estão preparadas
   (varrem de +47 a −1308 e o fim da fita ficava à vista num ecrã largo).
   E abre o corte do palco à página inteira. Aqui só sangra o que foi
   pedido, e o `quadro.js` só abre o corte à altura destas faixas.

   ═══ TRÊS CLASSES ═══
   A folha do artboard declara `.ribbon { width: 1440px }` num `<style>`
   que vem depois; com `.palco .quadro .ribbon` ganha em qualquer ordem.
   ═══════════════════════════════════════════════════════════════════ */
.palco .quadro .ribbon {
  left: calc(var(--sangra, 0) * -1px);
  width: calc((var(--qw) + var(--sangra, 0) * 2) * 1px);
}

/* A régua de cores do rodapé, na banda larga: a faixa escura do rodapé
   já vai às pontas (a tela por fora do palco), e a régua parava nos
   1680, cortada no ar. Na estreita fica: entre 640 e 1023 a faixa
   escura ainda não chega às pontas, e a régua ficava a flutuar. */
.palco--largo .quadro .rodape-regua {
  left: calc(var(--sangra, 0) * -1px);
  width: calc((var(--qw) + var(--sangra, 0) * 2) * 1px);
}

/* ═══ O PALCO ABRE OS LADOS, E SÓ OS LADOS ═══
   O palco era `overflow: hidden`: cortava a faixa na aresta do desenho.
   Passa a deixar passar na horizontal e a cortar seco em cima e em
   baixo. Quem decide o que passa pelos lados é a moldura do artboard: o
   `quadro.js` abre-lhe a margem e recorta-a com as ASAS, só à altura das
   faixas que sangram. O resto do desenho fica dentro, como estava.

   PORQUE `visible` + `clip` E NÃO `clip` COM MARGEM: a margem do `clip`
   abre os quatro lados, e o que a moldura deixa passar por baixo (o
   `<svg>` do fio, as texturas da faixa escura) passava a contar para a
   rolagem — medido a 900, 50 a 130px de tela vazia por baixo do rodapé.
   `visible` com `clip` é a única mistura de eixos que não faz do palco
   uma caixa de rolagem.

   E AINDA BEM QUE NÃO É DE ROLAGEM: um salto de âncora («Ver o que
   fazemos») rolava o próprio palco entre 1024 e 1439 e abria uma faixa
   vazia por baixo do rodapé. Com `clip` não há o que rolar — medido, o
   `scrollTop` do palco fica em 0 e rola a página.

   O `min-height: 0` é o preço de não ser de rolagem, e não se tira: uma
   caixa com `aspect-ratio` que não é de rolagem ganha altura mínima =
   conteúdo, e o conteúdo do palco é o quadro por escalar (o `transform`
   não conta para a caixa). Medido a 320: o palco passava de 5169 a 6300.

   Num navegador sem `clip` (Safari antes do 16) o palco fica `hidden`,
   como estava: a faixa pára na aresta do desenho e nada se estraga. */
@supports (overflow: clip) {
  .palco.palco {
    overflow-x: visible;
    overflow-y: clip;
    overflow-clip-margin: 0px;
    min-height: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   A FILA DO ARMÁRIO TAMBÉM VAI ÀS PONTAS (28-set, pedido do dono)

   «Esta secção de roupa a mudar em Roupa e Fardamentos deve ocupar
   sempre a página toda em todos os dispositivos.» Era a última tira de
   largura inteira que ainda parava na aresta do desenho: a 1920 ficava
   um ombro de tecido claro de cada lado, e entre os 640 e os 1023 a
   fila flutuava a meio de um ecrã vazio.

   ═══ E POR QUE É QUE ISTO NÃO ERA SÓ UMA LINHA DE CSS ═══
   A caixa alarga-se pela mesma conta das outras. O que não se podia
   alargar era a FITA: ela dava a volta com um percurso escrito em
   píxeis — `+47` a `−1308` na banda larga, `+20` a `−860` na estreita —
   e esses números são metade do conteúdo, medidos à mão. Enquanto a
   caixa foi de 1440 aguentaram; numa caixa maior o fim da fita entrava
   no ecrã e via-se o buraco.

   Agora o percurso é `−50%` da própria fita (mais o encosto do desenho,
   que fica intacto). É a mesma volta ao pixel — meia fita larga mede
   1355 e 47−1355 dá os mesmos −1308; a estreita mede 880 e 20−880 dá
   −860 — mas passa a valer seja qual for o conteúdo. E é isso que deixa
   o `encheFitas()` do `quadro.js` dobrar as peças quando a caixa cresce
   mais do que meia fita, como já fazia à faixa dos serviços.
   ═══════════════════════════════════════════════════════════════════ */
/* ═══ E O CARRIL DAS REVIEWS (28-set, pedido do dono) ═══
   «Esta grelha deve ocupar sempre de ponta a ponta — é a das reviews.»
   É a última das quatro tiras de largura inteira que faltava. Não deu
   trabalho nenhum: a fita dos testemunhos já dá a volta em `−50%`
   (`@keyframes desliza`), que é o que torna seguro alargar a caixa. */
.palco .quadro .slide,
.palco--largo .quadro .acarril,
.palco--estreito .quadro .mcarril {
  left: calc(var(--sangra, 0) * -1px);
  width: calc((var(--qw) + var(--sangra, 0) * 2) * 1px);
}