/* ==========================================================================
   Zinho Toda Hora — LP pública.
   Reset, base, landmarks, tipografia, marcadores, o arquétipo `produto`,
   o gradiente de marca parceira e o responsivo (360 / 768 / 1024 / 1440).

   NENHUM HEX PODE APARECER NESTE ARQUIVO. Toda cor sai de var(--token), e os
   tokens vivem só em tokens.css — trocar a identidade visual da LP é trocar
   linhas lá, não caçar valores aqui. A varredura entra no go-live da Fase 5.

   Este arquivo NÃO anima nada e NÃO esconde nada. O estado inicial das
   entradas vive em anim.css, sob a classe .js-anim, e é opt-in do JS
   (ANIM-04): sem JS a LP renderiza completa.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Reset */

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

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

body {
  margin: 0;
  background: var(--creme);
  color: var(--marrom);
  font-family: var(--ff-texto);
  font-weight: 600;
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  letter-spacing: var(--ls-corpo);
}

/* height:auto casa com o width/height que lp_img() traz do banco e mantém a
   proporção quando o CSS reduz a largura. O atributo continua sendo o antídoto
   de CLS (ANIM-07); isto aqui é só a consequência visual dele. */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ----------------------------------------------------- 2. Landmarks e foco */

/* O CTA fixo reserva a altura dele ESTATICAMENTE, pelo token --cta-h.
   NUNCA medir a barra por JS e aplicar o padding depois: isso é CLS garantido
   (ANIM-07, Pitfall 6). Em telas >= 1024px o token vale 0 e a reserva some
   sozinha, porque lá o CTA é card ancorado e não barra de largura total. */
main { padding-block-end: calc(var(--cta-h) + var(--sp-24)); }

/* AVISO PARA QUEM MEXER AQUI DEPOIS — LEIA ANTES DE ADICIONAR PROPRIEDADE:
   nenhum ancestral do CTA fixo pode receber transform, filter, perspective,
   backdrop-filter, dica de promoção de camada, `contain: paint|layout|strict`
   nem a propriedade que pula a renderização de conteúdo fora de tela.
   Qualquer uma delas cria containing block e converte `position: fixed` em
   `position: absolute`: o CTA para de acompanhar a rolagem e LP-09 falha EM
   SILÊNCIO, com a página parecendo perfeita. Vale para html, body, main e
   qualquer wrapper que alguém venha a introduzir. */

/* Anel DUPLO, e não outline simples: o CTA existe sobre dois fundos (creme e
   vermelho) e nenhuma cor única passa 3:1 nos dois. Claro resolve o vermelho,
   escuro resolve o creme. Nunca `outline: none` sem substituto (UI-SPEC 5.5). */
:where(a, button):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--foco-interno), 0 0 0 6px var(--foco-externo);
  border-radius: inherit;
}

/* ------------------------------------------------------------ 3. Tipografia */

.bloco__titulo {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: var(--fs-titulo);
  line-height: var(--lh-titulo);      /* 0,95 — MEDIDO nas fatias, não escolhido:
                                         as ascendentes da linha 2 tangenciam as
                                         descendentes da linha 1. Um 1.2 de
                                         default quebra o bloco tipográfico da
                                         peça inteira. NÃO AJUSTAR AQUI quando o
                                         título quebrar errado — ajustar o
                                         max-width abaixo. */
  letter-spacing: var(--ls-titulo);
  text-align: center;                 /* nas TRÊS variantes de layout: o que
                                         alterna é o lado do par, não o título
                                         (UI-SPEC 7.2, achado 3 da Fase 1) */
  margin: 0 auto var(--sp-48);
  /* É AQUI que se conserta um título que quebra errado — NUNCA no line-height,
     que é medido. Valor VARRIDO no navegador em 1280/1440/1920px: abaixo de
     940px o Prestígio e a Aviação caem para 3 linhas; a partir de 1020px o
     Catupiry sobe para 1. A janela em que os CINCO títulos saem nas 2 linhas
     da peça é 940–1000px, e 980 é o meio dela. */
  max-width: min(92%, 980px);
  /* FIDELIDADE À PEÇA APROVADA — não é enfeite tipográfico.
     O max-width acima garante o NÚMERO de linhas (2); ele não governa ONDE a
     linha quebra, e a peça aprovada fixa o ponto de quebra: cada linha fecha
     numa palavra em destaque. Sem esta declaração, 4 dos 5 títulos quebravam
     no lugar errado — medido contra as fatias no gate do design-chief:
       Moça      hoje "…COM GOSTINHO DE / INFÂNCIA."   peça "…COM / GOSTINHO DE INFÂNCIA."
       Prestígio hoje "…COM COCO PRA / DEIXAR…"        peça "…COM COCO / PRA DEIXAR…"
       Tirolez   hoje "…PROVOLONE QUE FAZ / TODA A…"   peça "…PROVOLONE / QUE FAZ TODA A…"
       Catupiry  hoje "…CREMOSIDADE DE / VERDADE!"     peça "…CREMOSIDADE / DE VERDADE!"
     `balance` reproduz os CINCO pontos de quebra da peça, idêntico em
     1440/1024/768px. Não altera a contagem de linhas, então não move o título
     em relação à parada de 30% do gradiente — mas `scripts/regua-bloco.mjs`
     confere isso a cada execução, porque a parada de 30% é o mecanismo que
     sustenta o achado 1 do design-chief.
     Onde não houver suporte a propriedade é IGNORADA e a quebra volta ao
     comportamento de hoje: degradação aditiva, sem quebrar layout.
     A alternativa seria um marcador de quebra no conteúdo — um TERCEIRO
     marcador, que o UI-SPEC 6.2 fecha em dois e que a Fase 3 teria de ensinar
     ao cliente. Esta linha custa zero e sobrevive à edição do cliente. */
  text-wrap: balance;
  position: relative;
  z-index: 2;                         /* acima de qualquer pão */
}

.bloco__legal {
  font-family: var(--ff-texto);
  font-size: var(--fs-legal);         /* piso de 13px = RDC ANVISA 26/2015.
                                         Não é preferência, é legibilidade de
                                         declaração de alergênico */
  line-height: var(--lh-legal);
  letter-spacing: var(--ls-legal);
  color: var(--marrom);               /* 5,16:1 sobre creme. NUNCA uma cor
                                         reduzida "porque é texto legal" */
  text-align: center;
  /* --sp-128 e não --sp-96: MEDIDO no navegador. O que decide se o legal cai
     sobre creme chapado não é a margem, é a razão (altura do legal + padding
     inferior) / (altura do bloco) — ela precisa ficar abaixo de 12% para o
     parágrafo inteiro entrar na faixa 88–100%. Aumentar a margem cresce o
     denominador sem crescer o numerador; é o único dos dois lados que se pode
     empurrar sem encostar no texto. Com --sp-96 a régua dava 87,7% em 360px e
     87,8% em 768px — dentro da interpolação, não do creme chapado. */
  margin: var(--sp-128) auto 0;
  max-width: 78ch;
  position: relative;
  z-index: 2;                         /* nenhum pão passa por cima do legal */
}

