/* ==========================================================================
   PRISMA · docs/exemplos/home-prisma.css — Home do PRISMA (proposta, 19/09/2026)
   --------------------------------------------------------------------------
   SÓ POSIÇÃO. Depois da mescla de 22h30 (D-014), toda peça mora no sistema:
     cena, foto, controles sobre a cena ...... foundations/cena.css
     títulos editoriais (peso 400) ........... foundations/typography.css  (.editorial)
     barra flutuante em pílula ............... components/nav.css          (.barra-flutuante)
     folha, folhinha, modo, recente, linhas .. components/material.css
     abas em pílula .......................... components/abas.css
     seletores do composer ................... ai/composer.css             (.composer-seletor)
     botão de cristal ........................ primitives/button.css       (.btn--cristal)
     etapas, revelar, espera ................. 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
   ========================================================================== */

.pagina-prisma {
  --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);
}

.rotulo-cena, .rotulo-folha {
  margin: 0; font-size: var(--caption-size); font-weight: 500; color: var(--text-muted);
}

/* --- 1 · Abertura ---------------------------------------------------------------------- */
.abertura {
  margin: var(--moldura) var(--moldura) 0;
  min-height: min(880px, calc(100svh - 2 * var(--moldura)));
  /* o bloco fica CENTRADO na altura (pedido da autora, 22h44): ancorado no pe, sobrava um vazio enorme
     entre a barra e o titulo — na Orbit esse alto e ocupado pela foto; aqui e parede. */
  padding: 112px var(--respiro) clamp(28px, 4vw, 56px);
  display: grid; align-content: center;
}
.abertura-corpo { display: grid; gap: var(--espaco-5); max-width: 980px; }
.abertura-saudacao { margin: 0; font-size: var(--body-sm-size); color: var(--text-on-destaque-2); }
.abertura .titulo-cena { margin-bottom: var(--espaco-5); }
.abertura .composer { max-width: 700px; }
.abertura .composer-caixa { border-radius: 26px; }
.abertura .composer-estado { min-height: 22px; }
.abertura .composer-acoes { flex-wrap: wrap; min-width: 0; }
.abertura .composer-enviar { margin-inline-start: auto; flex: none; }

.abertura-andamento {
  position: absolute; right: var(--respiro); bottom: clamp(28px, 4vw, 56px);
  display: inline-flex; align-items: center; gap: var(--espaco-3);
  min-height: 44px; padding: 0 var(--espaco-4) 0 var(--espaco-5);
  font-size: var(--body-sm-size); color: var(--text-on-destaque); text-decoration: none;
  transition: background-color var(--motion-fast) var(--easing-standard);
}
.abertura-andamento svg { width: 16px; height: 16px; opacity: .7; }
@media (hover: hover) and (pointer: fine) {
  .abertura-andamento:hover { background-color: var(--glass-on-destaque-hover); }
}

/* Com fotografia: a pessoa ocupa do meio para a direita → o título fica em coluna estreita. */
.abertura--foto { --foto-foco: 0% 50%; }   /* tela larga: corta da direita, a pessoa vai para o terço direito */
.abertura--foto .titulo-cena { max-width: 8.4em; }
.abertura--foto .composer { max-width: 620px; }
/* 1100–1380: a moldura é menos larga; recortar só da direita cortaria o rosto → divide o corte */
@media (max-width: 1380px) { .abertura--foto { --foto-foco: 30% 50%; } }
/* 721–1100 (o painel da autora): MESMA composição aprovada — foto inteira, título em três linhas à esquerda, pessoa à
   direita. Para caber, o título encolhe e o campo ocupa a coluna da esquerda. O foco vem de cada foto (--foto-foco-medio). */
@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%); }
}
/* celular: foto em faixa; texto e campo usam a largura toda */
@media (max-width: 720px) {
  .abertura--foto { --foto-foco: 84% 10%; padding-top: 156px; }   /* o título começa ABAIXO do rosto (medido: rostos vão até ~168px na faixa) */
  .abertura--foto .titulo-cena, .abertura--foto .composer { max-width: none; }
}

