/* ============================================================================
   page-manifesto.css - Emma Café Bistrot
   Manifesto na mesma linguagem do cardápio impresso: fundo chapado, título
   de página em vinho, corpo em preto suave, hierarquia só por tamanho/peso/
   espaçamento. Zero card, zero borda, zero sombra, zero radius, zero selo,
   zero botão pill. Copy 100% preservado - só a forma mudou.

   LAYOUT — COLUNA ÚNICA, LARGURA AMPLA (2026-07-15, REVERTIDO a pedido do
   Alisson): a tentativa de grid em 2 colunas (foto sticky + texto) foi
   REPROVADA. Voltou ao empilhamento vertical simples: título, foto, texto
   corrido, assinatura, CTA — um embaixo do outro, em TODOS os breakpoints.
   - .manifesto ganha max-width PRÓPRIO, no mesmo padrão de .cardapio em
     page-cardapio.css (920px → 1040px ≥700px → 1200px ≥1100px), dentro do
     .emma-container (padding lateral herdado). Isso dá a MESMA largura
     ampla que cardápio e home usam — sem vazio nas laterais, sem parecer
     uma coluna estreita central.
   - .manifesto__corpo NÃO tem mais cap em ch (era 68-70ch): ocupa 100% da
     largura do container (.manifesto), alinhado à esquerda, sem vazio nas
     laterais — prioridade é largura ampla, nunca compacta.
   - Foto volta ao fluxo em coluna única: centralizada, grande, acima do
     texto — nada de coluna lateral / sticky.
   Consome tokens de design-system.css. Feito por Frame Tecnologia.
   ============================================================================ */

.manifesto{
  max-width:920px;
  padding-block:clamp(3rem,8vw,5rem) clamp(4rem,10vw,7rem);
  display:flex;
  flex-direction:column;
  align-items:center;
}

@media (min-width:700px){
  .manifesto{ max-width:1040px; }
}

@media (min-width:1100px){
  .manifesto{ max-width:1200px; }
}

/* ─── Abertura: título da página + saudação + verso, full-width, centrada ─── */
.manifesto__topo{
  width:100%;
  max-width:64ch;
  margin:0 auto clamp(2.5rem,6vw,4rem);
  text-align:center;
}
.manifesto__titulo{
  margin:0;
  font-weight:var(--peso-negrito);
  font-size:clamp(2rem,6vw,3rem);
  line-height:1;
  letter-spacing:var(--tracking-logo);
  color:var(--vinho);
}
.manifesto__saudacao{
  margin:clamp(1.5rem,4vw,2rem) 0 0;
  font-weight:var(--peso-regular);
  font-size:1.2rem;
  line-height:1.5;
  color:var(--texto);
}

/* ─── Foto: trio (Rapha ao centro, maior + duas menores ladeando), acima
   do texto. Mobile/tablet (<900px): Rapha em cima, as duas menores numa
   linha abaixo. Desktop (≥900px): as 3 numa linha só, centro maior,
   alinhadas pelo centro vertical. object-fit:cover porque as 3 fotos têm
   proporções diferentes. Zero card/sombra/radius — coerente com o resto
   da página. ─── */
.manifesto__foto{
  width:100%;
  max-width:480px;
  margin:0 0 clamp(2.5rem,6vw,4rem);
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:
    "centro centro"
    "esq    dir";
  align-items:center;
  justify-items:center;
  gap:.85rem;
}
.manifesto__foto picture{ display:block; aspect-ratio:3/4; overflow:hidden }
.manifesto__foto img{ width:100%; height:100%; object-fit:cover; display:block }

.manifesto__foto .manifesto__foto-principal{ grid-area:centro; width:68%; }
.manifesto__foto .manifesto__foto-esquerda{ grid-area:esq; width:100%; }
.manifesto__foto .manifesto__foto-direita{ grid-area:dir; width:100%; }

@media (min-width:900px){
  .manifesto__foto{
    max-width:none;
    grid-template-columns:auto auto auto;
    grid-template-areas:"esq centro dir";
    justify-content:center;
    gap:clamp(1.25rem,3vw,2.25rem);
  }
  .manifesto__foto .manifesto__foto-principal{ width:clamp(300px,28vw,440px); }
  .manifesto__foto .manifesto__foto-esquerda,
  .manifesto__foto .manifesto__foto-direita{ width:clamp(190px,17vw,270px); }
}

/* ─── Corpo corrido: alinhado à esquerda, ocupa 100% da largura do
   container (sem cap estreito) — prioridade do Alisson é largura ampla,
   igual home/cardápio, nunca compacta. ─── */
.manifesto__corpo{
  width:100%;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:1.75rem;
  text-align:left;
}
.manifesto__corpo p{ margin:0; color:var(--texto) }

.manifesto__lead{
  font-size:1.15rem;
  line-height:1.55;
}

/* ─── Destaque: frase de maior peso, sem borda/fundo, só tipografia maior ─── */
.manifesto__destaque{
  margin-block:.5rem;
  font-size:1.3rem;
  line-height:1.4;
  font-weight:var(--peso-medio);
}
.manifesto__destaque--grande{
  font-size:clamp(1.6rem,4vw,2.2rem);
  line-height:1.25;
}
.manifesto__nota{
  margin-top:-1rem;
  font-size:.9rem;
  color:var(--texto-muted);
}

/* ─── Versos: linhas curtas empilhadas, itálico, sem moldura pontilhada ─── */
.manifesto__versos{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  margin-block:.5rem;
}
.manifesto__poetico{
  margin:0;
  font-family:var(--fonte-italica);
  font-style:italic;
  font-weight:var(--peso-regular);
  font-size:1.05rem;
  color:var(--texto);
}

/* ─── Rodapé: assinatura + CTA, full-width, centralizados ─── */
.manifesto__rodape{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  margin-top:clamp(3rem,7vw,5rem);
}

/* ─── Assinatura: nome + cargo, sem fio dourado ─── */
.manifesto__assinatura-nome{
  margin:0 0 .35rem;
  font-family:var(--fonte-italica);
  font-style:italic;
  font-weight:var(--peso-medio);
  font-size:1.4rem;
  color:var(--texto);
}
.manifesto__assinatura-cargo{
  margin:0;
  font-weight:var(--peso-medio);
  font-size:var(--tam-rotulo);
  letter-spacing:var(--tracking-rotulo);
  text-transform:uppercase;
  color:var(--vinho);
}

/* ─── CTA final (texto sublinhado, nunca botão) ─── */
.manifesto__cta{
  text-align:center;
  padding-top:clamp(2.5rem,6vw,4rem);
  width:100%;
  max-width:420px;
}
.manifesto__cta-texto{
  margin:0 0 1.25rem;
  color:var(--texto);
}
.manifesto__cta-links{ margin:0 }
.manifesto__cta-link{
  display:inline-block;
  font-weight:var(--peso-medio);
  color:var(--vinho);
  text-underline-offset:3px;
}
.manifesto__cta-sep{
  display:inline-block;
  margin:0 .6rem;
  color:var(--texto-muted);
}