/* LUMIÈRE · paginas.css: Sobre (/manifesto), Entrega e trocas, Perguntas frequentes e 404.
 * Sistema novo (30/10/2026, padrão da Donna Carioca com a paleta da Lumière): a mesma loja do topo ao fim,
 * Montserrat, ícones Lucide, cards com raio de 16 px. Celular primeiro; vale em toda largura
 * (css_todas_larguras nos dados das páginas, _fonte/paginas/textos.mjs). Peças comuns que estas páginas
 * usam (sanfona, prateleira, cartão de produto, busca): site/css/comum.css.
 * Regra do dono: nenhum texto sobre modelo (a foto do Sobre fica ao lado do texto; no celular, em cima). */

/* =====================================================================================================
 * Sobre: banner (foto e painel nude), três blocos com ícone, a promessa, a prateleira e o WhatsApp
 * ===================================================================================================== */
.sobre__banner {
  display: grid;
  width: var(--pagina);
  margin: 16px auto 0;
  overflow: hidden;
  border-radius: var(--raio-card);
  background: var(--nude);
}
.sobre__foto-caixa { min-height: 0; }
.sobre__foto, .sobre__foto img { display: block; width: 100%; height: 100%; }
.sobre__foto img { aspect-ratio: 3 / 2; object-fit: cover; object-position: 40% 35%; background: var(--pessego); }
.sobre__painel { display: grid; align-content: center; gap: 14px; padding: 24px 20px 28px; }
.sobre__rotulo { color: var(--cafe); }
.sobre__titulo { font: 700 clamp(28px, 7.4vw, 34px) / 1.08 var(--f-texto); letter-spacing: -.02em; text-wrap: balance; }
.sobre__painel > p:not(.micro) { max-width: 52ch; font: 400 16px / 1.6 var(--f-texto); }

.sobre__blocos { width: var(--pagina); margin: var(--respiro-secao) auto 0; }
.sobre__lista { display: grid; gap: 12px; }
.sobre-bloco {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 8px;
  padding: 22px 20px 24px;
  border-radius: var(--raio-card);
  box-shadow: inset 0 0 0 1px var(--linha);
  background: var(--papel);
}
.sobre-bloco__icone { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 4px; border-radius: 50%; background: var(--nude); color: var(--cobre-profundo); }
.sobre-bloco__titulo { font: 700 18px / 1.3 var(--f-texto); }
.sobre-bloco__texto { font: 400 15px / 1.55 var(--f-texto); }
.sobre-bloco__link { min-height: 40px; }

.promessa {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: var(--pagina);
  margin: var(--respiro-secao) auto 0;
  padding: 32px 20px;
  border-radius: var(--raio-card);
  background: var(--pessego);
  text-align: center;
}
.promessa__rotulo { color: var(--cafe); }
/* cada frase na sua linha (nenhuma palavra sozinha no fim da primeira) */
.promessa__frase span { display: block; }
.promessa__frase { max-width: 40ch; font: 500 clamp(20px, 1rem + 1vw, 28px) / 1.35 var(--f-texto); letter-spacing: -.01em; text-wrap: balance; }

.sobre__contato {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: var(--pagina);
  margin: var(--respiro-secao) auto 0;
  text-align: center;
}
.sobre__contato-titulo { font: 700 clamp(22px, 1rem + 1vw, 28px) / 1.2 var(--f-texto); }
.sobre__contato-acao { display: grid; justify-items: center; gap: 8px; margin-top: 16px; }

@media (min-width: 760px) {
  .sobre__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .sobre-bloco { padding: 28px 28px 30px; }
  .promessa { padding: 48px 32px; }
}
@media (min-width: 900px) {
  .sobre__banner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); margin-top: 24px; }
  .sobre__foto img { aspect-ratio: auto; min-height: 100%; }
  .sobre__painel { gap: 16px; padding: clamp(32px, 4vw, 64px); }
  .sobre__titulo { font-size: clamp(32px, 1rem + 2vw, 48px); }
}

/* =====================================================================================================
 * Ajuda (Entrega e trocas, Perguntas frequentes): título, resumo em peças com ícone e a sanfona comum
 * ===================================================================================================== */
/* coluna única centrada (até 1000 px): o resumo e as sanfonas na mesma largura, sem vazio de um lado só */
.ajuda { width: min(var(--pagina), 1000px); margin-inline: auto; padding-top: 28px; }
.ajuda__cabeca { display: grid; gap: 8px; max-width: 760px; }
.ajuda__rotulo { color: var(--cobre-texto); }
.ajuda__titulo { font: 700 clamp(28px, 1rem + 2vw, 44px) / 1.1 var(--f-texto); letter-spacing: -.02em; text-wrap: balance; }
.ajuda__intro { max-width: 56ch; font: 400 16px / 1.55 var(--f-texto); color: var(--tinta-2); }

.resumo-ajuda { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 24px 0 0; }
.resumo-ajuda__item { display: grid; align-content: start; gap: 4px; padding: 16px 14px; border-radius: var(--raio-card); background: var(--nude); }
.resumo-ajuda__icone { margin-bottom: 4px; color: var(--cobre-profundo); }
.resumo-ajuda__titulo { font: 700 15px / 1.3 var(--f-texto); }
.resumo-ajuda__texto { font: 400 13px / 1.45 var(--f-texto); }

.ajuda__corpo { margin-top: 32px; }
.ajuda__corpo .sanfona__corpo p { max-width: 68ch; }
.ajuda__pendente { margin-top: -4px; }
.ajuda__acao { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ajuda__fim { margin-top: 20px; color: var(--tinta-2); }
.ajuda__outras { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 12px; }
.ajuda__fim-caixa { display: grid; justify-items: start; gap: 12px; margin-top: 32px; padding: 24px 20px; border-radius: var(--raio-card); background: var(--nude); }
.ajuda__fim-titulo { font: 700 20px / 1.25 var(--f-texto); }

@media (max-width: 640px) {
  .ajuda__acao .botao { width: 100%; }
}
@media (min-width: 900px) {
  .ajuda { padding-top: 40px; }
  .resumo-ajuda { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
  .resumo-ajuda__item { padding: 20px; }
  .ajuda__corpo { margin-top: 40px; }
  .ajuda__fim-caixa { padding: 28px 32px; }
}

/* =====================================================================================================
 * 404: caixa clara (papel com contorno) e curta, a busca (a MESMA pílula nude da busca do cabeçalho, do menu e
 * de Todos os produtos) e os escolhidos
 * ===================================================================================================== */
.erro { padding-top: 24px; }
.erro__caixa {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: var(--pagina);
  max-width: 720px;
  margin-inline: auto;
  padding: 32px 20px;
  border-radius: var(--raio-card);
  background: var(--papel);
  box-shadow: inset 0 0 0 1px var(--linha);
  text-align: center;
}
.erro__icone { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--nude); color: var(--cobre-profundo); }
.erro__titulo { font: 700 clamp(26px, 1rem + 1.6vw, 38px) / 1.12 var(--f-texto); letter-spacing: -.02em; text-wrap: balance; }
.erro__corpo { max-width: 46ch; }
.erro__busca { width: 100%; margin-top: 6px; text-align: left; }
.erro__acoes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 24px; margin-top: 4px; }
@media (max-width: 640px) {
  .erro__acoes .botao { width: 100%; }
}
@media (min-width: 641px) {
  .erro { padding-top: 40px; }
  .erro__caixa { padding: 48px 48px 40px; }
}