/* ==========================================================================
   PRISMA · docs/exemplos/atelie.css — Ateliê de Produtos Educacionais (proposta, 20/09/2026)
   --------------------------------------------------------------------------
   SÓ POSIÇÃO. Toda peça mora no sistema:
     tema (cor) ............................. tokens/tema-atelie.css
     cena, lâminas, controles sobre a cena .. foundations/cena.css
     títulos editoriais (peso 400) .......... foundations/typography.css  (.editorial)
     barra em pílula ........................ components/nav.css          (.barra-flutuante)
     folha .................................. components/material.css     (.folha)
     índice, anéis, mostra, produto, caminho, convite, lista de abas, blocos .. components/atelie.css
     composer, chips, diálogo, espera ....... ai/composer.css, identity.css, dialogo.css, patterns/assincrono.css
   Se você está prestes a escrever aqui uma cor, um raio, uma sombra ou um estado: pare — isso é do sistema.

   Medidas lidas da Orbit a 1440px (docs/ANALISE_ORBIT_2026-09-19.md):
     moldura a 16px da janela · respiro lateral 68px · contêiner de trabalho 1280
     88px entre seções contidas · tudo à esquerda; só o fecho é centrado
   Pisos alternados: cena escura → folha clara → cena escura → papel → papel (+ painel escuro) → cena escura.
   ========================================================================== */

.pagina-atelie {
  --moldura: 16px;
  --respiro: clamp(24px, 4.7vw, 68px);
  --entre-secoes: clamp(56px, 6.1vw, 88px);
  --conteiner: 1280px;
  --barra-topo: calc(var(--moldura) + 14px);
  --barra-margem: calc(var(--moldura) + 14px);

  background: var(--background-canvas);
  color: var(--text-primary);
  font-family: var(--fonte-ui);
  padding-bottom: var(--moldura);
}

/* rótulos de canto (mono, caixa alta) e rótulo de seção */
.cartao-etiqueta { line-height: 1.4; }
.faixa-titulo, .faces-titulo { display: grid; gap: var(--espaco-3); }

/* barra: o botão "Novo produto" perde o rótulo quando a pílula aperta */
.barra-novo { margin-inline-end: var(--espaco-1); }
@media (max-width: 1100px) { .barra-flutuante .marca-rotulo { display: none; } }
@media (max-width: 960px) {
  /* só o "+" sobra: o desenho continua com 36px, a ÁREA DE TOQUE vai a 44px por
     pseudo-elemento (achado BAIXA da banca — era o único caminho para "Novo produto") */
  .barra-novo { position: relative; width: 36px; padding: 0; justify-content: center; }
  .barra-novo::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; }
  .barra-novo .btn-rotulo { display: none; }
}

/* --- 1 · Abertura ------------------------------------------------------------------------------ */
.abertura {
  margin: var(--moldura) var(--moldura) 0;
  min-height: min(880px, calc(100svh - 2 * var(--moldura)));
  padding: 120px var(--respiro) clamp(28px, 4vw, 56px);
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: center;
  /* a lâmina da frente sobe um pouco: o composer fica sobre grafite, não sobre a brasa */
  --forma-y: 6%; --forma-x: -64%;
  /* ONDE A LUZ BATE NA ARESTA. O parecer viu o mesmo gesto de aerógrafo nas quatro cenas;
     cada uma passa a acender um trecho diferente da lâmina (cena.css, --reflexo-de). */
  --reflexo-de: 24deg;
}
.abertura-corpo { display: grid; gap: var(--espaco-5); max-width: 980px; }
.abertura-etiqueta { margin: 0 0 var(--espaco-3); color: var(--text-on-destaque-3); }
.abertura-saudacao { margin: 0; font-size: var(--body-sm-size); color: var(--text-on-destaque-2); }
.abertura .titulo-cena { max-width: 11em; }
.abertura .titulo-cena em { display: block; }
.abertura-frase { margin: 0; font-size: var(--body-size); line-height: 1.6; color: var(--text-on-destaque-2); max-width: 44ch; text-wrap: pretty; }
.abertura .composer { max-width: 700px; margin-top: var(--espaco-3); }
.abertura .composer-caixa { border-radius: var(--radius-xl); gap: var(--espaco-1); }
.abertura .composer-texto { min-height: 64px; font-size: var(--body-size); }
.abertura .composer-estado { min-height: 22px; }
.abertura .composer-barra { gap: var(--espaco-4); }
.abertura .composer-enviar { margin-inline-start: auto; flex: none; }
.abertura .composer-modos { align-items: center; }
/* a ligação sobre a cena só recebe POSIÇÃO aqui; a peça mora em components/atelie.css */
.abertura .ligacao--cena { margin-inline-start: var(--espaco-2); }

