/* ============================================================
   ASAF — Hero interativa (fachada se abrindo para o interior)
   Novo arquivo, sem alterar style.css. Usa as variáveis de marca
   já definidas em :root (style.css): --sage, --maroon, --gold,
   --cream, --charcoal, etc. Tipografia Georgia, igual ao resto do site.

   Curvas de movimento (13/09/2026) — evitar `ease` genérico:
   --reveal-ease-out  chegada com desaceleração longa ("premium")
   --reveal-ease-soft suavização curta de valores contínuos
   ============================================================ */

.hero-reveal {
  position: relative;
  height: 380vh;
  background: var(--charcoal);
  --reveal-line: rgba(244,241,234,0.22);
  --reveal-muted: rgba(244,241,234,0.62);
  /* Índice lateral vive sobre a foto e precisa de um tom mais forte
     que o --reveal-muted geral para alcançar 4,5:1 — ver bloco
     .reveal-index mais abaixo. */
  --reveal-index-idle: #DED8CC;
  --reveal-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --tp: 0;
  --rp: 0%;
}

@media (max-width: 720px) {
  .hero-reveal { height: 320vh; }
}

.reveal-sticky {
  position: sticky;
  top: var(--header-h, 0px);
  height: calc(100vh - var(--header-h, 0px));
  min-height: 460px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* --- imagem: sequência de fachada abrindo --- */
.reveal-scene { position: absolute; inset: 0; z-index: 0; background: var(--charcoal); }

/* Camada da câmera. O JS aplica aqui um recuo lento (scale 1.06 → 1.015
   + deriva vertical). Separar "câmera" de "quadro" é o que cria as duas
   velocidades de movimento: a cena inteira anda devagar, e cada quadro
   que entra assenta por cima numa velocidade própria. Sem isso o scroll
   é um slideshow parado. */
.reveal-frames {
  position: absolute; inset: 0;
  will-change: transform;
  transform: translate3d(0,0,0);
}
.reveal-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
  opacity: 0;
  transform-origin: 50% 45%;
  will-change: opacity, transform;
  backface-visibility: hidden;
}
.reveal-frame:first-child { opacity: 1; }

.reveal-vignette-left {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(43,36,32,0.80) 0%, rgba(43,36,32,0.32) 34%, transparent 62%);
}
.reveal-vignette-bottom {
  position: absolute; inset-inline: 0; bottom: 0; height: 42%; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(43,36,32,0.88), transparent);
}
/* CORRIGIDO 13/09/2026 (P1 da revisão anterior) — o canto superior
   direito era o único da cena sem proteção, e é exatamente onde mora o
   índice 01-03. Medido sobre os 7 quadros reais, o texto ficava entre
   1,73:1 e 2,59:1; o mínimo WCAG para esse corpo é 4,5:1.
   Vinheta de canto (não uma faixa reta no topo): escurece só a quina,
   preservando o céu do pôr do sol no centro e a silhueta do prédio. */
.reveal-vignette-topright {
  position: absolute; top: 0; right: 0; z-index: 1; pointer-events: none;
  width: min(58%, 820px); height: min(62%, 540px);
  /* Os raios da elipse são 100%/100% de propósito: assim o último stop
     (transparente) cai EXATAMENTE na borda da caixa. Com raio maior que
     100% a gradiente ainda teria alfa na borda e apareceria uma emenda
     reta no céu — foi o que aconteceu na primeira tentativa. */
  background: radial-gradient(100% 100% at 100% 0%,
    rgba(43,36,32,0.95) 0%,
    rgba(43,36,32,0.90) 30%,
    rgba(43,36,32,0.66) 52%,
    rgba(43,36,32,0.30) 74%,
    rgba(43,36,32,0.08) 88%,
    rgba(43,36,32,0) 100%);
}
@media (max-width: 640px) { .reveal-vignette-topright { display: none; } }