/* Marcadores: dois eixos INDEPENDENTES que se combinam no aninhamento que o
   título da Moça produz — a palavra inteira a 1,45x e só um pedaço em laranja.
   Aplicar cor em todo destaque produziria 10 palavras coloridas onde a peça
   aprovada tem 4. */

/* [[ ]] — muda o CORPO. A COR fica INALTERADA, de propósito. */
.d { font-size: var(--fs-destaque); }

/* {{ }} — muda a COR. O CORPO fica INALTERADO: 1em resolve contra o pai, então
   dentro de um [[ ]] o texto continua a 1,45x.
   O piso de 24px torna MECÂNICA a premissa de "texto grande" que sustenta o
   alvo de 3:1 do laranja Zinho. Um {{ }} a 16px seria reprovação de
   acessibilidade, e o max() impede que ele exista (UI-SPEC 6.3). */
.dm {
  color: var(--bloco-destaque, var(--destaque-zinho));
  font-size: max(1em, 24px);
}

/* ------------------------------------------------- 4. O bloco e a contenção */

/* `overflow-x: hidden` no body é CURATIVO: ele esconde o sintoma e cria um
   contêiner de rolagem no elemento errado. A CAUSA do scroll horizontal é o pão
   posicionado para fora — e é o PRÓPRIO bloco que o corta (LP-11, UI-SPEC 13). */
.bloco {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: var(--bloco-h-min);
  /* Padding inferior MENOR que o superior, de propósito: ele é numerador da
     razão que decide se o texto legal cai na faixa 88–100% de creme chapado.
     Cada pixel a mais aqui empurra o legal para dentro do gradiente. */
  padding: var(--sp-96) var(--sp-32) var(--sp-32);
  background: var(--creme);
}

/* AS PARADAS DE 30% E 88% NÃO SÃO ESTÉTICAS — SÃO O MECANISMO DE CONFORMIDADE.
   Elas são o que garante que o título (faixa 0–25%) e o texto legal (faixa
   88–100%) caiam SEMPRE sobre creme chapado, e é isso que dispensa qualquer
   alteração nas cores licenciadas das marcas parceiras. O amarelo Tirolez puro
   tem 1,10:1 sobre o creme e continua puro porque nenhum caractere da LP fica
   sobre ele.
   MEXER NESSAS PARADAS REABRE O PROBLEMA DE CONTRASTE e cria exposição
   contratual com as licenciadoras. UI-SPEC 5.4 e 10 achado 1.
   A parada de creme em 88% é explícita e não implícita: sem ela, o trecho
   88–100% seria interpolação entre a cor da marca e o creme, e o legal cairia
   sobre um fundo tingido — que é exatamente o que o achado 3 proíbe. */
.bloco--produto {
  background: linear-gradient(180deg,
    var(--creme)             0%,
    var(--creme)            30%,
    var(--bloco-grad-para)  48%,
    var(--bloco-grad-para)  76%,
    var(--creme)            88%,
    var(--creme)           100%);
}

/* Gradiente degenerado (a Moça tem creme dos dois lados no PDF) vira creme
   chapado. Um linear-gradient de uma cor só é banda de dithering de graça. */
.bloco--produto.bloco--sem-gradiente { background: var(--creme); }

/* ------------------------------------------ 5. Par packshot / pessoa comendo */

.bloco__par {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Ajuste de lançamento (2026-08-07): era --sp-48 (48px). Nas fatias
     03-07-produto-*.png o packshot e a pessoa quase se tocam — a pessoa
     segura o pãozinho bem junto da embalagem. gap:0 aproxima ao máximo sem
     sobrepor de verdade (que exigiria margem negativa + z-index, risco maior
     para o tempo disponível hoje); o que resta de distância visual vem da
     margem transparente das próprias imagens enviadas, não do CSS. */
  gap: 0;
  position: relative;
  /* Ajuste de lançamento (2026-08-07): explícito, para o pão da direita poder
     nascer ATRÁS do par (ver .bloco--produto .pao--2 abaixo). Sem isto o par
     ficaria em z-index:auto e um pão com z-index:0 ainda pintaria por cima,
     porque auto/static perde para QUALQUER z-index numérico explícito de um
     elemento posicionado próximo no mesmo contexto de empilhamento. */
  z-index: 2;
}

/* A diferença entre as duas variantes é UMA declaração, e o DOM não muda: a
   ordem de leitura de teclado e de leitor de tela segue a ordem visual nas
   duas (UI-SPEC 15). É por isso que a válvula de escape do ROADMAP ("entregar
   só um layout") não economiza tempo e não deve ser acionada. */
.bloco--packshot_esquerda .bloco__par { flex-direction: row; }
.bloco--packshot_direita  .bloco__par { flex-direction: row-reverse; }
.bloco--centralizado      .bloco__par { justify-content: center; }

/* Larguras em min(%, px): o % mantém a proporção da fatia em telas largas e o
   teto em px impede que o packshot vire outdoor em 2560px. Sem `flex: 1` de
   propósito — o par é centralizado, não esticado. */
.bloco__packshot {
  flex: 0 0 auto;
  /* Ajuste de lançamento (2026-08-07): era min(34%,420px). As fatias mostram o
     packshot maior em relação à pessoa do que a proporção anterior produzia. */
  width: min(42%, 500px);
}

.bloco__pessoa {
  flex: 0 0 auto;
  /* Ajuste de lançamento (2026-08-07): era min(38%,470px). */
  width: min(46%, 540px);
}

/* -------------------------------------------------- 6. Pães em parallax */

/* `.paes` é invólucro de CONTAGEM, não de posicionamento: ele não tem altura
   (todos os filhos são absolutos) e existe para que `:nth-of-type` conte só
   pães. Com os pães soltos dentro do <section>, o div do par entraria na
   contagem e a regra de mobile esconderia 2 de 3 pães em vez de 1. */
.paes {
  position: static;
  pointer-events: none;
}

.pao-parallax {
  position: absolute;
  top: 40%;
  right: -4%;
  width: clamp(90px, 16vw, 240px);
  z-index: 1;
  pointer-events: none;
}