/* a pílula de andamento também: peça em components/atelie.css, posição aqui */
.abertura .pilula-andamento {
  position: absolute; right: var(--respiro); bottom: clamp(28px, 4vw, 56px);
}

/* Com fotografia (quando a autora gerar as imagens): a pessoa ocupa do meio para a direita → título em coluna estreita.
   Mesmas regras da Home do PRISMA; o foco por largura vem de cena.css (--foto-foco / --foto-corte / --foto-foco-faixa). */
.abertura--foto { --foto-foco: 0% 50%; }
.abertura--foto .titulo-cena { max-width: 8.4em; }
.abertura--foto .composer { max-width: 620px; }
@media (max-width: 1380px) { .abertura--foto { --foto-foco: 30% 50%; } }
@media (min-width: 721px) and (max-width: 1100px) {
  .abertura--foto { --foto-foco: 70% 50%; }
  .abertura--foto .titulo-cena { font-size: clamp(2.25rem, 5.2vw, 3.5rem); }
  .abertura--foto .composer { max-width: min(620px, 66%); }
}
@media (max-width: 720px) {
  .abertura--foto { --foto-foco: 84% 10%; padding-top: 156px; }
  .abertura--foto .titulo-cena, .abertura--foto .composer { max-width: none; }
}

/* --- 2 · As cinco faces (folha) ------------------------------------------------------------------ */
.faces {
  margin: var(--moldura) var(--moldura) 0;
  padding: clamp(56px, 8vw, 112px) var(--respiro) clamp(56px, 7vw, 96px);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 72px);
}
.faces-cabeca { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4.2vw, 60px); align-items: end; }
.faces-texto { margin: 0; font-size: var(--body-size); line-height: 1.7; color: var(--text-secondary); max-width: 46ch; text-wrap: pretty; }

/* --- 3 · Um conteúdo, nove formatos (cena funda) ---------------------------------------------------- */
.formatos {
  margin: var(--moldura) var(--moldura) 0;
  padding: clamp(40px, 4.4vw, 64px) var(--respiro) clamp(48px, 5vw, 72px);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 72px);
  /* A lâmina SOBE: a aresta clara cruzava exatamente os dois rótulos do topo
     ("Suas linhas de produto" media 1,47:1, 100% da área abaixo do mínimo). Agora ela
     passa acima deles — vira uma faixa de luz na borda de cima — e os rótulos assentam
     em grafite limpo. Medido depois: nenhum alvo abaixo do mínimo a 1440 e a 390. */
  --forma-x: -74%; --forma-y: 1%; --fundo-x: -78%; --fundo-y: -12%;
  --reflexo-de: 84deg;   /* aqui a luz acende mais abaixo, junto dos anéis */
}
.formatos-topo { display: flex; justify-content: space-between; gap: var(--espaco-4); color: var(--text-on-destaque-3); }
.formatos-topo .cartao-etiqueta { margin: 0; color: inherit; }
.formatos-corpo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.formatos-texto { display: grid; gap: var(--espaco-6); justify-items: start; }
.formatos .titulo-cena em { display: block; }
.formatos-frase { margin: 0; font-size: var(--body-size); line-height: 1.6; color: var(--text-on-destaque-2); max-width: 44ch; text-wrap: pretty; }
.formatos-linhas { display: flex; flex-wrap: wrap; gap: var(--espaco-2); max-width: 560px; }
.formatos-figura { position: relative; display: grid; justify-items: end; align-content: end; min-height: 420px; }
.formatos-figura .aneis { position: absolute; right: -6%; top: -6%; --aneis-tamanho: min(520px, 100%); --aneis-altura: 44%; }
.formatos-figura .mostra { position: relative; width: min(100%, 520px); margin-top: 300px; }
.formatos-hipotese { display: grid; gap: var(--espaco-6); padding-top: var(--espaco-6); border-top: 1px solid var(--border-on-destaque); }
.formatos-hipotese-cabeca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--espaco-5); align-items: baseline; }
.formatos-hipotese-titulo { font-size: var(--body-size); color: var(--text-on-destaque); align-items: start; }
.formatos-hipotese-titulo::before { margin-top: 9px; }
.formatos-hipotese-titulo b { font-weight: 500; }
.formatos-hipotese-texto { margin: 0; font-size: var(--body-sm-size); line-height: 1.55; color: var(--text-on-destaque-2); max-width: 52ch; text-wrap: pretty; }
.formatos .indice--compacto .indice-item { border-top-color: var(--border-on-destaque); }