/* --- trilho de progresso ---
   CORRIGIDO 12/09/2026 — antes o trilho vivia dentro de .reveal-scene com
   left:50%, ou seja, no centro do VIEWPORT inteiro. Como o .container é
   centralizado e o headline começa na borda esquerda dele, esse ponto caía
   DENTRO do texto: a bolinha aparecia por cima de "impulsionam" em todas as
   larguras de desktop testadas (1920/1440/1280/1140/1024/900/768).
   Agora o trilho é o terceiro item flex de .reveal-top-row. Com
   justify-content:space-between, o próprio layout o coloca no meio do vão
   real entre o texto e o índice, em qualquer largura, sem medição por JS.
   A reserva de 32px (largura da bolinha) + o gap de 24px garantem que o
   círculo nunca encoste nos vizinhos. */
.reveal-track {
  position: relative;
  flex: 0 0 32px;          /* reserva a largura da bolinha no layout */
  align-self: stretch;     /* trilho alto, acompanhando a faixa do texto */
  margin: 28px 0 24px;
  pointer-events: none;
}
.reveal-track::before {
  content: "";
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: var(--reveal-line); transform: translateX(-50%);
}
/* Trecho já percorrido, em dourado. O trilho deixa de ser um traço
   inerte com uma bola solta e passa a registrar o caminho — dá noção
   de "quanto falta", que é metade da sensação de scroll bem feito. */
.reveal-track::after {
  content: "";
  position: absolute; left: 50%; top: 0;
  width: 1px; height: var(--rp, 0%);
  background: linear-gradient(to bottom, rgba(228,210,168,0.15), var(--gold-light));
  transform: translateX(-50%);
}
.reveal-track .reveal-handle {
  position: absolute; left: 50%; top: 0%; width: 32px; height: 32px; border-radius: 50%;
  background: var(--cream); transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  /* Filtro de suavização: a roda do mouse entrega saltos grossos
     (100px+ por clique). Sem isso a bolinha "teleporta" degrau a
     degrau. 140ms é curto o bastante para não parecer atrasada. */
  transition: top 0.14s var(--reveal-ease-soft);
}
.reveal-track .reveal-handle svg { width: 10px; height: 10px; }

/* --- conteúdo --- */
.reveal-top-row {
  position: relative; z-index: 5;
  display: flex; justify-content: space-between; gap: 24px;
  padding-top: clamp(40px, 7vw, 72px);
  flex: 1;
}
/* O .container padrão do site (max-width:1140px, margin:auto) centraliza
   a faixa no meio da página — o que jogava o texto para cima do prédio
   iluminado nas fotos. Aqui a hero rompe esse centro e ancora as 3 faixas
   (texto, cards, rodapé) na borda real da tela, mantendo as 3 alinhadas
   entre si. */
.hero-reveal .reveal-top-row,
.hero-reveal .reveal-cards-row,
.hero-reveal .reveal-bottom-row {
  max-width: none;
  margin: 0;
  padding-left: clamp(24px, 6vw, 96px);
  padding-right: clamp(24px, 6vw, 96px);
}

.reveal-content { max-width: 460px; will-change: transform; }
.reveal-content .hero-eyebrow { margin-bottom: 16px; }

/* PARALLAX DIFERENCIAL DA TIPOGRAFIA (13/09/2026).
   O JS entrega um único número em --tp (0..1, já suavizado). Cada
   elemento anda uma distância diferente: a sobrancelha quase não sai do
   lugar, o headline anda um pouco, o subtexto mais, o botão mais ainda.
   O resultado é uma abertura em leque — o bloco de texto ganha
   profundidade em vez de ficar cravado na tela por 2.600px de rolagem,
   que era um dos motivos de o scroll parecer morto.
   Escolha deliberada: DERIVA, não desaparecimento. Sumir com o H1 e o
   CTA no fim daria mais espetáculo, mas deixaria um botão focável
   invisível e esconderia o texto principal da página. */
.reveal-content .hero-eyebrow { transform: translate3d(0, calc(var(--tp, 0) * -12px), 0); }
.reveal-headline            { transform: translate3d(0, calc(var(--tp, 0) * -24px), 0); }
.reveal-sub                 { transform: translate3d(0, calc(var(--tp, 0) * -32px), 0); }
.reveal-cta                 { transform: translate3d(0, calc(var(--tp, 0) * -40px), 0); }