/* Posições MEDIDAS na fatia 05-produto-tirolez.png: um pão saindo pela borda
   esquerda na metade do bloco, um pão grande saindo pela borda direita mais
   abaixo e um pão menor à direita, alto e discreto.
   NENHUM `top + altura` pode entrar na faixa 88–100%: é onde vive o texto legal
   e o achado 3 do design-chief proíbe qualquer coisa por cima dele.
   Ajuste de lançamento (2026-08-07): left/right puxados para dentro (eram
   -5%/-6%/7%). Com o par packshot+pessoa mais compacto (--sp-8, acima), os
   pães nas bordas antigas ficavam soltos demais, longe de qualquer outro
   elemento — o "top" de cada um não mudou, só a distância até a borda. */
.pao--1 {
  top: 33%;
  left: 6%;
  right: auto;
  width: clamp(110px, 19vw, 280px);
}

.pao--2 {
  top: 46%;
  right: 4%;
  left: auto;
  width: clamp(130px, 24vw, 350px);
}

/* Ajuste de lançamento (2026-08-07): o pão da direita (.pao--2, right:4%)
   ficava NA FRENTE do elemento que sobra naquele lado — a pessoa quando o
   layout é packshot_esquerda, o próprio packshot quando é packshot_direita
   (row-reverse: quem entra primeiro no DOM pinta à direita). `right:` não
   inverte com o layout, então os dois casos precisam da mesma correção.
   `.bloco__par` agora tem z-index:2 explícito (acima); este seletor
   sobrepõe o z-index:1 herdado de `.pao-parallax` só para o pão--2 dos
   blocos de produto — os outros dois pães (--1 e --3) continuam na frente,
   como a fatia mostra. Escopado a `.bloco--produto` de propósito: o pão
   pequeno do topo e o do rodapé têm razão documentada para ficar na frente
   (ver os comentários de cada um) e não devem herdar esta mudança. */
.bloco--produto .pao--2 {
  z-index: 0;
}

.pao--3 {
  top: 20%;
  right: 20%;
  left: auto;
  width: clamp(70px, 12vw, 170px);
}

/* --------------------------------------------------------- 7. Responsivo */

/* < 768px — o PDF não tem versão mobile (Pitfall 12) e ~80% do tráfego de
   campanha FMCG é celular. Estas regras são NORMATIVAS (UI-SPEC 13). */
@media (max-width: 767px) {
  .bloco { padding: var(--sp-64) var(--sp-16) var(--sp-24); }

  .bloco__titulo {
    margin-bottom: var(--sp-24);
    max-width: 100%;
  }

  /* Mesma razão do desktop, com os números do celular: com --sp-64 a régua em
     360px dava 87,7%, e o legal encostava na interpolação do gradiente. */
  .bloco__legal { margin-top: var(--sp-96); }

  /* D-08: empilha título -> PESSOA -> packshot. A pessoa é o que gera desejo e
     vem primeiro; o packshot é reconhecimento de marca e funciona logo abaixo.
     A sobreposição dos dois em escala reduzida foi DESCARTADA (D-10): em 360px
     os dois viram manchas e o packshot fica ilegível.
     A ordem é ÚNICA nas duas variantes de layout — é o que garante que o
     cliente da Fase 3 não consiga quebrar o mobile trocando o layout. */
  .bloco__par,
  .bloco--packshot_esquerda .bloco__par,
  .bloco--packshot_direita .bloco__par {
    flex-direction: column;
    gap: var(--sp-32);
  }

  .bloco__pessoa {
    order: 1;
    width: 78%;
  }

  .bloco__packshot {
    order: 2;
    width: 62%;
    margin-top: calc(var(--sp-24) * -1);
  }

  /* Divergência 7 do UI-SPEC 11: 2 pães abaixo de 768px. Corta peso de rede e
     custo de GPU e mantém o efeito legível em 360px. */
  .paes .pao:nth-of-type(n+3) { display: none; }

  .pao--1 {
    top: 30%;
    left: -12%;
    width: clamp(96px, 34vw, 170px);
  }

  .pao--2 {
    top: 54%;
    right: -14%;
    width: clamp(110px, 40vw, 200px);
  }
}

/* 768–1023px — o par encolhe. Escala ESTÁTICA por LARGURA e NÃO por
   `transform: scale()`: o canal de transform de .bloco__packshot e
   .bloco__pessoa pertence à animação de entrada (.rev) do plano 02-06, e o
   estado inicial `.js-anim .rev { transform: translateY(...) }` apagaria
   qualquer scale declarado aqui. Dois donos no mesmo canal é falha silenciosa,
   e é a mesma armadilha que criou o contrato de DOM de dois níveis dos pães. */
@media (min-width: 768px) and (max-width: 1023px) {
  /* O par menor encurta o bloco, e um bloco curto empurra o título para baixo
     em PERCENTUAL — MEDIDO: com o padding de --sp-96 o título terminava a
     29,45% da altura, a 4px da parada de gradiente de 30%. Uma palavra a mais
     no título e o cliente da Fase 3 punha texto sobre a cor da licenciada sem
     perceber. Menos padding no topo devolve a folga, e é mais fiel à fatia:
     na peça o título começa a ~2,4% da altura do bloco. */
  .bloco { padding-block-start: var(--sp-64); }

  .bloco__par { gap: var(--sp-32); }

  .bloco__packshot { width: min(28%, 300px); }

  .bloco__pessoa { width: min(31%, 340px); }
}

/* ============================================================================
   A PARTIR DAQUI: os quatro arquétipos que faltavam — topo, momento, sub-topo
   e rodapé. Regras posicionadas DEPOIS das media queries genéricas de
   propósito: `.bloco--topo` e `.bloco` têm a mesma especificidade (1 classe),
   então o desempate é por ordem no arquivo. Cada arquétipo redeclara o que
   precisa nas próprias media queries, no fim deste arquivo.

   REGRA HERDADA DO 02-06, VÁLIDA PARA TUDO O QUE VEM ABAIXO:
   `.js-anim .rev` sobrescreve a propriedade `transform` INTEIRA. Nenhum
   elemento com `.rev` pode declarar `transform` em breakpoint algum — o canal
   pertence à animação de entrada. Escalar é por `width`; posicionar é por
   `top`/`inset`. Isto já mordeu este projeto três vezes.
   ============================================================================ */

/* --------------------------------------------------- 8. Topo e momento ---- */

/* Coluna flex, e o motivo é MEDIDO: `.bloco` tem `min-height: --bloco-h-min`
   (840px em 1024px de largura) e o conteúdo do topo é mais curto que isso na
   maioria das telas. Sem a coluna, o texto legal parava no MEIO do bloco —
   57,6% da altura em 1024px, 66,4% em 1440px — com um vazio embaixo. Na fatia
   01-topo.png ele é rodapé-esquerdo, encostado na base. O `margin-block-start:
   auto` lá embaixo é o que o empurra, e só funciona dentro de um flex/grid.

   NÃO usar `gap` aqui: os invólucros `.paes` são itens flex de altura zero
   (todos os filhos deles são absolutos), e um `gap` renderia espaço morto entre
   eles — 192px de vazio no topo com dois conjuntos de pães. O respiro do legal
   vem do padding dele, que é local e não multiplica. */