/* --- Faixas de trabalho: contidas ----------------------------------------------------------------------- */
.faixa {
  width: min(var(--conteiner), calc(100% - 2 * var(--respiro)));
  margin: var(--entre-secoes) auto 0;
}
/* o vão entre o cabeçalho da faixa e o trabalho também encolhe com a largura: era 40px fixos
   em qualquer tela, o que numa coluna de 745px já é um degrau a mais do que a página pede */
.faixa-cabeca { display: flex; align-items: end; justify-content: space-between; gap: var(--espaco-6); margin-bottom: clamp(24px, 2.8vw, 40px); }
.faixa-texto { margin: 0; font-size: var(--body-sm-size); line-height: 1.6; color: var(--text-secondary); max-width: 40ch; text-align: right; text-wrap: pretty; }
.faixa-cabeca > .rotulo-ponto { flex: none; }

/* --- 4 · Meus produtos ----------------------------------------------------------------------------------- */
.produtos-grade { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.produtos-grade .convite { height: 100%; }

/* --- 5 · Playbook: lista à esquerda, painel escuro à direita --------------------------------------------- */
.playbook-corpo { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: var(--espaco-6); align-items: start; }
.playbook-lista { display: grid; gap: var(--espaco-4); padding-top: var(--espaco-2); }
.playbook-lista-rotulo { margin: 0 0 0 var(--espaco-5); }
.playbook-lista-nota { margin: var(--espaco-4) 0 0 var(--espaco-5); align-items: start; max-width: 30ch; line-height: 1.5; }
.playbook-lista-nota::before { margin-top: 6px; }
.playbook-painel {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espaco-7);
  /* Com space-between o pé do painel encosta na base e a folga vira respiro entre os três
     blocos, em vez de buraco. */
  align-content: space-between;
  /* ALTURA: o piso da cena mora aqui; a medida da FACE ATUAL chega de atelie.js em
     --painel-altura. Antes reservava-se a face mais alta e sobravam até 337px de chão
     (medido a 1100px na face "Produção"). Agora o painel vai ao tamanho da face escolhida,
     e a transição impede o pulo que a reserva existia para evitar. */
  min-height: max(560px, var(--painel-altura, 560px));
  transition: min-height var(--motion-default) var(--easing-standard);
  padding: clamp(28px, 3.4vw, 44px) clamp(28px, 3.6vw, 52px) clamp(28px, 3.4vw, 44px);
  /* mesma correção da dobra "Nove formatos": a aresta saía por cima de "Etapa Estrutura ·
     40%" (1,23:1 na medição da banca) e agora passa acima dele, na borda do painel */
  --forma-x: -66%; --forma-y: -6%; --fundo-x: -74%; --fundo-y: -18%;
  --reflexo-de: 316deg;   /* o painel recebe a luz pelo alto à esquerda: outro gesto */
}
.playbook-aneis { position: absolute; right: -10%; top: -14%; z-index: 0; --aneis-tamanho: min(520px, 62%); --aneis-altura: 38%; --aneis-opacidade: .30; }
.playbook-painel-topo { position: relative; display: flex; justify-content: space-between; gap: var(--espaco-4); flex-wrap: wrap; color: var(--text-on-destaque-3); }
.playbook-painel-topo .cartao-etiqueta { margin: 0; color: inherit; white-space: normal; }
.playbook-conteudo { position: relative; display: grid; gap: var(--espaco-4); }
.playbook-conteudo .titulo-painel { max-width: 16em; }
.playbook-chamada { margin: 0 0 var(--espaco-2); font-size: var(--body-size); line-height: 1.6; color: var(--text-on-destaque-2); max-width: 56ch; text-wrap: pretty; }
.playbook-conteudo .blocos-playbook { padding-top: var(--espaco-6); border-top: 1px solid var(--border-on-destaque); }
.playbook-painel-pe { position: relative; display: flex; justify-content: space-between; align-items: center; gap: var(--espaco-4); flex-wrap: wrap; margin-top: auto; padding-top: var(--espaco-5); border-top: 1px solid var(--border-on-destaque); }
/* reduzir não é zerar (foundations/motion.css): o painel ainda muda de tamanho, só não leva o olho junto */
@media (prefers-reduced-motion: reduce) { .playbook-painel { transition-duration: 1ms; } }
[data-reduzir-movimento] .playbook-painel { transition-duration: 1ms; }

