/* ─────────────────────────────────────────────────────────────
   Site institucional — Empório Alecrim · seções da página inicial

   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.

   Carregada só na home, pelo HomeController.
   ───────────────────────────────────────────────────────────── */













/* ── Portais das curadorias ───────────────────────────────── */
.bl-portais{max-width:72rem;margin:0 auto var(--s-16);padding:0 var(--s-4)}
.bl-portais h2,.bl-destaques h2{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:1.75rem;color:var(--c-deep-green);text-align:center;margin-bottom:var(--s-3);
}
.bl-portais__apoio{text-align:center;opacity:.8;margin-bottom:var(--s-8);text-wrap:pretty}
.bl-portais__grade{
  display:grid;gap:var(--s-6) var(--s-4);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.portal{text-decoration:none;color:inherit;text-align:center;display:block}
.portal__foto{aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius);background:rgba(39,59,58,.05)}
.portal__foto img{width:100%;height:100%;object-fit:cover;display:block;background-size:cover;
                  transition:transform 700ms var(--ease)}
@media (hover:hover){ .portal:hover .portal__foto img{transform:scale(1.04)} }
.portal h3{
  font-family:var(--font-display);font-size:1.375rem;font-weight:400;
  color:var(--c-deep-green);margin-top:var(--s-3);line-height:1.2;
}
.portal__nome{
  display:block;margin-top:2px;
  font-family:var(--font-descriptor);font-size:.6875rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;opacity:.65;
}

.bl-destaques{max-width:72rem;margin:0 auto var(--s-16)}
.bl-destaques .grade{padding-bottom:0}

/* ── Celebração em destaque ───────────────────────────────── */
.bl-celebracao{
  display:grid;gap:var(--s-8);align-items:center;
  max-width:72rem;margin:0 auto var(--s-16);padding:0 var(--s-4);
  grid-template-columns:1fr 1fr;
}
.bl-celebracao__foto{aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-lg);
                     background:rgba(39,59,58,.05)}
.bl-celebracao__foto img{width:100%;height:100%;object-fit:cover;display:block;background-size:cover}
.bl-celebracao__selo{
  font-family:var(--font-descriptor);font-size:.6875rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--c-old-rose);
}
.bl-celebracao__texto h2{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(1.75rem,4vw,2.5rem);color:var(--c-deep-green);
  margin-top:var(--s-2);line-height:1.15;text-wrap:balance;
}
.bl-celebracao__texto p{margin-top:var(--s-3);line-height:1.65;opacity:.88;text-wrap:pretty}
.bl-celebracao__texto .botao-marca{margin-top:var(--s-6)}


/* Na home é faixa: retratos menores e sem o parágrafo, que competiria com o
   resto da página. */
.bl-curadora--faixa{max-width:64rem;margin:0 auto var(--s-16);padding:0 var(--s-4);text-align:center}
.bl-curadora__titulo{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:1.75rem;color:var(--c-deep-green);margin-bottom:var(--s-8);
}
.bl-curadora--faixa .pessoas{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:var(--s-6)}
.bl-curadora--faixa .pessoa__texto{display:none}
.bl-curadora__mais{margin-top:var(--s-8)}
.bl-curadora__mais a{color:var(--c-deep-green)}

@media (max-width:640px){
  /* Duas colunas no celular: quatro pessoas em coluna única viraria uma
     rolagem longa por uma informação secundária. */
  .bl-curadora--faixa .pessoas{grid-template-columns:repeat(2,1fr)}
}

/* ── Recados ──────────────────────────────────────────────── */
/* Uma faixa leve, entre as novidades e as linhas. Não compete com as
   composições: texto curto, foto menor, sem chamada para ação. */
.bl-recados{max-width:64rem;margin:0 auto var(--s-16);padding:0 var(--s-4)}
.bl-recados__titulo{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:1.75rem;color:var(--c-deep-green);
  margin-bottom:var(--s-8);text-align:center;
}
.recados{
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--s-8) var(--s-6);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.recado__foto{
  aspect-ratio:1/1;overflow:hidden;border-radius:var(--radius-lg);
  background:rgba(39,59,58,.05);margin-bottom:var(--s-4);
}
.recado__foto img{width:100%;height:100%;object-fit:cover;display:block;background-size:cover}
.recado__titulo{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:1.25rem;color:var(--c-deep-green);
}
.recado__texto{margin-top:var(--s-3);line-height:1.65;opacity:.88;text-wrap:pretty}