.bloco--topo {
  /* Ajuste de lançamento (2026-08-07): era --sp-96 --sp-64. A fatia 01-topo.png
     mostra "CHEGOU!" começando bem próximo do topo do quadro — --sp-96 (96px)
     de respiro estava puxando o conteúdo inteiro para baixo, sem ganho visual
     nenhum (não existe elemento fixo acima que precise dessa folga). */
  padding-block: var(--sp-64) var(--sp-64);
  display: flex;
  flex-direction: column;
}

/* Fundo do momento (papel `fundo`, decorativo, ratio 16:9). Camada full-bleed
   ATRÁS de tudo: abaixo dos pães (.paes/.pao-parallax = z-index:1) e abaixo do
   conteúdo (.topo__grade = z-index:2). `.bloco--topo` já é
   `position:relative;overflow:hidden` via `.bloco` — a imagem nunca vaza da
   caixa do bloco, mesmo sendo maior que ela em algum eixo. `object-fit:cover`
   porque o ratio do upload (16:9) raramente bate pixel a pixel com a altura
   real do bloco, que varia com o conteúdo. */
.bloco__fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.bloco__fundo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A GRADE É UM INVÓLUCRO, E NÃO O PRÓPRIO <header>. O motivo é mecânico: os
   invólucros `.paes` são filhos diretos do bloco, e num container de grid eles
   virariam ITENS — ocupando células e abrindo uma linha inteira de gap entre o
   lockup e o texto legal, apesar de não terem altura nenhuma.
   Como invólucro, a grade também é a mesma peça nos dois ramos do partial (com
   momento ativo e sem), o que mantém um CSS só para os dois casos. */
.topo__grade {
  display: grid;
  gap: var(--sp-48);
  /* Ajuste de lançamento (2026-08-07): era `center`. Agora que o legal mora
     dentro de .topo__coluna-logo (junto do título), essa coluna quase sempre
     fica MAIS BAIXA que o family_shot. `center` centralizava o par
     título+legal no meio da altura do family_shot, afastando o logo do topo
     do bloco. `start` alinha as duas colunas pelo topo — o logo nasce na
     mesma altura que os pacotes, como na fatia 01-topo.png. */
  align-items: start;
  position: relative;
  z-index: 2;                         /* acima de qualquer pão */
}

/* Coluna 1 do grid do topo: título + legal empilhados, um bloco só. É o que
   faz o legal seguir a altura REAL do logo em vez da altura do family_shot —
   ver o comentário em includes/blocos/bloco-topo.php e bloco-momento.php. */
.topo__coluna-logo {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  /* Ajuste de lançamento (2026-08-07) — HISTÓRICO, para quem for entender a
     régua git blame: esta coluna passou por `55% 45%` (percentual fixo,
     sobrava espaço morto), depois `max-content` (a largura virava "o que o
     conteúdo mais largo precisar" — e o conteúdo mais largo era o texto
     legal, não o logo, então empurrar a coluna para a direita via margem
     movia uma caixa invisível bem mais larga que o logo visível, sem fechar
     a distância de verdade).
     A versão final usa largura FIXA: 500px, medido para caber o lockup
     (480px de teto, revisão 5 — 440px deixava o logo "espremido" perto do
     family_shot maior) mais uma folga pequena. Determinístico — não
     depende de COMO o navegador calcula max-content para um flex column
     com filhos esticados, que se mostrou imprevisível na prática. gap:0
     porque não sobra nada para espaçar: a proximidade toda vem da largura
     fixa.
     Revisão 6: coluna 2 deixou de ser `1fr`. 1fr FORÇA a coluna a ocupar
     TODO o espaço restante do grid — como o family_shot dentro dela tem
     teto de 760px (regra abaixo) mas o conteúdo em si (block-level, sem
     centralização própria) nasce colado à ESQUERDA da própria coluna,
     sobrava um vão morto à direita, e a composição inteira lia como
     "alinhada à esquerda" em vez de centralizada no bloco.

     TENTATIVA DESCARTADA, registrada para não repetir o erro: colunas
     100% fixas (500px 760px) + `width:max-content` + `margin-inline:auto`
     no grid. Funciona LINDO a partir de ~1330px — mas de 1024px a ~1300px
     (largura real de notebook/janela não maximizada) 500+760=1260px é MAIOR
     que o espaço disponível, e como track de largura fixa não encolhe,
     `margin-inline:auto` zera (não hà sobra pra centralizar) e o excesso
     é cortado pela direita — o mesmo bug de corte de duas revisões atrás,
     só que reaparecendo numa faixa de largura diferente. Medido, não
     suposto: confirmado com `bodyScrollWidth==innerWidth` mas
     `blocoFamily.right` passando do `innerWidth` em 1024-1300px.

     SOLUÇÃO: manter o grid ocupando 100% do bloco (não `max-content`) e
     usar `justify-content:center` — a propriedade do CONTAINER de grid que
     centraliza as TRACKS dentro do espaço sobrando, sem exigir que o grid
     em si tenha largura própria. Coluna 2 vira `minmax(0, 760px)`: cresce
     até 760px quando sobra espaço (o caso comum), mas pode encolher até 0
     em vez de estourar quando o bloco é mais estreito que 1260px — nesses
     casos o family_shot (100% da coluna) encolhe junto, exatamente como
     encolhia antes desta revisão, e nada é cortado. */
  .topo__grade {
    grid-template-columns: 500px minmax(0, 760px);
    justify-content: center;
    gap: 0;
  }
}

/* UNICA excecao da LP (escrito sem acento de proposito — e criterio de aceite
   por grep): o titulo do topo NAO e centralizado. Em todos os outros
   arquetipos o titulo e `text-align: center`, e isso e o achado 3 da Fase 1.
   Aqui a fatia 01-topo.png e inequivoca: o lockup encosta na margem esquerda.
   Nao "corrigir" isto para centralizado. */
.bloco--topo .bloco__titulo {
  text-align: left;
  max-width: 100%;
  margin: 0;
}