.reveal-headline {
  font-family: 'Georgia', serif; font-weight: 400; color: var(--cream);
  font-size: clamp(2rem, 4.3vw, 3.2rem); line-height: 1.18;
  margin: 0 0 20px;
}
.reveal-headline .reveal-accent { color: var(--gold-light); font-style: italic; }
.reveal-sub {
  font-family: 'Georgia', serif; color: #E7E2D8;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem); line-height: 1.6;
  max-width: 42ch; margin: 0 0 28px;
}
.reveal-cta {
  display: inline-flex; align-items: center; gap: 10px;
  border: none; cursor: pointer;
}
.reveal-cta svg { flex: none; transition: transform 0.25s var(--reveal-ease-soft); }
.reveal-cta:hover svg { transform: translateX(3px); }

/* --- índice lateral (01 Fachada / 02 Espaços / 03 Abordagem) --- */
.reveal-index {
  display: flex; flex-direction: column; gap: 18px;
  align-self: flex-start; text-align: right; flex: none;
  position: relative; z-index: 2;
}
.reveal-index-item {
  display: flex; align-items: baseline; gap: 10px; justify-content: flex-end;
  font-family: 'Georgia', serif; font-style: italic; color: var(--reveal-index-idle);
  transition: color 0.45s var(--reveal-ease-soft), transform 0.55s var(--reveal-ease-out);
  transform: translateX(0);
}
.reveal-index-item .reveal-num { font-size: 0.72rem; }
.reveal-index-item .reveal-name { font-size: 0.78rem; letter-spacing: 0.06em; }
.reveal-index-item::after {
  content: ""; width: 14px; height: 1px; background: var(--reveal-index-idle);
  transition: background 0.45s var(--reveal-ease-soft), width 0.55s var(--reveal-ease-out);
}
/* O item ativo é puxado levemente para fora da coluna: o olho registra
   a mudança de etapa pelo movimento antes de ler a cor. */
.reveal-index-item.active { color: var(--cream); font-style: normal; transform: translateX(-6px); }
.reveal-index-item.active::after { background: var(--gold-light); width: 22px; }
@media (max-width: 640px) { .reveal-index { display: none; } }