@media (max-width:800px){
  .bl-celebracao{grid-template-columns:1fr}
}

/* Uma ou duas composições não devem ficar coladas à esquerda numa tela larga:
   sem isto, a home do primeiro mês parece um erro de layout. */
.grade--poucos{
  max-width:44rem;
  margin-inline:auto;
}
.bl-celebracao__prazo{
  font-size:.875rem;opacity:.75;margin-top:var(--s-2);
}

/* ── Vitrine da abertura ────────────────────────────────────
   O texto fica SOBRE a foto, e a foto tem teto de altura.

   Antes era `aspect-ratio:16/10` sem teto, com o texto abaixo: numa
   janela de 1440×900 a foto sozinha media 900px e empurrava título,
   subtítulo e botão para fora da primeira tela. Quanto maior o monitor,
   pior — em 1920px a foto virava 1200px de altura. A primeira tela do
   site não tinha nome de composição, nem proposta, nem convite. */
/* `overflow:hidden` e a coluna com `minmax(0,...)`: uma imagem de 1800px
   dentro de uma grade de coluna automática faz a coluna crescer até a
   largura NATURAL da foto, e aí o texto absoluto herda essa largura e é
   cortado pela janela. Foi o que cortava o título no celular. */
.abertura-vitrine{position:relative;margin-bottom:var(--s-12);overflow:hidden}

.abertura-slide{position:relative}
/* Abertura fixa (uma composição só) não tem controles — então não precisa
   reservar espaço para eles. */
.abertura-vitrine:not(.abertura-vitrine--passeio) .abertura-slide__texto{
  padding-bottom:var(--s-12);
}
.abertura-slide__foto{
  width:100%;overflow:hidden;background:rgba(39,59,58,.05);
  /* Teto e piso: nunca mais alta que a janela, nunca baixa a ponto de
     virar uma faixa. O `vh` é o que resolve o monitor grande. */
  /* 70vh e não 100vh: somado ao cabeçalho dá ~92% da janela, deixando
     aparecer uma faixa da seção seguinte. Uma abertura que ocupa a tela
     inteira não avisa que há página embaixo. */
  height:clamp(24rem,70vh,46rem);
}
.abertura-slide__foto img{width:100%;height:100%;object-fit:cover;display:block;background-size:cover}

/* O véu existe para o texto se ler, e só na parte de baixo — cobrir a
   foto inteira apagaria a fotografia, que é o ativo da marca. */
.abertura-slide__foto::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,
    rgba(24,38,37,.78) 0%,
    rgba(24,38,37,.55) 26%,
    rgba(24,38,37,.12) 52%,
    rgba(24,38,37,0)   72%);
}

.abertura-slide__texto{
  position:absolute;left:0;right:0;bottom:0;
  max-width:44rem;margin:0 auto;
  /* O rodapé generoso reserva o lugar dos controles do carrossel, que são
     um irmão posicionado no fim da foto. Com padding menor, os pontos
     subiam por cima do botão. */
  padding:var(--s-6) var(--s-4) 5.5rem;
  text-align:center;color:var(--c-alabaster);
}
.abertura-slide__texto h2{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(1.75rem,4.6vw,3.5rem);line-height:1.12;
  color:var(--c-alabaster);text-wrap:balance;
  /* Sombra curta: segura o texto quando a foto tem uma área clara logo
     atrás de uma letra, sem virar contorno. */
  text-shadow:0 1px 14px rgba(24,38,37,.45);
}
.abertura-slide__texto p{
  /* Medida de leitura própria e centralizada: o subtítulo é uma frase, não
     uma linha de largura do título. */
  max-width:30rem;margin:var(--s-4) auto 0;
  font-size:1.125rem;line-height:1.55;font-weight:400;
  opacity:.92;text-wrap:pretty;text-shadow:0 1px 10px rgba(24,38,37,.5);
}
.abertura-slide__texto .botao-marca{
  /* `--s-5` NÃO existe na paleta (ela pula do 4 para o 6). Estava escrito
     assim, e uma referência a token inexistente invalida a declaração
     inteira em silêncio: o botão ficava colado no subtítulo. */
  margin-top:var(--s-8);
  background:var(--c-alabaster);color:var(--c-deep-green);border-color:var(--c-alabaster);
}
.abertura-slide__texto .botao-marca:hover{
  background:transparent;color:var(--c-alabaster);border-color:var(--c-alabaster);
}

