/* ─────────────────────────────────────────────────────────────
   Site institucional — Empório Alecrim · detalhes e pessoas (todas as páginas)

   O site é servido por 3 folhas, e não uma, por DOIS motivos:

   1. Transferência. O canal de dados do FTP da Voope corta arquivos
      acima de ~20 KB (erro 451, truncado em 16384). O site.css havia
      chegado a 40,8 KB e deixou de subir.

   2. Peso da página. Dividido por PÁGINA, e não ao meio, cada tela
      baixa só o que usa — a home não carrega o estilo da consultoria,
      e a consultoria não carrega o da vitrine. Fica mais leve que o
      arquivo único que havia antes, e não mais pesado.

   Ornamentos, tipografia fina e "quem recebe" — que aparece na home E
   na página institucional, por isso não pode morar na folha da home.
   ───────────────────────────────────────────────────────────── */

/* ── Quem recebe ──────────────────────────────────────────── */
/* Uma marcação só serve a duas superfícies: a faixa da home e a página. Quem
   muda a densidade é o pai, não uma segunda lista de classes. */
.pessoas{
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--s-8) var(--s-6);
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
}
.pessoa{text-align:center}

/* Espaço reservado mesmo sem foto: quando o retrato entrar, a página não
   pula. É o mesmo motivo do aspect-ratio nas composições. */
.pessoa__retrato{
  aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius-lg);
  background:rgba(39,59,58,.05);margin-bottom:var(--s-4);
}
.pessoa__retrato img{width:100%;height:100%;object-fit:cover;display:block;background-size:cover}
.pessoa__retrato--vazio{
  background:
    repeating-linear-gradient(135deg,rgba(39,59,58,.03) 0 8px,transparent 8px 16px),
    rgba(39,59,58,.05);
}
.pessoa__nome{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:1.375rem;color:var(--c-deep-green);
}
.pessoa__papel{
  font-family:var(--font-descriptor);font-size:.6875rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;opacity:.7;margin-top:var(--s-2);
}
.pessoa__texto{margin-top:var(--s-3);line-height:1.65;opacity:.88;text-wrap:pretty}

/* Na página, o texto tem espaço para respirar. */
.institucional .pessoas{max-width:64rem;margin:0 auto var(--s-12);padding:0 var(--s-4)}
/* ── Detalhes tipográficos ────────────────────────────────────
   Refinamentos que só aparecem quando se olha de perto, mas que
   separam um texto composto de um texto apenas escrito. */

/* Texto lido por leitor de tela, invisível na tela. */
.rotulo-oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* O serif de display abre demais nos tamanhos grandes: um leve aperto
   devolve a densidade que a fonte tem no corpo do texto. */
.abertura-slide__texto h2,
.curadoria__abertura h1,
.abertura__titulo,
.bl-citacao p{
  letter-spacing:-0.015em;
}

/* Algarismos antigos no serif: em "Av. Daltro Filho, 753" e nas datas,
   eles se acomodam à altura-x em vez de saltarem como caixa-alta. */
.visit__address,
.curadoria__subtitulo,
.rodape__frase{
  font-variant-numeric:oldstyle-num;
  font-feature-settings:"onum" 1;
}

/* Aspas e travessões saem para a margem, alinhando opticamente a
   primeira letra com o restante do bloco. */
.bl-citacao p,
.rodape__frase{
  hanging-punctuation:first last;
}

/* Onde há muito texto corrido, o hífen evita rios de espaço em telas
   estreitas — sem ele o texto justo do celular fica esburacado. */
.curadoria__texto p,
.bl-manifesto p,
.pessoa__texto{
  hyphens:auto;
  -webkit-hyphens:auto;
}

/* ── Onde estou ───────────────────────────────────────────── */
.cabecalho__nav a.esta-aqui{
  opacity:1;
  border-bottom-color:var(--c-deep-green);
}


/* ═══════════════════════════════════════════════════════════════════
   OS DETALHES
   "O encanto está nos detalhes" é a frase da casa, e até aqui o site
   não a cumpria: era correto e mudo. O que vem abaixo são acréscimos
   deliberadamente pequenos — quem passa não é interrompido por eles,
   quem repara os encontra. Nenhum deles carrega arquivo, nenhum
   depende de JavaScript, e todos respeitam quem pediu menos movimento.
   ═══════════════════════════════════════════════════════════════════ */

/* ── O papel ────────────────────────────────────────────────────────
   Uma trama quase invisível sobre o alabastro, para a página deixar de
   ser uma chapa de cor lisa e passar a ter superfície. Dois gradientes
   cruzados a 3% de opacidade: custa zero requisição e some no ruído da
   própria tela — o efeito é sentido, não visto. `fixed` para a trama
   não deslizar junto com o texto, que denunciaria o truque. */
body.site{
  background-image:
    repeating-linear-gradient(64deg,  rgba(39,59,58,.030) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-58deg, rgba(39,59,58,.022) 0 1px, transparent 1px 6px);
  background-attachment:fixed;
}

