/* ─────────────────────────────────────────────────────────────
   Site institucional — Empório Alecrim · base (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.

   Esta vem sempre, primeiro. Cabeçalho, rodapé, convite, páginas de
   categoria e de composição, consultoria e espera.
   ───────────────────────────────────────────────────────────── */

body.site{
  padding:0;
  display:block;
  background:var(--bg);
  color:var(--text);
}

.pula{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--c-deep-green);color:var(--c-alabaster);
  padding:.7rem 1.2rem;border-radius:0 0 var(--radius) 0;
}
.pula:focus{left:0}

/* ── Cabeçalho ────────────────────────────────────────────── */
/* Compacto de propósito no computador: em 09/09/2026 o cabeçalho media
   260px de uma janela de 900 — 29% da primeira tela para um logotipo e
   quatro links, empurrando a fotografia para fora. O logo continua o
   maior elemento, só que proporcional à tela, não a si mesmo. */
.cabecalho{
  display:flex;flex-direction:column;align-items:center;gap:var(--s-4);
  padding:var(--s-6) var(--s-4);
  text-align:center;
}
.cabecalho__marca img{width:min(10.5rem,52vw);height:auto;display:block}
@media (max-width:640px){
  /* No celular a primeira tela é ainda mais escassa. */
  .cabecalho{padding:var(--s-4) var(--s-4) var(--s-3);gap:var(--s-3)}
  .cabecalho__marca img{width:min(8.5rem,46vw)}
}
.cabecalho__nav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-4) var(--s-6);
}
.cabecalho__nav a{
  font-family:var(--font-descriptor);
  font-size:.75rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text);text-decoration:none;opacity:.8;
  padding-bottom:3px;border-bottom:1px solid transparent;
  transition:opacity var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.cabecalho__nav a:hover{opacity:1;border-bottom-color:var(--accent)}

/* Institucionais no cabeçalho — deliberadamente mais discretas que as linhas
   da curadoria: menores, sem caixa alta e sem o espaçamento de letras. A
   hierarquia precisa dizer, só pela forma, qual das duas navegações é a
   principal. */
.cabecalho__institucional{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-4);
  margin-top:calc(var(--s-6) * -.5);
}
.cabecalho__institucional a{
  font-family:var(--font-display);font-style:italic;font-size:.9375rem;
  color:var(--c-deep-green);text-decoration:none;opacity:.75;
  border-bottom:1px solid transparent;
  transition:opacity var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.cabecalho__institucional a:hover,
.cabecalho__institucional a.esta-aqui{opacity:1;border-bottom-color:var(--accent)}

/* ── Capa panorâmica da categoria ─────────────────────────── */
.capa-categoria{width:100%;aspect-ratio:21/9;overflow:hidden;background:rgba(39,59,58,.05)}
.capa-categoria img{width:100%;height:100%;object-fit:cover;background-size:cover}

/* ── Abertura editorial ───────────────────────────────────── */
.abertura{
  max-width:38rem;margin:0 auto;padding:var(--s-12) var(--s-4) var(--s-8);text-align:center;
}
.abertura__titulo{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(2rem,7vw,3rem);line-height:1.15;color:var(--c-deep-green);
  text-wrap:balance;
}
.abertura__texto{
  margin-top:var(--s-4);font-size:1.0625rem;line-height:1.6;
  text-wrap:pretty;opacity:.85;
}

/* ── Filtro de ocasião ────────────────────────────────────── */
.ocasioes{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2) var(--s-3);
  max-width:44rem;margin:0 auto var(--s-10);padding:0 var(--s-4);
}
.ocasioes a{
  font-size:.875rem;text-decoration:none;color:var(--text);
  padding:.4rem .9rem;border:1px solid var(--border);border-radius:999px;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.ocasioes a:hover{border-color:var(--accent)}
.ocasioes a.ativa{background:var(--c-deep-green);border-color:var(--c-deep-green);color:var(--c-alabaster)}

/* ── Grade de composições ─────────────────────────────────── */
.grade{
  display:grid;gap:var(--s-8) var(--s-6);
  grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));
  max-width:72rem;margin:0 auto;padding:0 var(--s-4) var(--s-16);
}
.grade--compacta{grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));padding-bottom:var(--s-8)}