/* --- 6 · Fecho -------------------------------------------------------------------------------------------- */
.fecho {
  margin: var(--entre-secoes) var(--moldura) 0;
  /* O piso sobe de 400 para 480: com 400 a seção ficava do tamanho exato do conteúdo e
     a aresta clara da lâmina subia por dentro dele — medido 2,14:1 na frase do fecho a
     1024px, onde 38vw ainda não tinha chegado aos 480. Com o piso alto, o horizonte de
     luz fica SEMPRE abaixo do texto, em qualquer largura. */
  min-height: clamp(480px, 38vw, 560px);
  padding: var(--espaco-10) var(--respiro);
  display: grid; place-content: center; justify-items: center; gap: var(--espaco-7); text-align: center;
  /* A lâmina de trás estava a 66%: a aresta clara cruzava a frase do fecho (medido 3,10:1,
     77% da área abaixo do mínimo). Ela desce para junto da lâmina da frente e as duas
     arestas viram horizonte ABAIXO do conteúdo, como a Conecta já fazia no fecho dela. */
  --fundo-y: 80%; --fundo-giro: -4deg;
  --reflexo-de: 344deg;   /* o quarto gesto: a luz acende no alto da massa, fora do centro */
}
.fecho-etiqueta { margin: 0 0 calc(-1 * var(--espaco-3)); color: var(--text-on-destaque-3); }
.fecho .titulo-fecho { max-width: 16ch; }
.fecho .titulo-fecho em { display: block; }
.fecho-botao { border-radius: var(--radius-full); padding-inline: var(--espaco-7); }
.fecho-frase { margin: calc(-1 * var(--espaco-2)) 0 0; font-size: var(--body-sm-size); letter-spacing: -0.01em; color: var(--text-on-destaque-2); }

/* --- Rodapé -------------------------------------------------------------------------------------------------- */
.rodape {
  width: min(var(--conteiner), calc(100% - 2 * var(--respiro)));
  margin: var(--entre-secoes) auto 0; padding-bottom: clamp(28px, 3.3vw, 48px);
  display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: clamp(28px, 2.8vw, 40px);
  font-size: var(--label-size); color: var(--text-muted);
}
.rodape-marca { display: grid; gap: var(--espaco-4); justify-items: start; }
.rodape-marca p { margin: 0; max-width: 42ch; line-height: 1.6; }
.rodape nav { display: grid; gap: var(--espaco-2); align-content: start; }
.rodape nav a { color: var(--text-secondary); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .rodape nav a:hover { color: var(--text-primary); } }
.rodape-titulo { margin: 0 0 var(--espaco-2); color: var(--text-muted); font-size: var(--caption-size); }
.rodape-fino { grid-column: 1 / -1; margin: 0; padding-top: var(--espaco-5); border-top: 1px solid var(--border-subtle); font-size: var(--caption-size); }

.nav-flutuante--rodape { display: none; }