/* ── O ramo de alecrim ──────────────────────────────────────────────
   O nome da loja virando desenho. Separa as seções e assina o rodapé. */
/* Mesmo arranjo do /bio/ (`.rule`): dois fios que esmaecem para fora e o
   ramo no meio. É o separador da casa — repetir o gesto em vez de inventar
   um segundo é o que faz a marca parecer uma marca só. */
.rodape__ramo{
  display:flex;align-items:center;gap:var(--s-4);
  margin:0 auto var(--s-6);max-width:17rem;
  /* Discreto de propósito: é assinatura, não ilustração. A 0.45 sobre o
     alabastro ele se nota quando alguém repara e desaparece quando não. */
  color:var(--c-deep-green);opacity:.45;
}
.rodape__ramo::before,
.rodape__ramo::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--border),transparent);
}
.rodape__ramo .ramo{display:block;flex:none;width:56px;height:auto}

/* A frase destacada ganha o ramo acima dela: é o lugar onde a página
   respira, e onde um ornamento não atrapalha leitura nenhuma. */
/* O desenho vem do PHP (Icones::ramo), não de um data URI aqui: um caminho
   de 2 KB copiado no CSS seria um segundo ramo esperando para divergir do
   primeiro. Aqui fica só o tamanho e a cor. */
.bl-citacao__ramo{
  display:block;line-height:0;margin:0 auto var(--s-4);
  color:var(--c-deep-green);opacity:.45;
}
.bl-citacao__ramo svg{display:inline-block;width:56px;height:auto}

/* ── Fio sob os títulos de seção ────────────────────────────────────
   Um fio curto e centralizado, que esmaece nas pontas. Substitui o
   nada que havia entre o título e a grade — dá pé ao título sem
   precisar de mais peso tipográfico. */
.bl-portais h2::after,
.bl-destaques h2::after,
.composicao-lista h2::after,
.relacionadas h2::after,
.variacoes h2::after{
  content:"";display:block;width:72px;height:1px;margin:var(--s-4) auto 0;
  /* Esmaece nas duas pontas: um fio que começa e termina em traço seco
     parece um traço esquecido; assim ele parece pousado na página. */
  background:linear-gradient(90deg,
    transparent, var(--c-old-rose) 30%, var(--c-old-rose) 70%, transparent);
  opacity:.6;
}

/* ── As fotografias ─────────────────────────────────────────────────
   Um fio por dentro da borda, como o filete de uma moldura. Fica por
   cima da imagem com `inset` e não desloca nada — é o detalhe que
   transforma "foto na página" em "foto emoldurada". */
.composicao-lista figure,
.bl-portais figure,
.bl-destaques figure,
.pessoa__retrato,
.capa-categoria{position:relative}
.composicao-lista figure::after,
.bl-portais figure::after,
.bl-destaques figure::after,
.pessoa__retrato::after,
.capa-categoria::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(245,238,228,.42);
  border-radius:inherit;
}

/* Aproximação lenta ao passar o mouse. `both` no fill-mode não se aplica
   aqui porque é transição, não animação — e o estado base é a imagem
   inteira e visível, nunca `opacity:0`, que deixaria a página refém do
   efeito (CONTEXTO_MARCA §12). */
.composicao-lista figure img,
.bl-portais figure img,
.bl-destaques figure img{
  transition:transform 900ms var(--ease);
}
@media (hover:hover){
  .composicao-lista figure:hover img,
  .bl-portais figure:hover img,
  .bl-destaques figure:hover img{transform:scale(1.035)}
}
@media (prefers-reduced-motion:reduce){
  .composicao-lista figure img,
  .bl-portais figure img,
  .bl-destaques figure img{transition:none}
  .composicao-lista figure:hover img,
  .bl-portais figure:hover img,
  .bl-destaques figure:hover img{transform:none}
}

/* ── Redes sociais em ícone ─────────────────────────────────────────
   Círculo de fio fino, do tamanho do polegar: 44px é o mínimo que o
   toque acerta sem erro, e o público daqui é majoritariamente celular. */
.rodape__redes{gap:var(--s-3)}
.rodape__redes a{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--border);color:var(--c-deep-green);
  transition:border-color var(--dur) var(--ease),
             background-color var(--dur) var(--ease),
             color var(--dur) var(--ease);
}
.rodape__redes a:hover,
.rodape__redes a:focus-visible{
  border-color:var(--c-deep-green);
  background:var(--c-deep-green);
  color:var(--c-alabaster);
}
.icone{display:block}


/* ── Pedir uma peça do conjunto ─────────────────────────────────────
   A lista de peças era descrição e nada mais; quem se interessava por
   uma tinha de escrever do zero dizendo qual. Agora cada linha é um
   pedido possível — discreto, para a lista continuar se lendo como
   lista e não como catálogo de botões. */