/* controle das fotos: legenda + duas setas redondas de vidro, acima do indicador */
.abertura-fotos {
  position: absolute; right: var(--respiro); bottom: calc(clamp(28px, 4vw, 56px) + 60px);
  display: flex; align-items: center; gap: var(--espaco-2);
  font-size: var(--caption-size); color: var(--text-on-destaque-2);
}
/* a legenda cai sobre papel, mesa, camisa: precisa do mesmo vidro do indicador para ler em qualquer foto */
.abertura-fotos.vidro { position: absolute; padding: 4px 4px 4px var(--espaco-4); color: var(--text-on-destaque); }
.abertura-fotos[hidden] { display: none; }
.abertura-fotos-legenda { margin-inline-end: var(--espaco-1); }
.abertura-fotos-conta { margin-inline-end: var(--espaco-2); font-variant-numeric: tabular-nums; color: var(--text-on-destaque-2); }
@media (max-width: 720px) {
  .abertura-fotos.vidro { position: relative; right: auto; bottom: auto; justify-self: start; order: 9; margin-top: var(--espaco-3); }
  .abertura-fotos-legenda { display: none; }   /* em tela estreita fica so o contador e as setas */
  .abertura-fotos.vidro { padding-inline-start: var(--espaco-4); }
}

/* --- 2 · A frase + os três caminhos ------------------------------------------------------- */
.ponte {
  margin: var(--moldura) var(--moldura) 0;
  padding: clamp(56px, 8vw, 112px) var(--respiro);
  display: grid; gap: clamp(36px, 4.4vw, 64px);
}
.ponte-cabeca { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4.2vw, 60px); align-items: end; }
.ponte-texto { margin: 0; font-size: var(--body-sm-size); line-height: 1.7; color: var(--text-secondary); max-width: 68ch; text-wrap: pretty; }

/* --- 3 · Produção --------------------------------------------------------------------------- */
.producao {
  margin: var(--moldura) var(--moldura) 0;
  padding: clamp(48px, 6.4vw, 92px) var(--respiro);
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px); align-items: start;
}
.producao:has(.producao-decisao[hidden]) { grid-template-columns: minmax(0, 1fr); }
.producao-trabalho { display: grid; gap: var(--espaco-7); justify-items: stretch; align-content: start; min-width: 0; }
/* cabeçalho: rótulo / TÍTULO + botão na mesma linha, à direita / meta */
.producao-cabeca { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--espaco-5); row-gap: var(--espaco-2); align-items: center; }
.producao-cabeca .rotulo-cena, .producao-cabeca .producao-meta { grid-column: 1 / -1; }
.producao-abrir { grid-column: 2; grid-row: 2; }
.producao-cabeca .titulo-painel { grid-column: 1; grid-row: 2; }
.producao-meta { margin: 0; font-size: var(--body-sm-size); color: var(--text-on-destaque-2); }
.producao .etapas { width: 100%; }
.producao-decisao { display: grid; gap: var(--espaco-3); min-width: 0; }
.producao .aprovacao { gap: var(--espaco-3); border-radius: 26px; }
.producao .aprovacao-acao { font-weight: 500; letter-spacing: -0.02em; }
.producao .aprovacao-acoes { flex-wrap: wrap; }
.producao .btn--primario { background-color: var(--text-on-destaque); background-image: none; color: var(--surface-destaque-base); }

/* --- Faixas de trabalho: contidas ------------------------------------------------------------ */
.faixa {
  width: min(var(--conteiner), calc(100% - 2 * var(--respiro)));
  margin: var(--entre-secoes) auto 0;
}
.faixa-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espaco-5); margin-bottom: var(--espaco-7); }
.ligacao {
  display: inline-flex; align-items: center; gap: var(--espaco-2); flex: none;
  font-size: var(--label-size); color: var(--text-secondary); text-decoration: none;
  transition: color var(--motion-fast) var(--easing-standard);
}
.ligacao svg { width: 15px; height: 15px; }
.ligacao:hover { color: var(--text-primary); }

/* --- 5 · O que o PRISMA pode preparar: abas + painel (texto | folha do tipo) ----------------- */
.preparar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espaco-6); }
.preparar-cabeca { display: grid; gap: var(--espaco-6); }
.painel-tipo {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--espaco-6);
  align-content: stretch; justify-items: stretch;
  padding: clamp(28px, 3.6vw, 52px);
  min-height: 408px;   /* altura ESTÁVEL: sem isto o painel pulava de 344 a 402px ao trocar de aba */
}
.painel-tipo-corpo { display: grid; align-content: space-between; justify-items: start; gap: var(--espaco-5); min-width: 0; }
.painel-tipo-troca { display: grid; gap: var(--espaco-4); width: 100%;
  transition: opacity var(--motion-default) var(--easing-standard), filter var(--motion-default) var(--easing-standard); }