/* --- Entrada: uma vez, só na abertura ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .abertura-corpo > *, .abertura .pilula-andamento {
    animation: abertura-entra 600ms var(--easing-enter) both;
    animation-delay: calc(var(--i, 0) * 70ms + 80ms);
  }
  .abertura-corpo > :nth-child(2) { --i: 1; }
  .abertura-corpo > :nth-child(3) { --i: 2; }
  .abertura-corpo > :nth-child(4) { --i: 3; }
  .abertura-corpo > :nth-child(5) { --i: 4; }
  .abertura .pilula-andamento { --i: 6; }
  [data-reduzir-movimento] .abertura-corpo > *, [data-reduzir-movimento] .abertura .pilula-andamento { animation: none; }
}
@keyframes abertura-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* --- Painel médio (o da autora: ~800–1100px) --------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .formatos-corpo { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: var(--espaco-7); }
  .formatos-figura { min-height: 380px; }
  .formatos-figura .aneis { right: -8%; top: -4%; --aneis-tamanho: min(420px, 110%); }
  .formatos-figura .mostra { width: 100%; margin-top: 240px; }
  .playbook-corpo { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); }
  /* A ARESTA SAI DO PAINEL a partir daqui, e não só no celular. Abaixo de 1100px a coluna do
     painel estreita (641px a 1100, 675px a 745) enquanto o conteúdo continua alto: a elipse,
     medida em % da LARGURA, passa a ter a aresta de baixo DENTRO do painel e ela cruzava
     "Integra intencionalidade pedagógica…" — medido 1,43:1, 7% da área abaixo do mínimo, a
     1100 e a 745px. Sem aresta, o painel vira a massa da lâmina, como já fazia no celular. */
  .playbook-painel { --forma-largura: 540%; --forma-proporcao: 1.05; --forma-x: -215%; --forma-y: -7%; --forma-giro: 4deg;
                     --fundo-largura: 580%; --fundo-proporcao: 1.05; --fundo-x: -240%; --fundo-y: -9%; --fundo-giro: 5deg; }
  .lista-aba-texto b { font-size: 1.25rem; }
  .produtos-grade { grid-template-columns: minmax(0, 1fr); }
  .produtos-grade .convite { min-height: 200px; }
}
@media (max-width: 1024px) {
  .faces-cabeca { grid-template-columns: minmax(0, 1fr); }
  .faces-texto { max-width: 60ch; }
  .abertura .pilula-andamento { position: static; justify-self: start; margin-top: var(--espaco-6); }
}
@media (max-width: 900px) {
  /* A DOBRA "NOVE FORMATOS" NUMA COLUNA SÓ.
     Antes: a placa reservava 250px de margem para esperar os anéis passarem, e os anéis
     (400px, linha fina a 34% de opacidade) ocupavam uma BANDA só deles. Do último chip até
     "Linha escolhida" havia 290px sem nada denso — o buraco que a autora fotografou.
     Agora a figura repete o que a composição faz a 1440: os anéis são o HALO ATRÁS da
     placa, não um bloco antes dela. A figura passa a medir o que a placa mede; o halo sai
     dela por cima, por trás do texto (z-index), e o chão da seção sobe ~250px. */
  .formatos-corpo { grid-template-columns: minmax(0, 1fr); gap: var(--espaco-7); }
  .formatos-texto { position: relative; z-index: 1; }
  .formatos-figura { min-height: 0; justify-items: stretch; z-index: 0; }
  .formatos-figura .aneis { right: 0; left: auto; top: auto; bottom: -18%;
                            --aneis-tamanho: min(360px, 78%); }
  /* A ARESTA SAI DA CENA também aqui, e pelo mesmo motivo do celular: a dobra encolheu ~300px
     e a elipse — que é medida em % da LARGURA — passou a ter a aresta de BAIXO dentro da
     seção, cruzando a hipótese em cinco passos. A lâmina cresce e vira MASSA, como a Conecta
     faz nas cenas estreitas dela; o horizonte volta a ficar fora do conteúdo. */
  .formatos { --forma-largura: 540%; --forma-proporcao: 1.05; --forma-x: -215%; --forma-y: -7%; --forma-giro: 4deg;
              --fundo-largura: 580%; --fundo-proporcao: 1.05; --fundo-x: -240%; --fundo-y: -9%; --fundo-giro: 5deg; }
  .formatos-figura .mostra { margin-top: 0; }
  /* com uma coluna só, a fita de chips não precisa mais do teto de 560px da versão de duas
     colunas: com a largura inteira ela passa de quatro fileiras para duas ou três */
  .formatos-linhas { max-width: none; }
  .playbook-corpo { grid-template-columns: minmax(0, 1fr); gap: var(--espaco-5); }
  .playbook-lista { gap: var(--espaco-3); }
  .playbook-lista-rotulo, .playbook-lista-nota { margin-inline-start: 0; }
  .playbook-lista-nota { max-width: none; }
  .playbook-aneis { --aneis-tamanho: 300px; right: -20%; top: -8%; }
  .faixa-cabeca { flex-wrap: wrap; align-items: start; }
  /* em tela estreita o rótulo do cabeçalho pode quebrar: com flex:none ele empurrava a
     página 33px para fora a 320px (medido) */
  .faixa-cabeca > .rotulo-ponto { flex: 0 1 auto; }
  .faixa-texto { text-align: left; }
  .formatos-hipotese-cabeca { grid-template-columns: minmax(0, 1fr); gap: var(--espaco-2); }
}