.composicao-lista__pedir{
  display:inline-block;margin-top:.35rem;
  font-family:var(--font-descriptor);font-size:.6875rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--c-deep-green);text-decoration:none;
  border-bottom:1px solid var(--accent);padding-bottom:2px;
  opacity:.75;transition:opacity var(--dur) var(--ease);
}
.composicao-lista__pedir:hover,
.composicao-lista__pedir:focus-visible{opacity:1}


/* ── Blocos das páginas ─────────────────────────────────────────────
   Estas regras moravam em site-home.css e por isso só existiam na home.
   Mas os blocos (views/site/blocos/*) servem a QUALQUER página
   institucional: ao dividir a folha por página em 09/09/2026, o
   `.bl-manifesto` — o layout de todo trecho de texto — sumiu de
   /a-emporio/, /visite-a-casa/, /privacidade/ e /termos/. Achado por
   auditoria automática de classes x folhas carregadas, em 10/09. */
/* ── Abertura ─────────────────────────────────────────────── */
.bl-hero{position:relative;margin-bottom:var(--s-16)}
.bl-hero__foto{width:100%;aspect-ratio:16/10;overflow:hidden;background:rgba(39,59,58,.05)}
.bl-hero__foto img{width:100%;height:100%;object-fit:cover;display:block;background-size:cover}
.bl-hero__texto{
  max-width:34rem;margin:0 auto;padding:var(--s-10) var(--s-4) 0;text-align:center;
}
.bl-hero__texto h1{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(2rem,7vw,3.25rem);line-height:1.12;color:var(--c-deep-green);
  text-wrap:balance;
}
.bl-hero__texto p{margin-top:var(--s-4);font-size:1.0625rem;line-height:1.65;opacity:.88;text-wrap:pretty}
.bl-hero__texto .botao-marca{margin-top:var(--s-6)}
/* ── Manifesto ────────────────────────────────────────────── */
.bl-manifesto{
  max-width:34rem;margin:0 auto var(--s-16);padding:0 var(--s-4);
  text-align:center;font-size:1.0625rem;line-height:1.7;
}
.bl-manifesto h2{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:1.75rem;color:var(--c-deep-green);margin-bottom:var(--s-4);
}
.bl-manifesto p + p{margin-top:var(--s-4)}
/* ── Frase solta ──────────────────────────────────────────── */
.bl-citacao{
  max-width:30rem;margin:0 auto var(--s-16);padding:var(--s-12) var(--s-4);text-align:center;
}
.bl-citacao p{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(1.5rem,5vw,2rem);line-height:1.3;color:var(--c-deep-green);
  text-wrap:balance;
}
.convite__apoio{margin-top:calc(var(--s-6) * -1);margin-bottom:var(--s-6);opacity:.8;font-size:.9375rem}
.composicao__linha{
  display:block;margin-top:4px;
  font-family:var(--font-descriptor);font-size:.6875rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;opacity:.6;
}

/* ── Trecho com retrato (bloco "curadora") ──────────────────────────
   O editor de blocos oferece este tipo para qualquer página, mas nenhuma
   folha o estilizava: `.bl-curadora__retrato` e `__texto` saíam sem
   layout. Passou despercebido porque nenhuma página viva o usava — a
   auditoria automática só vê o que está no ar. Achado ao conferir cada
   parcial de bloco contra as folhas, em 10/09/2026.

   Escopado com :not(--faixa): a faixa "quem recebe" da home também leva
   a classe `bl-curadora`, com outra estrutura interna. */
.bl-curadora:not(.bl-curadora--faixa){
  max-width:60rem;margin:0 auto var(--s-16);padding:0 var(--s-4);
  display:grid;gap:var(--s-8);align-items:center;
  grid-template-columns:minmax(0,2fr) minmax(0,3fr);
}
.bl-curadora__retrato{
  aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius-lg);
  background:rgba(39,59,58,.05);
}
.bl-curadora__retrato img{width:100%;height:100%;object-fit:cover;display:block}
.bl-curadora__texto h2{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(1.6rem,3.2vw,2.1rem);line-height:1.2;
  color:var(--c-deep-green);text-wrap:balance;
}
.bl-curadora__texto p{margin-top:var(--s-4);line-height:1.75;text-wrap:pretty}
.bl-curadora__texto .botao-marca{margin-top:var(--s-6)}
/* Sem retrato, o texto não fica espremido numa coluna ao lado do nada. */
.bl-curadora:not(.bl-curadora--faixa):not(:has(.bl-curadora__retrato)){
  grid-template-columns:minmax(0,1fr);max-width:38rem;text-align:center;
}
@media (max-width:720px){
  .bl-curadora:not(.bl-curadora--faixa){
    grid-template-columns:minmax(0,1fr);gap:var(--s-6);text-align:center;
  }
  .bl-curadora__retrato{max-width:20rem;width:100%;margin:0 auto}
}