.composicao{text-decoration:none;color:inherit;display:block}
.composicao__foto{
  aspect-ratio:4/5;overflow:hidden;background:rgba(39,59,58,.05);
  border-radius:var(--radius);
}
.composicao__foto img{
  width:100%;height:100%;object-fit:cover;background-size:cover;
  transition:transform 600ms var(--ease);
}
@media (hover:hover){
  .composicao:hover .composicao__foto img{transform:scale(1.03)}
}
.composicao__texto{padding-top:var(--s-3);text-align:center}
.composicao__texto h2,.composicao__texto h3{
  font-family:var(--font-display);font-size:1.375rem;font-weight:400;
  color:var(--c-deep-green);line-height:1.2;
}
.composicao__texto p{font-size:.9375rem;opacity:.75;margin-top:4px;text-wrap:pretty}
.selo-acervo{
  display:inline-block;margin-top:var(--s-2);
  font-family:var(--font-descriptor);font-size:.6875rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-deep-berry);opacity:.85;
}

.vazio-publico{
  max-width:34rem;margin:0 auto;padding:var(--s-12) var(--s-4);
  text-align:center;font-family:var(--font-display);font-style:italic;
  font-size:1.25rem;color:var(--c-deep-green);opacity:.8;
}

/* ── Página da composição ─────────────────────────────────── */
.curadoria{max-width:60rem;margin:0 auto;padding:0 var(--s-4) var(--s-16)}

.migalhas{
  display:flex;gap:var(--s-2);justify-content:center;align-items:center;
  font-family:var(--font-descriptor);font-size:.6875rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin-bottom:var(--s-6);
}
.migalhas a{color:var(--text)}

.curadoria__abertura{text-align:center;max-width:38rem;margin:0 auto var(--s-10)}
.curadoria__abertura h1{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.25rem,8vw,3.5rem);line-height:1.1;color:var(--c-deep-green);
  text-wrap:balance;
}
.curadoria__subtitulo{
  font-family:var(--font-display);font-style:italic;font-size:1.25rem;
  margin-top:var(--s-3);opacity:.85;text-wrap:pretty;
}
.curadoria__etiquetas{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);justify-content:center;
  margin-top:var(--s-4);font-size:.8125rem;
}
.curadoria__etiquetas a,.curadoria__etiquetas span{
  padding:.25rem .7rem;border:1px solid var(--border);border-radius:999px;
  color:var(--text);text-decoration:none;
}

.curadoria__capa{margin:0 0 var(--s-12);border-radius:var(--radius-lg);overflow:hidden}
.curadoria__capa img{width:100%;height:auto;display:block;background-size:cover}

.curadoria__texto{
  max-width:34rem;margin:0 auto var(--s-12);
  font-size:1.0625rem;line-height:1.7;
}
.curadoria__texto p + p{margin-top:var(--s-4)}


.composicao-lista{max-width:38rem;margin:0 auto var(--s-12)}
.composicao-lista h2,.variacoes h2,.relacionadas h2{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:1.5rem;color:var(--c-deep-green);text-align:center;margin-bottom:var(--s-6);
}
.composicao-lista ul{list-style:none;display:flex;flex-direction:column;gap:var(--s-3)}
.composicao-lista li{
  display:flex;flex-direction:column;gap:2px;
  padding-bottom:var(--s-3);border-bottom:1px solid var(--border);
}
.composicao-lista li:last-child{border-bottom:0}
.composicao-lista strong{font-weight:500;font-size:1rem}
.composicao-lista span{
  font-family:var(--font-descriptor);font-size:.6875rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;opacity:.6;
}
.composicao-lista small{font-size:.875rem;opacity:.75}


.variacoes{max-width:34rem;margin:0 auto var(--s-12);text-align:center;line-height:1.7}