/* --- Celular: estrutura muda, não encolhe -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .pagina-atelie { --moldura: 8px; --barra-topo: calc(var(--moldura) + 8px); --barra-margem: 22px; padding-bottom: 96px; }
  .nav-flutuante--rodape { display: inline-flex; }
  /* A BARRA DE BAIXO É FIXA E COBRIA O INDICADOR (medido 267×40 a 390×844, e 8px do
     textarea a 375×812, 20px a 360×800). Nenhuma folga extra resolve: o que estava errado
     era o RITMO da dobra, que somava 852px numa janela de 844. A abertura perde 72px de ar
     — respiro do topo, vão entre blocos, margem do composer, altura mínima do campo e a
     margem do indicador — e a dobra volta a caber acima da barra. */
  .abertura {
    padding-top: 84px; padding-bottom: var(--espaco-5);
    /* A altura mínima é a janela MENOS a faixa da barra de baixo. Sem o teto de 760px que
       havia antes: com ele, numa janela de 900 a dobra parava em 760 e o rótulo da seção
       seguinte nascia exatamente debaixo da barra (medido 1,00:1 a 430 e 540 px). Assim a
       abertura assenta acima da barra e a folha começa fora da dobra, em qualquer altura. */
    min-height: calc(100svh - 2 * var(--moldura) - 88px);
    /* A ARESTA SAI DA CENA, como a Conecta já fazia na abertura dela: numa coluna de
       390px não existe canto livre e a aresta clara atravessava o título ("produto
       vendável." a 1,04:1) e a faixa logo abaixo da barra de cima. Sem aresta visível a
       cena vira a MASSA da lâmina, ainda modelada pela brasa do céu. */
    --forma-largura: 540%; --forma-proporcao: 1.05; --forma-x: -215%; --forma-y: -7%; --forma-giro: 4deg;
    --fundo-largura: 580%; --fundo-proporcao: 1.05; --fundo-x: -240%; --fundo-y: -9%; --fundo-giro: 5deg;
  }
  /* a folha começa com mais ar: com a dobra de abertura encurtada, o rótulo "Playbook
     interno" nascia exatamente na faixa da barra de baixo e ficava escondido em repouso */
  .faces { padding-top: 96px; }
  .abertura-corpo { gap: var(--espaco-4); }
  .abertura .composer { margin-top: 0; }
  .abertura .composer-texto { min-height: 52px; }
  .abertura .pilula-andamento { margin-top: var(--espaco-3); }
  /* A escala editorial trava em 40px abaixo de 600px, e num telefone de 375 ou 360 a
     segunda frase do título quebrava numa TERCEIRA linha — 42px a mais na dobra, o que
     jogava o indicador para dentro da barra. Abaixo de 400px o título e a frase seguem
     descendo com a largura, em vez de travar. */
  .abertura .titulo-cena { max-width: none; font-size: min(2.5rem, 10vw); }
  .abertura-frase { font-size: min(1rem, 4.2vw); }
  /* A fita de chips QUEBRA em duas linhas em vez de rolar de lado sem aviso: a 390px
     "Slides" saía 48px e "Ver as nove linhas" — o caminho da abertura para as nove
     linhas — saía 212px. Com a dobra comprimida, as duas linhas cabem.
     (A peça .rola-lado continua no HTML: se um dia a fita voltar a rolar, ela avisa.) */
  .abertura .composer-modos { flex-wrap: wrap; row-gap: var(--espaco-2); }
  .abertura .composer-modos .chip, .abertura .ligacao--cena { flex: none; }
  .abertura .composer-caixa { border-radius: var(--radius-lg); }
  .composer-nota { display: none; }
  /* Nenhum salto de âncora nem parada de teclado pode estacionar debaixo das duas barras
     fixas: o rolador da página reserva as duas faixas. */
  html { scroll-padding-top: 84px; scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  /* alvo de toque de 44px nos links do rodapé, sem sobrepor vizinhos: o vão vira padding */
  .rodape nav { gap: 0; }
  .rodape nav a { padding-block: 11px; }
  /* a aresta da cena "Nove formatos" já sai por cima a partir de 900px (bloco acima): numa
     coluna estreita não existe canto livre, e a aresta clara cruzava os rótulos do topo */
  .formatos-topo .cartao-etiqueta:last-child { display: none; }
  /* no celular o halo é menor e continua atrás da placa (mesma regra da coluna única) */
  .formatos-figura .aneis { --aneis-tamanho: min(300px, 92%); bottom: -16%; }
  .formatos-figura .mostra { margin-top: 0; }
  /* a aresta do painel já sai da cena a partir de 1100px (bloco acima) */
  .playbook-painel-topo .rotulo-ponto { display: none; }
  /* no celular o fecho é mais alto (o título quebra) e a aresta subia por dentro da frase
     — medido 2,27:1 a 320px. O horizonte desce para o pé da seção. */
  .fecho { --forma-largura: 300%; --forma-x: -130%; --forma-y: 94%;
           --fundo-largura: 330%; --fundo-x: -140%; --fundo-y: 88%; }
  .rodape { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rodape-marca { grid-column: 1 / -1; }
}

/* --- Telas muito estreitas (abaixo de 360px) ---------------------------------------------
   A 320px a página estourava 43px e "Continuar criando comigo" era cortado 16px FORA de
   qualquer rolador: a coluna de trabalho ficava com 216px depois da moldura, do respiro e
   do estofo do painel. Quem cede é a MARGEM, não o conteúdo. */
@media (max-width: 400px) {
  .pagina-atelie { --respiro: 14px; }
  /* telefone estreito: a dobra de abertura comprime o ritmo para caber acima da barra */
  .abertura { padding-top: 76px; padding-bottom: var(--espaco-3); }
  .abertura-corpo { gap: var(--espaco-3); }
  .abertura .composer-texto { min-height: 44px; }
  .abertura .pilula-andamento { margin-top: var(--espaco-2); }
  /* Numa coluna de 360 ou 320px a dobra "Nove formatos" fica MUITO alta (1740px) e a
     lâmina, que é medida em % da LARGURA, encolhe: a aresta de BAIXO da elipse voltava
     para dentro da seção e cruzava a hipótese em cinco passos (medido 1,41:1 a 360px).
     A lâmina cresce para continuar maior que a seção. */
  .formatos { --forma-largura: 780%; --forma-x: -335%; --fundo-largura: 820%; --fundo-x: -355%; }
  .playbook-painel { padding-inline: var(--espaco-4); }
  .playbook-painel-pe .btn { padding-inline: var(--espaco-4); }
  .produto { padding: 6px; }
  .produto-corpo { padding-inline: var(--espaco-2); }
}

/* --- Telefone BAIXO (janela de até 760px de altura) ---------------------------------------
   A sobreposição da barra de baixo depende da ALTURA, não da largura: o parecer viu que
   ela aparecia a 844, 812 e 800 e não a 896 e 932. Num aparelho baixo (414×736, 390×664,
   360×640) a dobra continua não cabendo acima da barra. Aqui ela comprime mais um degrau —
   a moldura e o ritmo cedem, o conteúdo não. */
@media (max-width: 720px) and (max-height: 820px) {
  .abertura { padding-top: 64px; padding-bottom: var(--espaco-1); }
  .abertura-corpo { gap: var(--espaco-2); }
  .abertura .composer-modos { row-gap: var(--espaco-1); }
  .abertura .titulo-cena { font-size: min(1.875rem, 8.2vw); }
  .abertura-frase { font-size: min(.875rem, 3.9vw); line-height: 1.45; }
  .abertura .composer-texto { min-height: 40px; }
  .abertura .composer-pergunta { font-size: var(--caption-size); }
  .abertura .pilula-andamento { margin-top: var(--espaco-1); }
}
/* janela MUITO baixa (390×664, 360×640): mais um degrau, e é o último */
@media (max-width: 720px) and (max-height: 680px) {
  .abertura { padding-top: 56px; }
  .abertura-corpo { gap: var(--espaco-1); }
  .abertura-saudacao { font-size: var(--caption-size); }
  .abertura .titulo-cena { font-size: min(1.75rem, 7.6vw); }
  .abertura .composer-texto { min-height: 32px; }
  .abertura .composer-caixa { padding-block: var(--espaco-3); }
  .abertura .composer-barra { gap: var(--espaco-2); }
}

/* ==========================================================================
   D-025 · refinamento editorial premium do Ateliê
   ========================================================================== */
html[data-linguagem="quiet-luxury"] .pagina-atelie{
  --entre-secoes:clamp(64px,7vw,104px);
}
html[data-linguagem="quiet-luxury"] .pagina-atelie .abertura{
  min-height:min(920px,calc(100svh - 2 * var(--moldura)));
  padding-top:clamp(124px,10vw,164px);
}
html[data-linguagem="quiet-luxury"] .pagina-atelie .abertura-corpo{
  max-width:900px;
  gap:clamp(14px,1.6vw,24px);
}
html[data-linguagem="quiet-luxury"] .pagina-atelie .abertura .titulo-cena{
  max-width:9.4em;
  font-size:clamp(3.9rem,6.6vw,6.55rem);
  line-height:.94;
  letter-spacing:-.062em;
}
html[data-linguagem="quiet-luxury"] .pagina-atelie .abertura-frase{
  max-width:38ch;
  font-size:clamp(1rem,1.28vw,1.15rem);
  line-height:1.68;
}
html[data-linguagem="quiet-luxury"] .pagina-atelie .composer{
  max-width:740px;
}
html[data-linguagem="quiet-luxury"] .pagina-atelie .composer-caixa{
  border-color:rgba(226,204,148,.17);
  background:rgba(18,19,18,.43);
  backdrop-filter:blur(22px) saturate(120%);
  -webkit-backdrop-filter:blur(22px) saturate(120%);
  box-shadow:inset 0 1px rgba(255,255,255,.05),0 20px 54px rgba(0,0,0,.13);
}
html[data-linguagem="quiet-luxury"] .pagina-atelie .faces{
  padding-top:clamp(72px,9vw,128px);
  padding-bottom:clamp(72px,8vw,112px);
}
html[data-linguagem="quiet-luxury"] .pagina-atelie .indice-item{
  border-top-width:1px;
}
html[data-linguagem="quiet-luxury"] .pagina-atelie .produto,
html[data-linguagem="quiet-luxury"] .pagina-atelie .convite{
  border-color:rgba(24,24,22,.09);
  box-shadow:inset 0 1px rgba(255,255,255,.60),0 18px 52px -38px rgba(24,24,22,.32);
}
html[data-linguagem="quiet-luxury"] .pagina-atelie .produto-capa{
  background:
    radial-gradient(26rem 18rem at 96% 0%,rgba(201,170,104,.11),transparent 70%),
    linear-gradient(158deg,#282724,#181817 58%,#111211);
}
html[data-linguagem="quiet-luxury"] .pagina-atelie .formatos,
html[data-linguagem="quiet-luxury"] .pagina-atelie .playbook-painel,
html[data-linguagem="quiet-luxury"] .pagina-atelie .fecho{
  box-shadow:inset 0 1px rgba(255,255,255,.025);
}
html[data-linguagem="quiet-luxury"] .pagina-atelie .formatos-linhas .chip{
  background:rgba(255,255,255,.045);
  border-color:rgba(241,238,231,.09);
}
html[data-linguagem="quiet-luxury"] .pagina-atelie .formatos-linhas .chip[aria-pressed="true"]{
  background:rgba(201,170,104,.13);
  border-color:rgba(226,204,148,.25);
  color:#F1EEE7;
}
html[data-linguagem="quiet-luxury"] .pagina-atelie .barra-flutuante{
  box-shadow:0 18px 58px rgba(0,0,0,.20),inset 0 1px rgba(255,255,255,.045);
}
@media(max-width:720px){
  html[data-linguagem="quiet-luxury"] .pagina-atelie .abertura .titulo-cena{
    font-size:min(2.55rem,10vw);
    line-height:.98;
  }
}