/* O lockup é a marca registrada em ARTE — elipse vermelha com lettering
   amarelo — e por isso é imagem e não fonte. Escala por LARGURA: ele vive
   dentro de um `.rev`, e o canal de transform pertence à animação. Mesma lição
   que converteu o `scale(0.8)` do par de produto em `width` no plano 02-05.
   Ajuste de lançamento (2026-08-07): teto reduzido de 620px para 440px —
   coluna 1 é `max-content` (acima), então encolher o lockup libera largura
   REAL para a coluna do family_shot, em vez de só espaço morto.

   REVISÃO FINAL, depois de três tentativas quebradas: width:150%/130% do
   .bloco__family + margem negativa parecia certo a 1440px e a 1920px, mas
   media POR VIEWPORT confirmou que existe uma faixa no meio (~1536-1600px,
   a escala de 125% do Windows num monitor 1920px é EXATAMENTE isso) onde a
   imagem passava do próprio bloco, comia o padding direito e era cortada
   bem na borda — visualmente idêntico a "cortado do lado direito da tela".
   overflow:hidden do .bloco sempre conteve o vazamento (nunca criou scroll
   de página), mas o corte em si era real e feio.
   A escolha agora é a única que não depende de acertar um número mágico
   por faixa de largura: o family_shot ocupa 100% da PRÓPRIA coluna, nunca
   mais — geometricamente impossível de cortar, em qualquer largura. Todo o
   ganho de tamanho vem de encolher a coluna 1 (o lockup), não de estourar
   a coluna 2. */
.lockup { width: min(100%, 480px); }

.bloco__family {
  position: relative;
  z-index: 2;
}

@media (min-width: 1024px) {
  /* Ajuste de lançamento (2026-08-07, revisão 5): a coluna 2 é 1fr — em
     telas largas (1728px+) isso deixa MUITO espaço disponível, e como o
     family_shot ocupa 100% da própria coluna (decisão anterior, pra nunca
     cortar), ele crescia até esse espaço inteiro: perto do tamanho natural
     da imagem (1108px), desproporcional ao logo ao lado. Um teto absoluto
     devolve o equilíbrio sem reabrir o risco de corte — 100% continua
     sendo o máximo, `max-width` só baixa esse teto, nunca aumenta. */
  .bloco__family { max-width: 760px; }
}

/* Só existe quando o momento NÃO tem arte de título (ver bloco-momento.php).
   Com arte, a linha de apoio já faz parte dela e este parágrafo não é emitido. */
.momento__subtitulo {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: var(--fs-titulo);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-titulo);
  margin: var(--sp-24) 0 0;
  position: relative;
  z-index: 2;
}

/* Texto legal do topo: rodapé-ESQUERDO na fatia, não centralizado como nos
   blocos de produto. E sem a margem de --sp-128 daqueles: aqui não existe
   parada de gradiente a respeitar, porque o topo é creme chapado.
   Ajuste de lançamento (2026-08-07): a margem ERA `auto`, o que cola o legal
   na base da coluna flex — em `--bloco-h-min` até 940px, com grade+pães bem
   mais baixos que isso, o legal nascia longe do logo, na fatia 01-topo.png
   ele fica logo abaixo. Trocado por uma margem fixa: o legal passa a seguir
   o conteúdo, e o espaço sobrando (quando o bloco é mais alto que o
   conteúdo) vira respiro DEPOIS do legal, não um vão no meio do bloco. */
.bloco--topo .bloco__legal {
  text-align: left;
  margin: var(--sp-48) 0 0;
  max-width: 92ch;
}

@media (min-width: 1024px) {
  /* Ajuste de lançamento (2026-08-07): 92ch (~700px neste corpo de texto) é
     bem mais largo que o lockup (440px) — como as duas coisas moram na
     mesma coluna `max-content` (.topo__coluna-logo), era o LEGAL quem
     dizia o quão larga a coluna ficava, não a logo. O deslocamento para a
     direita movia a coluna inteira, mas a logo — mais estreita — não
     chegava visualmente tão perto do family_shot quanto a caixa invisível
     sugeria. Travar o legal na mesma largura do lockup alinha as DUAS
     coisas ao mesmo limite direito: o texto volta a quebrar em mais linhas
     aqui, e é a troca certa — a proximidade do logo é o pedido mais
     recente e mais específico. Revisão 5: 480px, acompanhando o novo teto
     do lockup. */
  .bloco--topo .bloco__legal { max-width: 480px; }
}

/* Posições lidas na fatia 01-topo.png: um pão grande saindo pela borda inferior
   esquerda, um pequeno e alto entre o lockup e o family_shot, e um médio saindo
   pela direita mais abaixo.
   DOIS CONJUNTOS convivem neste <header> — os pães do topo e os do momento
   ativo — e nenhum par pode nascer no mesmo ponto: dois pães sobrepostos leem
   como um pão só, mais escuro, e o parallax deles se anula na tela. */
.bloco--topo .paes .pao--1 { top: 58%; left: -9%; right: auto; width: clamp(120px, 21vw, 300px); }
.bloco--topo .paes .pao--2 { top: 2%; left: 33%; right: auto; width: clamp(70px, 11vw, 150px); }
.bloco--topo .paes .pao--3 { top: 74%; right: -5%; left: auto; width: clamp(90px, 15vw, 210px); }

.bloco--topo .paes--momento .pao--1 { top: 28%; right: -7%; left: auto; width: clamp(100px, 17vw, 240px); }
.bloco--topo .paes--momento .pao--2 { top: 66%; left: 24%; right: auto; width: clamp(80px, 13vw, 180px); }
.bloco--topo .paes--momento .pao--3 { top: 10%; left: -8%; right: auto; width: clamp(90px, 15vw, 210px); }

/* --------------------------------------------------------- 9. Sub-topo ---- */

/* O mais simples dos cinco: título centralizado sobre pães, creme chapado.
   Sem packshot, sem pessoa, sem banda de gradiente. */
/* Título centralizado nos DOIS eixos. O horizontal já vem de `.bloco__titulo`;
   o vertical precisa da coluna flex, porque `min-height: --bloco-h-min` deixa
   este bloco bem mais alto que o conteúdo dele e sem isto o título ficaria
   grudado no topo, com um terço de creme vazio embaixo. Na fatia
   02-sub-topo.png a chamada está no meio da banda. */