/* ── Convite à consultoria ────────────────────────────────── */
.reserva,.convite{
  max-width:34rem;margin:0 auto var(--s-12);text-align:center;
  padding:var(--s-10) var(--s-6);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
}
.reserva__frase,.convite__frase{
  font-family:var(--font-display);font-style:italic;font-size:1.375rem;
  color:var(--c-deep-green);margin-bottom:var(--s-6);text-wrap:balance;
}
.reserva__nota{
  font-family:var(--font-descriptor);font-size:.6875rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--c-deep-berry);
  margin-bottom:var(--s-3);
}
.botao-marca{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:.8rem 1.8rem;
  background:var(--primary);color:var(--on-primary);
  border:1px solid var(--primary);border-radius:var(--radius);
  font-weight:500;text-decoration:none;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.botao-marca:hover{background:var(--c-brunswick)}
.botao-marca--discreto{
  background:transparent;color:var(--c-deep-green);border-color:var(--border);
  margin-top:var(--s-3);
}
.botao-marca--discreto:hover{background:transparent;border-color:var(--accent)}

.relacionadas{margin-top:var(--s-16)}

/* ── Rodapé ───────────────────────────────────────────────── */
.rodape{
  text-align:center;padding:var(--s-16) var(--s-4) var(--s-12);
  border-top:1px solid var(--border);margin-top:var(--s-16);
}
.rodape__frase{
  font-family:var(--font-display);font-style:italic;font-size:1.25rem;
  color:var(--c-deep-green);
}
.rodape__descritor{
  font-family:var(--font-descriptor);font-size:.6875rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;opacity:.7;margin-top:var(--s-4);
}
.rodape__endereco{font-size:.9375rem;opacity:.75;margin-top:var(--s-2)}
/* `--s-5` não existe na paleta: `gap:var(--s-2) var(--s-5)` era inválida
   inteira e o espaçamento caía para zero — os links do rodapé apareciam
   grudados, lidos como uma palavra só. Toda a paleta é par a partir do 4
   (--s-4, --s-6, --s-8...); usar um número ímpar aqui foi engano meu. */
.rodape__paginas{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--s-3) var(--s-6);margin-top:var(--s-8);
}
.rodape__paginas a{
  font-family:var(--font-descriptor);font-size:.6875rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--text);text-decoration:none;opacity:.7;
  padding-bottom:2px;border-bottom:1px solid transparent;
  transition:opacity var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.rodape__paginas a:hover,
.rodape__paginas a:focus-visible{opacity:1;border-bottom-color:var(--accent)}

/* Privacidade e Termos: presentes, encontráveis, e deliberadamente mais
   quietos que o resto. São links que se procuram, não que se oferecem. */
.rodape__legal{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--s-2) var(--s-4);margin-top:var(--s-4);
}
.rodape__legal a{
  font-size:.75rem;color:var(--text);text-decoration:none;opacity:.55;
  transition:opacity var(--dur) var(--ease);
}
.rodape__legal a:hover,
.rodape__legal a:focus-visible{opacity:.9;text-decoration:underline}
/* Ponto médio separando os itens. Só entre irmãos, nunca antes do
   primeiro — é pontuação, não marcador de lista. */
.rodape__legal a + a::before{
  content:"·";margin-right:var(--s-4);opacity:.5;
}
.rodape__redes{display:flex;justify-content:center;gap:var(--s-4);margin-top:var(--s-6)}
.rodape__redes a{
  font-size:.875rem;color:var(--c-deep-green);
}

@media (max-width:640px){
    .capa-categoria{aspect-ratio:3/2}
}

/* ── Galeria da composição ────────────────────────────────── */
.galeria{margin-bottom:var(--s-12)}
/* Masonry por colunas CSS. Preferi isto a grid-template-rows:masonry, que
   ainda não tem suporte confiável, e a uma biblioteca JS, que só recolocaria
   os itens depois que as fotos carregassem — o layout saltaria à vista.
   A contrapartida honesta: a leitura desce por coluna em vez de atravessar
   por linha. Numa galeria de fotos isso não atrapalha. */
.galeria__grade{
  columns:3;
  column-gap:var(--s-3);
}
@media (max-width:900px){ .galeria__grade{columns:2} }
@media (max-width:480px){ .galeria__grade{columns:2;column-gap:var(--s-2)} }

/* A primeira foto atravessa as colunas. Quem chega pelo Instagram está
   acostumado a imagem cheia — isso dá fôlego à fotografia logo na entrada da
   galeria, sem tornar as catorze seguintes pesadas. */
.galeria__foto:first-child{column-span:all;margin-bottom:var(--s-4)}
.galeria__foto{
  padding:0;border:0;background:none;cursor:zoom-in;
  display:block;width:100%;
  border-radius:var(--radius);overflow:hidden;
  /* Impede a foto de ser partida ao meio na quebra de coluna. */
  break-inside:avoid;
  margin-bottom:var(--s-3);
}
.galeria__foto img{
  width:100%;
  /* height:auto é obrigatório: os atributos width/height do HTML — que existem
     para reservar espaço e evitar salto de layout — viram um height explícito
     em pixels e venceriam qualquer altura vinda do CSS. Com height:auto a
     proporção real da foto é respeitada, que é o ponto do masonry. */
  height:auto;
  display:block;
  background-size:cover;background-position:center;
  transition:transform 600ms var(--ease);
}
@media (hover:hover){
  .galeria__foto:hover img{transform:scale(1.03)}
}
.galeria__foto:focus-visible{outline:2px solid var(--c-deep-berry);outline-offset:3px}