.painel-tipo-troca[data-trocando] { opacity: 0; filter: blur(3px); }
.painel-tipo-chamada { margin: -4px 0 0; font-size: var(--body-size); line-height: 1.5; letter-spacing: -0.01em; color: var(--text-secondary); max-width: 44ch; }
.painel-tipo-texto { margin: 0 0 var(--espaco-3); font-size: var(--body-sm-size); line-height: 1.7; color: var(--text-secondary); max-width: 48ch; }
.painel-tipo .linha-fixa { grid-template-columns: minmax(0, 1fr); gap: 2px; }
/* os itens do material, em linha: etiquetas, não lista com descrição (o painel ficou com metade da altura — pedido da autora, 20/09) */
.tipo-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tipo-itens li { padding: 5px 12px; border-radius: var(--radius-full); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--border-default);
  font-size: var(--label-size); font-weight: 500; color: var(--text-primary); white-space: nowrap; }
.painel-tipo-bncc { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--espaco-2); align-items: start;
  font-size: var(--label-size); line-height: 1.5; color: var(--text-secondary); }
.painel-tipo-bncc[hidden] { display: none; }   /* Slides não leva a linha da BNCC (decisão da autora, 20/09) */
.painel-tipo-bncc svg { width: 18px; height: 18px; margin-top: 1px; color: var(--accent-text); }
.painel-tipo-bncc b { font-weight: 600; color: var(--text-primary); }
.painel-tipo-previa { position: relative; display: block; min-height: 300px;
  margin: calc(-1 * clamp(28px, 3.6vw, 52px)); margin-inline-start: 0;
  background: linear-gradient(200deg, color-mix(in srgb, var(--brand-blue) 22%, var(--papel)), color-mix(in srgb, var(--brand-blue) 58%, var(--papel))); }
.painel-tipo-previa .folhinha--tras { left: 7%; top: 15%; width: 76%; transform: rotate(-4deg); min-height: 78%; }
.painel-tipo-previa .folhinha--grande { top: 8%; padding: 14px 16px 16px; font-size: 11px; gap: 3px; }
.painel-tipo-previa .folhinha-secao { margin-top: 6px; padding-top: 6px; }

.equipe {
  grid-column: 1 / -1; margin-top: var(--espaco-8); padding-top: var(--espaco-5);
  border-top: 1px solid var(--border-subtle);
  display: flex; align-items: center; gap: var(--espaco-5); flex-wrap: wrap;
}
.equipe-texto { margin: 0; flex: 1 1 28rem; font-size: var(--label-size); line-height: 1.6; color: var(--text-muted); max-width: 72ch; }
.equipe-texto b { font-weight: 500; color: var(--text-secondary); }

/* --- 6 · Fecho ---------------------------------------------------------------------------------- */
.fecho {
  margin: var(--entre-secoes) var(--moldura) 0;
  min-height: clamp(380px, 36vw, 520px);
  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 passa POR TRÁS do botão de cristal: vidro precisa do que refratar */
  --fundo-y: 66%; --fundo-giro: -4deg;
}
.fecho .titulo-fecho { max-width: 16ch; }
.fecho .titulo-fecho em { display: block; }
.fecho-botao { border-radius: var(--radius-full); padding-inline: var(--espaco-7); }
/* a frase depois do botão (pedido da autora, 23h47): pequena, calma; a segunda metade muda de TOM, como nos títulos */
.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); }
.fecho-frase em { font-style: normal; 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: var(--espaco-9);
  display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: var(--espaco-8);
  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: 38ch; 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; }
.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-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-andamento { --i: 4; }
  [data-reduzir-movimento] .abertura-corpo > *, [data-reduzir-movimento] .abertura-andamento { animation: none; }
}
@keyframes abertura-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* --- Tablet ------------------------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .ponte-cabeca, .producao { grid-template-columns: minmax(0, 1fr); }
  .ponte-texto { max-width: none; }   /* uma coluna: o texto usa a largura toda, sem sobra à direita */
  .abertura-andamento { position: static; justify-self: start; margin-top: var(--espaco-6); }
  @media (max-width: 480px) { .abertura-andamento { font-size: var(--label-size); gap: var(--espaco-2); padding-inline: var(--espaco-4) var(--espaco-3); } }   /* D-022: uma linha só, com a Sora */
  /* a legenda da foto entra no fluxo junto com o indicador — em absoluto ela cobria as sugestões */
  .abertura-fotos.vidro { position: relative; right: auto; bottom: auto; justify-self: start; margin-top: var(--espaco-3); order: 8; }
}