/* Em passeio, os slides ocupam o mesmo lugar e trocam por esmaecimento. */
.abertura-vitrine--passeio{display:grid;grid-template-columns:minmax(0,1fr)}
.abertura-vitrine--passeio .abertura-slide{
  grid-area:1 / 1;
  /* `min-width:0` é obrigatório: item de grade nasce com `min-width:auto`,
     que é o min-content do conteúdo — e o min-content de uma foto de
     1800px é 1800px. Sem isto o slide estoura a coluna mesmo com a coluna
     em `minmax(0,1fr)`, a página fica mais larga que a tela e o texto sai
     cortado no celular. Corrigir só a coluna não basta. */
  min-width:0;
  opacity:0;visibility:hidden;
  transition:opacity 900ms var(--ease),visibility 0s linear 900ms;
}
.abertura-vitrine--passeio .abertura-slide.esta-visivel{
  opacity:1;visibility:visible;
  transition:opacity 900ms var(--ease);
}

/* Os controles passam para dentro da foto, no rodapé dela. Ficando fora,
   empurravam a próxima seção e criavam uma faixa vazia entre a foto e o
   resto da página. */
.abertura-controles{
  grid-area:1 / 1;align-self:end;justify-self:center;min-width:0;
  position:relative;z-index:2;
  display:flex;align-items:center;gap:var(--s-2);
  margin:0 0 var(--s-6);
}
.abertura-seta{
  min-width:44px;min-height:44px;   /* alvo de toque confortável */
  background:none;border:0;cursor:pointer;
  font-size:1.75rem;line-height:1;color:var(--c-alabaster);
  opacity:.7;transition:opacity var(--dur) var(--ease);
}
.abertura-seta:hover{opacity:1}
.abertura-pontos{display:flex;gap:.5rem;align-items:center;position:relative}
.abertura-pontos button{
  width:8px;height:8px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--c-alabaster);background:transparent;
  transition:background-color var(--dur) var(--ease);
}
.abertura-pontos button[aria-selected="true"]{background:var(--c-alabaster)}
/* O alvo de toque é maior que o ponto visível. */
.abertura-pontos button::before{content:"";position:absolute;width:44px;height:44px;
  margin:-18px 0 0 -18px}
.abertura-seta:focus-visible,.abertura-pontos button:focus-visible{
  outline:2px solid var(--c-alabaster);outline-offset:3px;opacity:1;
}

@media (prefers-reduced-motion:reduce){
  .abertura-vitrine--passeio .abertura-slide{transition:none}
}
@media (max-width:640px){
  /* No celular a foto pode ser mais alta em proporção: a tela é estreita
     e uma faixa larga não mostraria a composição. */
  .abertura-slide__foto{height:clamp(26rem,68vh,34rem)}
  .abertura-slide__texto{padding-bottom:4.5rem}
  .abertura-slide__texto p{font-size:1.0625rem}
  .abertura-controles{margin-bottom:var(--s-4)}
}

/* A margem negativa existia para puxar este link para debaixo do texto
   da abertura, que ficava fora da foto. Com o texto agora dentro da
   foto, ela puxaria o link para cima da fotografia. */
.ver-todas{text-align:center;margin:0 0 var(--s-16)}
.ver-todas a{
  font-size:.9375rem;color:var(--c-deep-green);
  border-bottom:1px solid var(--border);padding-bottom:2px;
  transition:border-color var(--dur) var(--ease);
}
.ver-todas a:hover{border-bottom-color:var(--accent)}