/* --- cards inferiores (Regenerativa / Solar / Comercial) --- */
.reveal-cards-row {
  position: relative; z-index: 5;
  display: flex; gap: 16px; flex-wrap: wrap;
  padding-bottom: clamp(28px, 4vw, 40px);
}
.reveal-card {
  flex: 1 1 220px; min-width: 200px;
  background: rgba(244,241,234,0.08);
  border: 1px solid var(--reveal-line); border-radius: 8px;
  backdrop-filter: blur(6px);
  padding: 18px 20px;
  /* ENTRADA DOS CARDS (13/09/2026).
     Antes: opacity 0→1 + translateY(16px) com `ease` em 0.6s, e os três
     recebiam a classe no MESMO instante (progress > 0.6). Um pop de
     grupo, seco.
     Agora: o JS dá a cada card um ponto de chegada próprio na rolagem
     (0.58 / 0.66 / 0.74), então eles sobem um depois do outro conforme
     a pessoa rola — a escada é coreografada, não um transition-delay
     fixo que dispararia igual em qualquer velocidade de scroll.
     A curva é de desaceleração longa (quase parada no fim), que é o que
     separa "caro" de "genérico". */
  opacity: 0;
  transform: translate3d(0, 30px, 0) scale(0.985);
  transform-origin: 50% 100%;
  transition:
    opacity 0.75s var(--reveal-ease-out),
    transform 1s var(--reveal-ease-out);
  will-change: transform, opacity;
}
.reveal-card.visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.reveal-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.reveal-card-icon {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(244,241,234,0.12);
  /* O ícone chega um pouco depois do card — micro-hierarquia interna,
     o mesmo princípio do leque da tipografia. */
  opacity: 0; transform: scale(0.82);
  transition: opacity 0.5s var(--reveal-ease-out) 0.18s, transform 0.7s var(--reveal-ease-out) 0.18s;
}
.reveal-card.visible .reveal-card-icon { opacity: 1; transform: scale(1); }
.reveal-card-icon svg { width: 16px; height: 16px; }
.reveal-card-regen .reveal-card-icon svg { color: var(--sage); }
.reveal-card-solar .reveal-card-icon svg { color: var(--gold); }
.reveal-card-comercial .reveal-card-icon svg { color: #C98A93; }
.reveal-card-title {
  font-family: 'Georgia', serif; font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.06em; color: var(--cream); text-transform: uppercase;
}
.reveal-card-line { font-family: 'Georgia', serif; font-size: 0.85rem; color: #D8D2C6; margin: 4px 0 0; }
.reveal-card-more {
  font-family: 'Georgia', serif; font-size: 0.85rem; color: #E7E2D8;
  line-height: 1.55; margin-top: 12px; max-width: 34ch; display: none;
}
.reveal-card.expanded .reveal-card-more { display: block; }
.reveal-card-plus {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--reveal-line);
  background: none; color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex: none;
  transition: transform 0.45s var(--reveal-ease-out), border-color 0.3s var(--reveal-ease-soft);
}
.reveal-card.expanded .reveal-card-plus { transform: rotate(45deg); border-color: var(--gold-light); }
.reveal-card-plus svg { width: 11px; height: 11px; }

/* --- rodapé da hero: cantos + scroll cue --- */
.reveal-bottom-row {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: clamp(18px, 2.6vw, 26px);
}
.reveal-corner {
  font-family: 'Georgia', serif; font-style: italic; font-size: 0.78rem;
  color: #D8D2C6; white-space: nowrap;
}
.reveal-scrollcue {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: 'Georgia', serif; font-size: 0.7rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: #D8D2C6;
  /* A dica de rolagem cumpriu a função assim que a pessoa rolou: some
     progressivamente em vez de piscar até o fim. Fator 3 para zerar por
     volta de 13% da rolagem — com fator menor ela ficava um bom trecho
     em 5-10% de opacidade, o que lê como falha de renderização, não
     como intenção. */
  opacity: calc(1 - var(--tp, 0) * 3);
  transition: opacity 0.3s var(--reveal-ease-soft);
}
.reveal-scrollcue svg { width: 13px; height: 8px; animation: reveal-bob 2.2s ease-in-out infinite; }
@keyframes reveal-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

@media (max-width: 720px) {
  /* layout vira coluna: um trilho vertical entre texto e índice perde a
     função e viraria uma barra solta. Escondido — a paginação 01-03 e o
     "Scroll" continuam indicando o progresso. */
  .reveal-track { display: none; }
  .reveal-top-row { flex-direction: column; gap: 12px; padding-top: clamp(28px, 8vw, 48px); }
  .reveal-index { flex-direction: row; align-self: flex-start; gap: 16px; }
  .reveal-index-item { flex-direction: row-reverse; }
  .reveal-index-item.active { transform: translateX(0) translateY(-2px); }
  .reveal-bottom-row .reveal-corner:last-child { display: none; }
}

@media (max-width: 600px) {
  .reveal-cards-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 20px; -webkit-overflow-scrolling: touch; }
  .reveal-card { min-width: 78vw; }
}

/* ============================================================
   MOVIMENTO REDUZIDO — CORRIGIDO 13/09/2026 (P0 da revisão anterior)
   Antes: o JS chamava update(0.5) e os cards só ganhavam .visible com
   progress > 0.6. A condição nunca era satisfeita, então os três
   pilares (Regenerativa / Solar / Comercial) ficavam permanentemente
   invisíveis — e a hero é o único lugar do site onde eles aparecem
   descritos. Além disso a seção mantinha 380vh, obrigando a ~2.500px
   de rolagem sobre uma imagem congelada.
   Agora o JS entrega o estado FINAL (update(1)) e marca .reveal-static;
   aqui a seção passa a ocupar uma tela, sem sticky e sem rolagem morta.
   ============================================================ */
.hero-reveal.reveal-static { height: auto; }
.hero-reveal.reveal-static .reveal-sticky {
  position: static;
  height: auto;
  min-height: calc(100vh - var(--header-h, 0px));
  padding-bottom: 8px;
}
.hero-reveal.reveal-static .reveal-track,
.hero-reveal.reveal-static .reveal-scrollcue { display: none; }