@media (max-width:640px){
  /* Menos altura antes da primeira foto: no celular, cada 100px de cabeçalho
     é uma foto a menos visível na primeira tela. */
  .cabecalho{padding:var(--s-6) var(--s-4) var(--s-4);gap:var(--s-4)}
  .cabecalho__marca img{width:min(9.5rem,48vw)}
  .curadoria__abertura{margin-bottom:var(--s-6)}
  .migalhas{margin-bottom:var(--s-4)}

}

/* ── Consultoria ──────────────────────────────────────────── */
.consultoria,.obrigado{max-width:38rem;margin:0 auto;padding:0 var(--s-4) var(--s-16)}
.obrigado{text-align:center;padding-top:var(--s-12)}
.obrigado__atalho,.obrigado__voltar{margin-top:var(--s-4)}
.obrigado a{color:var(--c-deep-green)}

.jornada{
  list-style:none;display:grid;gap:var(--s-4);
  grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));
  margin:0 0 var(--s-12);
}
.jornada li{display:flex;flex-direction:column;gap:4px;text-align:center}
.jornada span{
  font-family:var(--font-display);font-size:1.5rem;color:var(--c-old-rose);
  line-height:1;
}
.jornada strong{font-weight:500}
.jornada small{font-size:.875rem;opacity:.75;text-wrap:pretty}

.form-consultoria{display:flex;flex-direction:column;gap:var(--s-6)}
.form-consultoria__contexto{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--s-3) var(--s-4);font-size:.9375rem;
}
.form-consultoria__atalho{font-size:.9375rem;text-align:center;opacity:.85}
.form-consultoria__atalho a{color:var(--c-deep-green)}

.campo-publico{display:flex;flex-direction:column;gap:6px;border:0;padding:0;margin:0}
.campo-publico label,.campo-publico legend{font-size:.9375rem;font-weight:500;padding:0}
.campo-publico small{font-size:.875rem;opacity:.7}
.campo-publico input[type="text"],
.campo-publico select,
.campo-publico textarea{
  font:inherit;
  /* 16px evita o zoom automático do iOS ao focar o campo */
  font-size:16px;
  padding:.85rem .9rem;
  color:var(--text);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);
  min-height:48px;
}
.campo-publico textarea{min-height:6rem;resize:vertical}
.campo-publico input:focus,.campo-publico select:focus,.campo-publico textarea:focus{
  border-color:var(--primary);outline:2px solid transparent;outline-offset:2px;
}
.campo-publico :where(input,select,textarea):focus-visible{
  outline:2px solid var(--c-deep-berry);outline-offset:2px;
}
.escolhas{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6)}
.escolhas label{display:flex;align-items:center;gap:.5rem;min-height:44px;font-weight:400}
.campo-publico--consentimento label{
  display:flex;align-items:flex-start;gap:.6rem;font-weight:400;font-size:.9375rem;line-height:1.5;
}
.campo-publico--consentimento input{margin-top:.2rem;min-width:20px;min-height:20px}

/* Isca anti-robô: invisível para gente, presente para quem preenche tudo. */
.isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.alerta-publico{
  background:rgba(187,103,101,.1);border-left:3px solid var(--c-old-rose);
  padding:var(--s-3) var(--s-4);border-radius:var(--radius);margin-bottom:var(--s-6);
}

/* ── Página de espera ─────────────────────────────────────── */
.espera{
  position:relative;
  min-height:60vh;
  display:grid;place-items:center;
  padding:var(--s-16) var(--s-4);
  text-align:center;
}
.espera__fundo{position:absolute;inset:0;overflow:hidden;z-index:0}
.espera__fundo img{
  width:100%;height:100%;object-fit:cover;display:block;
  background-size:cover;
  /* A fotografia fica presente mas não disputa com o texto. */
  opacity:.22;
}
.espera__conteudo{position:relative;z-index:1;max-width:34rem}
.espera__selo{
  font-family:var(--font-descriptor);font-size:.6875rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;opacity:.7;
}
.espera__titulo{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(2rem,7vw,3rem);line-height:1.15;color:var(--c-deep-green);
  margin-top:var(--s-4);text-wrap:balance;
}
.espera__texto{
  margin-top:var(--s-4);font-size:1.0625rem;line-height:1.65;
  text-wrap:pretty;opacity:.88;
}
.espera__acoes{
  display:flex;flex-direction:column;align-items:center;gap:var(--s-3);
  margin-top:var(--s-8);
}

/* ═══ Blocos da página inicial ══════════════════════════════ */