.bloco--sub-topo {
  padding-block: var(--sp-64);
  /* Ajuste de lançamento (2026-08-07): min-height PRÓPRIO, menor que o
     --bloco-h-min compartilhado (chega a 940px em telas largas). O sub-topo
     é só um título de 2 linhas + pães — nada aqui depende da altura para
     matemática de contraste (ao contrário dos blocos de produto, onde
     --bloco-h-min alimenta a régua de 88-100% do gradiente, achado 3 do
     design-chief). Reduzir só este bloco fecha o vão entre o topo e o
     sub-topo sem mexer no token compartilhado pelos outros 7 blocos. */
  /* Revisão do mesmo dia: 680px de teto cortava o .pao--4 (top:58% +
     largura até 420px = 814px de conteúdo numa caixa de 680px, com
     overflow:hidden herdado de .bloco). 760px + o ajuste de .pao--3/--4
     abaixo resolvem os dois lados: cabe, e o vão continua menor que os
     940px originais. */
  min-height: clamp(420px, 62vw, 760px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* SUPERADA em 2026-08-08 (quick 260808-ptd) — a decisão original fica abaixo,
   registrada, porque continua explicando de onde veio o tamanho antigo:

     "--fs-hero, e NÃO --fs-titulo. Conferido em `00-composicao-completa.png`:
      na peça a chamada do sub-topo tem o mesmo peso visual do 'EXPERIMENTE!'
      do rodapé, e as duas são visivelmente maiores que os títulos dos cinco
      blocos de produto. Não é um quinto tamanho — é o mesmo token do hero
      (UI-SPEC §3.2)."

   MOTIVO DA SUPERAÇÃO: a fatia `02-sub-topo.png` foi reconferida contra o site
   em produção e o usuário decidiu que o sub-topo precisa ser MAIOR que o hero
   compartilhado. Medido na fatia, o texto ocupa ~67% da largura do bloco; a
   implementação com --fs-hero entregava 33% em 1440px e 51% em 390px. O peso
   visual "igual ao EXPERIMENTE!" era leitura de uma composição em página de
   PDF, não da banda larga que o bloco ocupa na LP contínua.

   O QUE TORNA ISTO SEGURO: `.bloco--sub-topo .bloco__titulo` e `.bloco__hero`
   (rodapé, §10) são seletores INDEPENDENTES — eles só COINCIDIAM em apontar
   para o mesmo token. Dar tamanho próprio a este NÃO muda o "EXPERIMENTE!",
   que continua em var(--fs-hero), e `tokens.css` não foi tocado (8 blocos
   dependem dele). Verificado por medição: font-size computado do hero do
   rodapé idêntico antes e depois (40px em 390px, 96px em 1440px).

   max-width em `em`, e não em px: é o max-width que garante as DUAS LINHAS da
   fatia ("TÁ NA HORA" / "DO PÃOZINHO!"), e o limiar de quebra ANDA JUNTO com o
   tamanho da fonte. Medido: a frase inteira numa linha ocupa ~9,4em e a linha
   mais longa ~5em, então qualquer valor entre 5em e 9,4em produz 2 linhas em
   TODOS os viewports — um teto em px acertaria 1440px e entregaria uma linha
   só em 768px. Conserta-se a quebra AQUI, nunca no line-height, que é medido.

   Sem margem inferior: no sub-topo não há nada depois do título, e os --sp-48
   herdados deslocariam o texto para cima do centro óptico do bloco. */
/* line-height PRÓPRIO desde 2026-08-09 (quick 260809-fx2). A frase acima —
   "nunca no line-height, que é medido" — continua verdadeira para a QUEBRA de
   linha, e é por isso que ela fica registrada. O que mudou é que a medição de
   0.92 (--lh-hero) foi feita COM A ANTON, a substituta. A CitrusGothic, que
   chegou em 07/08, tem o til do "Ã" mais alto; somado ao font-size ampliado
   deste seletor (quick 260808-ptd, o único da LP com tamanho próprio acima do
   hero), o til de "PÃOZINHO" na linha 2 invadia o "N" de "NA" na linha 1 —
   medido com perfil de tinta, sem NENHUMA linha de pixel vazia entre as duas
   em 390px e em 1440px.

   POR QUE A FATIA NÃO DENUNCIA ISSO: medida em 02-sub-topo.png, a peça
   aprovada usa avanço 226px sobre maiúscula de 206px, ou seja line-height
   ~0.909 — praticamente o 0.92 que estava aqui. Na fatia o til não encosta
   porque cai embaixo de um ESPAÇO de palavra da linha 1; na LP, com outra
   largura de coluna, ele cai embaixo de uma letra. O defeito é de posição
   horizontal, e o único controle disponível é o vertical.

   ESCOPO: só este seletor. --lh-hero e --lh-titulo em tokens.css ficam
   intocados — os 5 blocos de produto também têm acento na segunda linha
   ("INFÂNCIA", "DIFERENÇA") e NÃO têm o problema, porque nenhum deles usa
   font-size ampliado. Mexer no token mexeria nos 8 blocos para corrigir 1. */
.bloco--sub-topo .bloco__titulo {
  font-size: clamp(52px, 9.2vw, 126px);
  line-height: 1.02;
  letter-spacing: var(--ls-hero);
  max-width: min(92%, 6.5em);
  margin-bottom: 0;
}

/* 4 pães — é o único arquétipo com quatro, e é por isso que a tabela de
   amplitudes de `_paes.php` tem um índice 3. Posições da fatia 02-sub-topo.png:
   dois grandes em cima, um saindo por cada borda; dois embaixo, o da direita
   bem maior. O título respira no meio. */
/* Posições reconferidas contra a fatia em 2026-08-08 (quick 260808-ptd). Na
   fatia os pães ENCOSTAM nas letras e passam por trás delas; o que estava no
   ar deixava 168 a 325px de creme vazio entre cada pão e o texto em 1440px,
   porque as posições vieram de uma fatia quase quadrada (1553x1210) aplicada
   a uma banda de 1440x760. Sobreposição pão/texto é o ALVO, não defeito — o
   pão passa por trás do título de propósito (decisão da Fase 2). */
.bloco--sub-topo .paes .pao--1 { top: 2%; left: -2%; right: auto; width: clamp(140px, 28vw, 380px); }
.bloco--sub-topo .paes .pao--2 { top: 2%; right: 9%; left: auto; width: clamp(150px, 28vw, 390px); }
/* top e width ajustados na revisão do mesmo dia — o --pao--4 (o maior,
   150-420px) estourava a base do bloco depois que .bloco--sub-topo ganhou
   min-height próprio, mais baixo que o --bloco-h-min original: a 58% de
   680px + 420px de altura, o pão passava 134px do fim da caixa e
   `.bloco{overflow:hidden}` cortava a ponta. top mais alto e teto de
   largura menor tiram a sobra nos dois lados da conta. */
/* Reconferência de 2026-08-08: `top` continua sendo a variável que impede o
   corte pela base (a conta acima segue valendo), mas `left`/`right` andaram
   para dentro. Conferido na medição: pao--3 fecha em 92,8% e pao--4 em 92,7%
   da altura do bloco — os dois com folga até os 100% do overflow:hidden. */
.bloco--sub-topo .paes .pao--3 { top: 52%; left: 11%; right: auto; width: clamp(125px, 25vw, 320px); }
.bloco--sub-topo .paes .pao--4 { top: 44%; right: 12%; left: auto; width: clamp(150px, 27vw, 370px); }
/* Ajuste de lançamento (2026-08-07): o cliente subiu um 5º pão pelo admin —
   `config/blocos.php` permite até 10 (`'pao' => max 10`), mas este arquétipo
   só tinha regra para 4. Sem posição própria, o 5º caía no default de
   `.pao-parallax` (top:40%;right:-4%), bem em cima do `.pao--4` (top:58%;
   right:6%) — o "pão em cima do outro do lado direito". Posicionado na
   parte superior, à esquerda de .pao--2, para não recriar a colisão.
   Revisão do mesmo dia: subido de 12% para 2%, mais perto do topo.
   Reconferência de 2026-08-08: encostado no topo (0%) e um pouco maior — na
   fatia o pão central superior é cortado pela borda de cima do bloco. */
.bloco--sub-topo .paes .pao--5 { top: 0%; left: 34%; right: auto; width: clamp(90px, 16vw, 220px); }

/* ---------------------------------------------------------- 10. Rodapé ---- */

/* --sp-128 é o respiro mais alto da LP (UI-SPEC §2): é o fim da peça, e o
   fechamento precisa de ar antes e depois. Coluna flex centralizada pela mesma
   razão do sub-topo — o bloco herda `min-height` e o conteúdo é mais curto. */
.bloco--rodape {
  /* Ajuste de lançamento (2026-08-07): topo reduzido de --sp-128 para --sp-64.
     O respiro "mais alto da LP" continua valendo no FIM — é o último bloco da
     página, e o comentário original ("ar antes e depois") tratava os dois
     lados como iguais. O pedido foi reduzir especificamente a distância vinda
     do Catupiry (o bloco de produto anterior); o padding de baixo, que não
     tem vizinho para encostar, fica como estava. */
  padding-block: var(--sp-64) var(--sp-128);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* O MAIOR TEXTO DA LP — `--fs-hero`, não `--fs-titulo`.
   Continua sendo um <h2>: nível de heading é hierarquia, não tamanho
   (UI-SPEC §15). O único <h1> da página é o do topo. */
.bloco__hero {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
  margin: 0 0 var(--sp-48);
  position: relative;
  z-index: 2;
}

/* TRÊS COLUNAS: texto / pessoa / texto. O `auto` do meio deixa a pessoa mandar
   na própria largura e os dois textos dividirem o que sobra — é o que mantém a
   simetria da fatia 08-rodape.png mesmo quando um dos textos é mais longo que
   o outro, que é o que vai acontecer assim que o cliente editar. */
.rodape__trio {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-48);
  position: relative;
  z-index: 2;
}

/* Sem pessoa cadastrada — o caso do seed — a coluna do meio não existe. Sem
   esta regra os dois textos cairiam nas colunas 1 e 2 e o rodapé ficaria torto
   para a esquerda, com um terço de vazio à direita. */
.rodape__trio--sem-pessoa { grid-template-columns: 1fr 1fr; }

/* SUPERADA em 2026-08-09 (quick 260809-fx2) — a decisão original fica abaixo,
   registrada, porque o PRINCÍPIO continua valendo (é o max-width que produz as
   linhas curtas da fatia); só o valor e a unidade estavam errados:

     "max-width em `ch` é o que reproduz as três a quatro linhas curtas da fatia
      08-rodape.png. Sem ele, 'O SEU PÃOZINHO DE TODO DIA' sai numa linha só em
      1440px e a coluna da direita em duas — assimetria que a peça não tem, e
      que piora a cada palavra que o cliente acrescentar na Fase 3."

   POR QUE 14ch NÃO ENTREGAVA: com a CitrusGothic no tamanho antigo, 14ch cabia
   DUAS palavras. Medido em 1440px: "O SEU PÃOZINHO" ocupa 5,83em e o teto de
   14ch resolvia para 410px (6,6em) — sobrava espaço, e a fatia pede a quebra
   depois de "O SEU". Resultado no ar: 2 linhas à esquerda e 3 à direita, contra
   as 4 + 4 da peça aprovada.

   O TETO CERTO, MEDIDO PALAVRA A PALAVRA (em `em`, que anda junto com o
   font-size — mesma lição travada no sub-topo pelo quick 260808-ptd):
     precisa CABER   "RECHEADO" = 3,76em  (a palavra mais larga das duas colunas)
     NÃO pode caber  "DE TODO DIA" = 4,6em (a menor combinação que a fatia quebra)
   4,1em fica no meio dessa janela, com ~9% de folga para cada lado — margem que
   sobrevive a uma palavra nova do cliente sem virar 3 ou 5 linhas.

   FONT-SIZE PRÓPRIO, e não var(--fs-titulo): o token é dos 5 blocos de produto
   e não pode subir. O teto de 82px é limitado pela COLUNA, não pelo gosto — a
   coluna mais estreita da LP não é a do menor viewport, é a de 1024px (medida:
   237,4px, com a grade ainda em 1fr/auto/1fr e a pessoa já em 389px). Como
   "PÃOZINHO" e "RECHEADO" são inquebráveis, font-size acima de ~63px em 1024px
   faz a palavra transbordar por cima da pessoa. 5,7vw entrega 58,4px ali.

   text-wrap: balance REMOVIDO — ver comentário na própria linha abaixo. */
.rodape__texto {
  /* Ajuste de lançamento (2026-08-07): align-items:center do .rodape__trio
     centralizava os dois textos contra a ALTURA CHEIA da pessoa (maior
     agora) — na prática eles caíam na faixa dos pães laterais (top:56-58%
     no CSS abaixo). align-self:start tira só os textos dessa centralização,
     sem mexer no comportamento da pessoa. */
  align-self: start;
  margin-top: var(--sp-24);
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(34px, 5.7vw, 82px);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-titulo);
  margin: 0 auto;
  max-width: 4.1em;
  /* text-wrap: balance REMOVIDO, e a medição é o motivo. Rodada A/B com o
     font-size e o max-width já nos valores acima: com `balance` a coluna
     ESQUERDA sai "O SEU / PÃOZINHO / DE / TODO DIA" nos CINCO viewports
     medidos (360/390/768/1024/1440) — 4 linhas, mas com a quebra errada;
     sem ele sai "O SEU / PÃOZINHO / DE TODO / DIA", palavra a palavra como
     na fatia. `balance` iguala o comprimento das linhas, e a peça aprovada
     tem linhas deliberadamente desiguais. A coluna da direita sai igual dos
     dois jeitos — quem decide é a esquerda. */
}

.rodape__pessoa {
  /* Ajuste de lançamento (2026-08-07): era clamp(200px,30vw,420px). */
  width: clamp(260px, 38vw, 520px);
  justify-self: center;
}

/* Os 3 pães do rodapé: um grande à esquerda-BAIXO, um pequeno acima do centro
   (onde fica a mão da pessoa na fatia) e um grande à direita-BAIXO.
   NENHUM entra na faixa do texto legal — o achado 3 do design-chief proíbe
   qualquer coisa por cima da declaração de alergênico, e o `z-index: 2` do
   parágrafo é a segunda trava.
   Ajuste de lançamento (2026-08-07): left:3%/left:36% liam como "dois pães à
   esquerda, um à direita" (mesma faixa de `top`, sem diferença vertical que
   sinalizasse "este é o de cima"). A fatia 08-rodape.png tem UM pão claramente
   acima, junto do rosto, e DOIS embaixo, um de cada lado. left/right sobem
   para o mesmo patamar de baixo já validado no sub-topo (54%/58%, linhas
   acima) — não o patamar novo de 65-68%, que a mesma régua de 88-100% não foi
   medida para garantir com segurança no tempo disponível hoje. */
/* Ajuste de lançamento (2026-08-07): left/right puxados mais para o centro
   (eram 5%/3%) para se aproximar da pessoa, que agora existe de verdade e é
   maior (.rodape__pessoa acima). */
.bloco--rodape .paes .pao--1 { top: 58%; left: 14%; right: auto; width: clamp(120px, 24vw, 330px); }
/* 30% e não 22%: em 22% este pão nascia ATRÁS do "EXPERIMENTE!" (medido no
   plano 02-08). A ordem de pintura protege o texto (o hero é z-index 2), mas
   encostar um retângulo de 220px na maior palavra da LP é ruído gratuito.
   42%, mais perto do centro que os 36% antigos — a fatia mostra este pão
   quase colado no rosto, não deslocado para a esquerda.
   Ajuste de lançamento (2026-08-07, revisão 4) — DECISÃO FINAL sobre a
   camada, depois de duas voltas:
     1) sem pessoa cadastrada, este pão herdava z-index:1 de .pao-parallax
        e nunca colidia com nada;
     2) com a pessoa cadastrada, `.rodape__trio` (z-index:2) passou a pintar
        por cima dele na MESMA posição — parecia ter "sumido" — e a correção
        de então foi subir para z-index:3, pintando na FRENTE da pessoa;
     3) pedido explícito depois de ver o resultado: voltar para TRÁS da
        pessoa (sem z-index próprio, herda 1 de novo) — o efeito de
        "espiando por trás da cabeça" só existe se ele estiver atrás.
   O que muda desta vez para não voltar a ficar invisível: `left` desce mais
   ainda (34% -> 20%), saindo de trás do rosto/corpo da pessoa para trás do
   CABELO solto à esquerda — a maior parte do pão continua visível, só a
   borda direita dele é que fica coberta. */
.bloco--rodape .paes .pao--2 { top: 14%; left: 25%; right: auto; width: clamp(90px, 16vw, 220px); }
.bloco--rodape .paes .pao--3 { top: 56%; right: 12%; left: auto; width: clamp(120px, 24vw, 320px); }

/* ------------------------- 11. Responsivo dos quatro arquétipos novos ----- */

@media (min-width: 768px) and (max-width: 1023px) {
  /* Sub-topo com 3 pães nesta faixa (UI-SPEC §13). Dentro de `.paes` o
     `:nth-of-type` conta exatamente os pães — é para isso que o invólucro
     existe; com eles soltos no bloco, o título entraria na contagem. */
  .bloco--sub-topo .paes .pao:nth-of-type(n+4) { display: none; }
}

@media (max-width: 1023px) {
  /* Topo empilhado: lockup acima, family_shot abaixo, ambos centralizados.
     A grade volta a uma coluna sozinha — `grid-template-columns` só é
     declarado a partir de 1024px. */
  .bloco--topo .bloco__titulo { text-align: center; }

  .bloco--topo .lockup { margin-inline: auto; }

  .bloco--topo .bloco__family { width: 100%; }

  .bloco--topo .bloco__legal {
    text-align: center;
    margin-inline: auto;
  }

  /* Rodapé: hero, pessoa, e as duas colunas de texto abaixo dela. */
  .rodape__trio { grid-template-columns: 1fr 1fr; }

  .rodape__pessoa {
    grid-column: 1 / -1;
    order: -1;
  }
}

@media (max-width: 767px) {
  .bloco--topo { padding-block: var(--sp-64) var(--sp-32); }

  .bloco--sub-topo { padding-block: var(--sp-64); }

  .bloco--rodape { padding-block: var(--sp-96) var(--sp-64); }

  /* Os dois textos empilhados e centralizados (UI-SPEC §13). */
  .rodape__trio {
    grid-template-columns: 1fr;
    gap: var(--sp-32);
  }

  /* Momento com 1 pão só. Somado aos 2 do topo dá 3 no <header>; deixar 2 de
     cada conjunto daria 4 pães decorativos numa tela de 360px, que é peso de
     rede e de GPU sem leitura visual. */
  .bloco--topo .paes--momento .pao:nth-of-type(n+2) { display: none; }

  /* Posições de celular. Estas regras NÃO são opcionais: as genéricas de
     `.pao--1/2` do §7 têm 1 classe e as dos arquétipos acima têm 3 — sem
     redeclarar aqui, os pães do topo, do sub-topo e do rodapé herdariam a
     posição de DESKTOP, que é o que a especificidade manda. */
  .bloco--topo .paes .pao--1 { top: 62%; left: -16%; right: auto; width: clamp(96px, 36vw, 180px); }
  .bloco--topo .paes .pao--2 { top: 1%; left: 56%; right: auto; width: clamp(64px, 22vw, 120px); }
  .bloco--topo .paes--momento .pao--1 { top: 30%; right: -18%; left: auto; width: clamp(100px, 38vw, 190px); }

  /* Reconferência de 2026-08-08 (quick 260808-ptd): é NO CELULAR que a fatia
     02-sub-topo.png é literal — o bloco fica quase tão alto quanto largo, a
     mesma proporção da fatia. Os dois pães entraram e cresceram para encostar
     no título aumentado. `top` de .pao--2 é o que segura a base: 53% + 46vw
     de altura fecha em ~96% dos 420px de min-height do bloco. */
  .bloco--sub-topo .paes .pao--1 { top: 3%; left: -15%; right: auto; width: clamp(120px, 45vw, 220px); }
  .bloco--sub-topo .paes .pao--2 { top: 51%; right: -13%; left: auto; width: clamp(130px, 47vw, 235px); }

  .bloco--rodape .paes .pao--1 { top: 56%; left: -14%; right: auto; width: clamp(110px, 38vw, 200px); }
  /* `left: auto` NÃO é redundante: a regra de desktop deste mesmo pão declara
     `left: 36%`, e trocar só o `right` deixaria os DOIS lados fixos — o `left`
     vence, o pão fica no meio do bloco e cai atrás do texto. Toda regra de
     reposicionamento de pão precisa zerar o lado que ela não usa. */
  .bloco--rodape .paes .pao--2 { top: 20%; right: -12%; left: auto; width: clamp(90px, 30vw, 160px); }
}