@media (prefers-reduced-motion: reduce) {
  /* Rede de segurança em CSS, caso o JS não rode. */
  .hero-reveal { height: auto; }
  .hero-reveal .reveal-sticky {
    position: static; height: auto;
    min-height: calc(100vh - var(--header-h, 0px));
  }
  .hero-reveal .reveal-track,
  .hero-reveal .reveal-scrollcue { display: none; }
  .hero-reveal .reveal-frames,
  .hero-reveal .reveal-frame { transform: none !important; }
  .hero-reveal .reveal-card,
  .hero-reveal .reveal-card-icon,
  .hero-reveal .reveal-index-item,
  .hero-reveal .reveal-card-plus,
  .hero-reveal .reveal-handle { transition: none !important; }
  .hero-reveal .reveal-card {
    opacity: 1 !important; transform: none !important;
  }
  .hero-reveal .reveal-card-icon { opacity: 1 !important; transform: none !important; }
  .hero-reveal .reveal-content .hero-eyebrow,
  .hero-reveal .reveal-headline,
  .hero-reveal .reveal-sub,
  .hero-reveal .reveal-cta { transform: none !important; }
  .hero-reveal .reveal-scrollcue svg { animation: none; }
}

/* ============================================================
   ENQUADRAMENTO NO CELULAR — 25/09/2026
   Problema: a imagem é horizontal (1536x1024) e, com object-fit: cover
   numa tela vertical, só cabia uma faixa de ~37% da largura — a fachada
   virava "uma parede cortada", sem topo nem silhueta, e o texto ficava
   em cima de áreas claras dos quadros do interior.
   Solução (só até 720px E em pé; desktop, janelas largas e animação não mudam.
   Em pé porque uma janela de computador estreita mas baixa, tipo metade da
   tela, mantém o layout horizontal original): os quadros
   ocupam os 60% de baixo do hero e entram com um degradê a partir do
   fundo escuro. O texto fica sobre o escuro e o prédio aparece inteiro
   (~58% da largura da imagem, centrado no prédio, que fica em ~18–76%).
   ============================================================ */
@media (max-width: 720px) and (orientation: portrait) {
  .reveal-frames {
    top: 40%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 28%);
  }
  .reveal-frame { object-position: 46% 50%; }
  /* protege o texto em qualquer quadro: vertical, em vez do degradê lateral */
  .reveal-vignette-left {
    background: linear-gradient(180deg,
      rgba(43,36,32,0.55) 0%, rgba(43,36,32,0.38) 45%, rgba(43,36,32,0) 70%);
  }
}

/* ============================================================
   ENQUADRAMENTO NO COMPUTADOR — 26/09/2026 (v10)
   A foto ocupa a largura inteira do hero, como sempre foi: sem faixas,
   sem degradê nas laterais e sem fundo desfocado (tentativas anteriores,
   v7–v9, foram revertidas a pedido da Bianca).
   A única mudança é a ÂNCORA vertical: com o quadro largo (~2,4:1) e a
   foto 1,5:1, só cabe ~62% da altura. Antes o recorte começava em 16%
   (object-position 42%) e cortava a copa das árvores; agora começa em
   ~4% (10%), então o topo do prédio aparece. Só em janelas horizontais.
   ============================================================ */
@media (min-width: 721px) and (orientation: landscape) {
  .reveal-frame { object-position: 50% 10%; }
}

/* Problema 2 (rodapé da hero cortado): texto + cards + rodapé precisam de
   ~661px, mas com zoom a hero tem 515–630px. Em janelas baixas o bloco
   encolhe em degraus para caber inteiro (sem esconder nada). */
@media (min-width: 721px) and (max-height: 780px) {
  .reveal-top-row { padding-top: 40px; }
  .reveal-content .hero-eyebrow { margin-bottom: 10px; }
  .reveal-headline { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin-bottom: 14px; }
  .reveal-sub { font-size: 0.98rem; line-height: 1.5; margin-bottom: 20px; }
  .reveal-cta { padding: 12px 24px; }
  .reveal-cards-row { padding-bottom: 26px; }
  .reveal-bottom-row { padding-bottom: 16px; }
}
@media (min-width: 721px) and (max-height: 660px) {
  .reveal-top-row { padding-top: 22px; }
  .reveal-headline { font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.15; margin-bottom: 10px; }
  .reveal-sub { font-size: 0.9rem; line-height: 1.45; margin-bottom: 14px; }
  .reveal-cta { padding: 10px 20px; }
  .reveal-cards-row { padding-bottom: 16px; }
  .reveal-bottom-row { padding-bottom: 12px; }
}