/* --- Celular: estrutura muda, não encolhe -------------------------------------------------------------- */
@media (max-width: 720px) {
  .pagina-prisma { --moldura: 8px; --barra-topo: calc(var(--moldura) + 8px); --barra-margem: 22px; padding-bottom: 96px; }
  .nav-flutuante--rodape { display: inline-flex; }
  .faixa-cabeca { flex-wrap: wrap; row-gap: var(--espaco-2); }   /* no celular o link desce para baixo do título em vez de espremê-lo */
  .abertura { padding-top: 112px; min-height: min(760px, calc(100svh - 2 * var(--moldura))); --forma-largura: 260%; --forma-x: -150%; --forma-y: 2%; }
  .producao-cabeca { grid-template-columns: minmax(0, 1fr); }
  .producao-abrir { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--espaco-2); }
  .composer-enviar { margin-inline-start: auto; }
  /* painel alto e estreito: a lâmina cresce até a borda de baixo sair da moldura */
  .producao { --forma-largura: 540%; --forma-proporcao: 1.05; --forma-x: -215%; --forma-y: 1.2%; --forma-giro: 4deg;
              --fundo-largura: 580%; --fundo-proporcao: 1.05; --fundo-x: -240%; --fundo-y: -.6%; --fundo-giro: 5deg; }
  .fecho { --forma-largura: 300%; --forma-x: -130%; --fundo-largura: 330%; --fundo-x: -140%; }
  .composer-sugestoes { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--respiro)); padding-inline: var(--respiro); scrollbar-width: none; }
  .composer-sugestoes::-webkit-scrollbar { display: none; }
  .preparar-abas { margin-inline: calc(-1 * var(--respiro)); padding-inline: var(--respiro); }
  .painel-tipo { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .painel-tipo-previa { margin: 0 calc(-1 * clamp(28px, 3.6vw, 52px)) calc(-1 * clamp(28px, 3.6vw, 52px)); min-height: 240px; }
  .rodape { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rodape-marca { grid-column: 1 / -1; }
}

/* ==========================================================================
   D-026 · refinamento editorial premium da Home PRISMA
   ========================================================================== */
html[data-linguagem="quiet-luxury"] .pagina-prisma{
  --entre-secoes:clamp(64px,7vw,104px);
}
html[data-linguagem="quiet-luxury"] .pagina-prisma .abertura{
  min-height:min(920px,calc(100svh - 2 * var(--moldura)));
  padding-top:clamp(126px,10vw,166px);
}
html[data-linguagem="quiet-luxury"] .pagina-prisma .abertura-corpo{
  max-width:980px;
  gap:clamp(14px,1.55vw,23px);
}
html[data-linguagem="quiet-luxury"] .pagina-prisma .abertura .titulo-cena{
  max-width:8.8em;
  font-size:clamp(4rem,6.8vw,6.7rem);
  line-height:.94;
  letter-spacing:-.064em;
}
html[data-linguagem="quiet-luxury"] .pagina-prisma .abertura .composer{
  max-width:720px;
}
html[data-linguagem="quiet-luxury"] .pagina-prisma .composer-caixa{
  border-color:rgba(127,176,255,.14);
  background:rgba(13,17,23,.45);
  backdrop-filter:blur(22px) saturate(118%);
  -webkit-backdrop-filter:blur(22px) saturate(118%);
  box-shadow:inset 0 1px rgba(255,255,255,.045),0 20px 54px rgba(0,0,0,.16);
}
html[data-linguagem="quiet-luxury"] .pagina-prisma .ponte{
  padding-top:clamp(72px,9vw,126px);
  padding-bottom:clamp(72px,9vw,126px);
}
html[data-linguagem="quiet-luxury"] .pagina-prisma .painel-tipo{
  border-color:rgba(237,241,245,.07);
  box-shadow:inset 0 1px rgba(255,255,255,.025),0 24px 64px -42px rgba(0,0,0,.72);
}
html[data-linguagem="quiet-luxury"] .pagina-prisma .tipo-itens li{
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 0 1px rgba(237,241,245,.07);
}
html[data-linguagem="quiet-luxury"] .pagina-prisma .tipo-itens li:hover{
  box-shadow:inset 0 0 0 1px rgba(127,176,255,.15);
}
html[data-linguagem="quiet-luxury"] .pagina-prisma .barra-flutuante{
  background:rgba(13,17,23,.58);
  border-color:rgba(237,241,245,.11);
  box-shadow:0 18px 58px rgba(0,0,0,.23),inset 0 1px rgba(255,255,255,.045);
}
html[data-linguagem="quiet-luxury"] .pagina-prisma .fecho{
  min-height:clamp(440px,38vw,560px);
}
@media(max-width:720px){
  html[data-linguagem="quiet-luxury"] .pagina-prisma .abertura .titulo-cena{
    font-size:min(2.7rem,10.5vw);
    line-height:.97;
  }
}