/* ==========================================================================
   Cerrô v2 · Apresentação
   --------------------------------------------------------------------------
   Folha que roda por cima de estilo.css, só na home. A gramática é a das
   páginas de produto da Apple: telas inteiras, uma ideia por tela, o produto
   se movendo conforme a pessoa desce, e tipografia grande com pouca conversa.

   A paleta é exatamente a mesma da versão 1. O que muda é a encenação.

   Como ler as regras: `var(--p)` é o progresso da cena, de 0 a 1, escrito
   pelo cena.js a cada quadro. `--p1`, `--p2`, `--p3` são as etapas dentro
   dela. Tudo que se move é calculado a partir desses números.
   ========================================================================== */

:root {
  --preto:  #17100C;   /* o carvão levado ao extremo, para telas cheias */
  --tela:   100vh;
}

/* Em telas de celular a barra do navegador some e volta, e 100vh pula.
   dvh resolve onde existe. */
@supports (height: 100dvh) {
  :root { --tela: 100dvh; }
}

/* ==========================================================================
   Estrutura das cenas
   ========================================================================== */

.cena {
  position: relative;
  height: var(--altura, 300vh);
  --p: 0; --p1: 0; --p2: 0; --p3: 0; --p4: 0;
}

/* --------------------------------------------------------------------------
   Ritmo de cada ato

   A altura da seção é o quanto se rola para o ato acontecer. As primeiras
   100vh são só a seção entrando na tela; o movimento em si acontece no que
   sobra. Um ato de três etapas com 420vh dava mais de uma tela de rolagem
   por etapa, o que no computador é contemplativo e no celular é cansaço:
   a página inteira pedia vinte e duas telas de polegar para passar.

   O critério aqui é quanto tempo de rolagem cada etapa precisa para ser
   lida sem pressa: cerca de 65vh no computador, 50vh no celular, onde o
   gesto avança mais por vez e a paciência é menor. Os números saem disso.
   -------------------------------------------------------------------------- */

/* Conta: 100vh de entrada + (etapas × rolagem por etapa).
   Computador, ~65vh por etapa.                                   */
.cena--abertura  { --altura: 170vh; }   /* sem etapas, só respiro  */
.cena--leque     { --altura: 230vh; }   /* 2 etapas · 65vh cada    */
.cena--sabonetes { --altura: 230vh; }   /* 2 etapas · 65vh cada    */
.cena--trinca    { --altura: 290vh; }   /* 3 etapas · 63vh cada    */
.cena--ativos    { --altura: 265vh; }   /* 3 etapas · 55vh cada    */

/* Celular, ~45vh por etapa. O ritmo tem que ser igual entre os atos: se um
   corre e o outro se arrasta, a rolagem parece quebrada mesmo estando certa. */
@media (max-width: 760px) {
  .cena--abertura  { --altura: 145vh; }
  .cena--leque     { --altura: 200vh; }   /* 2 etapas · 50vh cada  */
  .cena--sabonetes { --altura: 200vh; }   /* 2 etapas · 50vh cada  */
  .cena--trinca    { --altura: 240vh; }   /* 3 etapas · 47vh cada  */
  .cena--ativos    { --altura: 232vh; }   /* 3 etapas · 44vh cada  */
}

.cena__palco {
  position: sticky; top: 0;
  height: var(--tela);
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.cena__palco > .container { width: min(100% - 2.5rem, 1240px); }

/* --------------------------------------------------------------------------
   Palco em três faixas
   O título ficava posicionado de forma absoluta e o produto, centralizado no
   palco, subia por cima dele em telas mais baixas. Agora são três faixas em
   coluna: título em cima, produto no meio, números embaixo. Elas dividem a
   altura da tela entre si e, por construção, nunca se sobrepõem.
   -------------------------------------------------------------------------- */

.palco-coluna {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.75rem, 2.5vh, 2rem);
  width: 100%; height: 100%;
  /* o topo desconta o cabeçalho grudado, senão o título nasce atrás dele */
  padding: clamp(5.5rem, 13vh, 8.5rem) 0 clamp(1.5rem, 5vh, 3.5rem);
}

.palco-topo { text-align: center; }
.palco-topo .etiqueta { justify-content: center; margin-bottom: 1rem; }
.palco-topo .titulo-cena { font-size: clamp(2rem, 5.4vw, 4.4rem); }

.palco-meio { min-height: 0; display: grid; place-items: center; width: 100%; }

.palco-base { text-align: center; }

.sem-cena .palco-coluna { height: auto; padding: 0; }
.sem-cena .palco-meio { min-height: auto; }

/* Palco escuro: tela cheia de verdade, sem cantos arredondados */
/* O palco escuro não é preto chapado: tem um foco de luz quente atrás do
   produto e um grão finíssimo por cima. Preto liso lê como "vazio"; luz
   direcionada mais textura lê como vitrine. */
.cena--escura .cena__palco {
  background:
    radial-gradient(78% 58% at 50% 44%, rgba(199,147,85,.16), transparent 68%),
    radial-gradient(120% 90% at 50% 120%, rgba(175,101,68,.14), transparent 62%),
    var(--preto);
  color: rgba(247,241,232,.72);
}
.cena--escura .cena__palco::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.22'/%3E%3C/svg%3E");
}
.cena--escura .cena__palco > * { position: relative; z-index: 2; }
.cena--escura h1, .cena--escura h2, .cena--escura h3 { color: var(--areia); }

/* Sem movimento (preferência do sistema): vira conteúdo empilhado normal */
.sem-cena .cena { height: auto; }
.sem-cena .cena__palco { position: static; height: auto; padding: clamp(3rem,8vw,6rem) 0; }
.sem-cena [class*="anima"] { transform: none !important; opacity: 1 !important; }

/* ==========================================================================
   Tipografia da apresentação
   ========================================================================== */

.titulo-cena {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.6rem, 7.5vw, 6.5rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 0;
}

/* A palavra em destaque recebe um degradê metálico em vez de cor chapada.
   É o mesmo dourado da marca, só que com variação de luz dentro da letra,
   que é o que diferencia "caro" de "colorido". */
.titulo-cena em {
  font-style: italic;
  color: var(--barro);
  background: linear-gradient(100deg, #8F4E2E 0%, var(--barro) 38%, #D6A268 62%, var(--barro) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cena--escura .titulo-cena em {
  background: linear-gradient(100deg, #B07C3E 0%, var(--dourado) 40%, #F0D8A8 62%, var(--dourado) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Se o navegador não souber recortar o fundo no texto, volta para cor sólida */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .titulo-cena em { background: none; -webkit-text-fill-color: currentColor; color: var(--barro); }
  .cena--escura .titulo-cena em { color: var(--dourado); }
}

.legenda-cena {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--terra-suave);
  max-width: 44ch;
  margin: 1.4rem 0 0;
}
.cena--escura .legenda-cena { color: rgba(247,241,232,.68); }

.etiqueta {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: .64rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--barro); margin-bottom: 1.6rem;
}
/* Traço dos dois lados. Com um só, a etiqueta puxava para um lado e não
   assentava sobre o título centralizado embaixo dela. */
.etiqueta::before,
.etiqueta::after {
  content: ''; width: 30px; height: 1px;
  background: currentColor; opacity: .6;
}
.cena--escura .etiqueta { color: var(--dourado); }

/* ==========================================================================
   ATO 1 · Abertura
   A foto do conjunto recua e desfoca conforme a pessoa desce, entregando a
   cena para o texto. É o único momento em que a foto ocupa tudo.
   ========================================================================== */

.abertura__foto {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(calc(1.14 - var(--p) * 0.14));
  filter: brightness(calc(1 - var(--p) * 0.42)) blur(calc(var(--p) * 5px));
  will-change: transform, filter;
}

/* No celular, o desfoque sai. Desfocar uma foto que ocupa a tela inteira
   é a conta mais cara desta página: o aparelho refaz a imagem toda a cada
   quadro, e é aí que a primeira rolagem engasga. O véu por cima já escurece
   e entrega a cena para o texto do mesmo jeito; a diferença visual é pequena
   e a diferença no gesto é grande. Fica só a escala, que roda na placa. */
@media (max-width: 760px) {
  .abertura__foto {
    filter: none;
    transform: scale(calc(1.10 - var(--p) * 0.10));
    will-change: transform;
  }
  .abertura__veu { opacity: calc(.45 + var(--p) * .55); }
}

.abertura__veu {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(23,16,12,.55) 0%, rgba(23,16,12,.10) 30%, rgba(23,16,12,.75) 100%);
  opacity: calc(.35 + var(--p) * .65);
}

.abertura__conteudo {
  text-align: center; color: var(--areia);
  transform: translateY(calc(var(--p) * -3vh));
}
.abertura__conteudo .titulo-cena { color: var(--areia); }
.abertura__conteudo .etiqueta { color: var(--dourado); justify-content: center; }

/* Texto que só existe para quem usa leitor de tela ou para o buscador.
   Fica fora da vista sem usar display:none, que o esconderia dos dois. */
.apenas-leitor {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.abertura__marca {
  font-family: var(--serif);
  font-size: clamp(3.4rem, 12vw, 9rem);
  letter-spacing: .16em;
  line-height: 1;
  margin: 0 0 .2em;
  color: var(--areia);
  /* a marca cresce de leve enquanto a foto recua: dá sensação de aproximação */
  transform: scale(calc(1 + var(--p) * 0.06));
}

.abertura__linha {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.7rem);
  color: var(--dourado);
  opacity: calc(1 - var(--p) * .8);
}

.rolar {
  position: absolute; left: 50%; bottom: 2.5rem; z-index: 3;
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: .8rem;
  font-size: .56rem; letter-spacing: .32em; text-transform: uppercase;
  color: rgba(247,241,232,.55);
  opacity: calc(1 - var(--p) * 2.5);
  pointer-events: none;
}
.rolar span:last-child {
  width: 1px; height: 44px;
  background: linear-gradient(180deg, rgba(247,241,232,.75), transparent);
  animation: descer 3s ease-in-out infinite;
}
@keyframes descer {
  0%, 100% { opacity: .2; transform: scaleY(.6); transform-origin: top; }
  50%      { opacity: 1;  transform: scaleY(1);  transform-origin: top; }
}

/* ==========================================================================
   ATO 2 · A separação
   Os três rituais chegam empilhados, como um baralho, e se abrem em leque.
   É a tradução literal de "separar os produtos um do outro".
   ========================================================================== */

.leque { position: relative; width: min(92vw, 1100px); height: min(62vh, 560px); }

.leque__peca {
  position: absolute; top: 50%; left: 50%;
  width: clamp(180px, 26vw, 320px);
  aspect-ratio: 1;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(35,22,14,.30);
  will-change: transform;
}
.leque__peca img { width: 100%; height: 100%; object-fit: cover; }

/* No começo (p=0) as três estão sobrepostas no centro, levemente giradas.
   No fim (p=1) estão lado a lado, retas. O deslocamento é em vw para
   acompanhar a largura da tela. */
.leque__peca--1 {
  transform: translate(-50%, -50%)
             translateX(calc(var(--p1) * -30vw))
             rotate(calc(-7deg + var(--p1) * 7deg))
             scale(calc(0.88 + var(--p1) * 0.12));
  z-index: 1;
}
.leque__peca--2 {
  transform: translate(-50%, -50%)
             translateY(calc(var(--p1) * -1vh))
             scale(calc(0.94 + var(--p1) * 0.06));
  z-index: 3;
}
.leque__peca--3 {
  transform: translate(-50%, -50%)
             translateX(calc(var(--p1) * 30vw))
             rotate(calc(7deg - var(--p1) * 7deg))
             scale(calc(0.88 + var(--p1) * 0.12));
  z-index: 2;
}

/* Os nomes só entram depois que as peças terminam de se abrir */
.leque__nomes {
  position: absolute; inset: auto 0 -3.5rem 0;
  text-align: center;
  opacity: var(--p2);
  transform: translateY(calc((1 - var(--p2)) * 20px));
}

/* Cada nome carrega o mesmo deslocamento da sua peça, em vez de dividir a
   largura em três colunas iguais. Era isso que desalinhava: as peças abrem
   30vw para cada lado, e três colunas iguais caem em pontos um pouco
   diferentes. A diferença era de uns 11px, pequena mas visível, porque o
   olho compara o nome com a foto logo acima dele. Repetindo o mesmo cálculo,
   o nome fica no eixo da foto em qualquer largura de tela. */
.leque__nome {
  position: absolute; bottom: 0; left: 50%;
  width: min(28vw, 320px);
  font-family: var(--serif); font-size: clamp(.95rem, 1.7vw, 1.35rem);
  transform: translateX(-50%);
}
.leque__nome:nth-child(1) { transform: translateX(-50%) translateX(calc(var(--p1) * -30vw)); }
.leque__nome:nth-child(3) { transform: translateX(-50%) translateX(calc(var(--p1) *  30vw)); }
.leque__nome span {
  display: block; font-family: var(--sans);
  font-size: .58rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--terra-suave); margin-top: .35rem;
}
.cena--escura .leque__nome span { color: rgba(247,241,232,.6); }

.leque__titulo {
  position: absolute; inset: 0; display: grid; place-items: center;
  text-align: center; pointer-events: none;
  opacity: calc(1 - var(--p1) * 2);
}

@media (max-width: 720px) {
  /* A diagonal encolhe de 14vh para 10vh e o leque sobe. Com 14vh a peça de
     baixo terminava em cima da primeira linha de nomes; o ato inteiro tem
     que caber entre o topo do palco e a coluna de nomes, sem encostar. */
  .leque { height: min(46vh, 380px); transform: translateY(-4vh); }
  .leque__peca { width: clamp(140px, 42vw, 210px); }
  .leque__peca--1 { transform: translate(-50%,-50%) translateX(calc(var(--p1) * -26vw)) translateY(calc(var(--p1) * -10vh)) rotate(calc(-7deg + var(--p1) * 7deg)); }
  .leque__peca--3 { transform: translate(-50%,-50%) translateX(calc(var(--p1) * 26vw)) translateY(calc(var(--p1) * 10vh)) rotate(calc(7deg - var(--p1) * 7deg)); }

  /* Os nomes estavam escondidos no celular. Três colunas não cabiam em 375px,
     e no computador as peças abrem lado a lado, então a linha embaixo faz
     sentido; no celular elas abrem na diagonal e a linha não se alinhava com
     nada. Só que esconder deixava o visitante de telefone vendo três fotos
     sem saber qual ritual é qual, justo no ato que apresenta os três.
     A saída é virar coluna, na mesma ordem em que as peças aparecem. */
  /* No celular as peças abrem na diagonal, então cada nome debaixo da sua
     peça não faria sentido. Volta a ser uma coluna simples, empilhada. */
  .leque__nomes {
    display: grid; grid-template-columns: 1fr;
    gap: .5rem;
    inset: auto 0 -10rem 0;
  }
  .leque__nomes .leque__nome:nth-child(n) {
    position: static; width: auto; transform: none;
    font-size: 1.02rem; line-height: 1.35;
  }
  .leque__nome span {
    display: inline; margin-top: 0;
    font-size: .55rem; letter-spacing: .2em;
  }
  .leque__nome span::before { content: ' · '; letter-spacing: 0; }
}

/* ==========================================================================
   ATO 3 · Os três sabonetes se abrem
   Chegam empilhados e se abrem em leque, os três inteiros e visíveis lado a
   lado. Sem máscara redonda e sem recorte: o quadro é o próprio recorte
   quadrado da foto, então o sabonete aparece por completo.
   ========================================================================== */

.abre {
  position: relative;
  width: min(94vw, 1060px);
  height: 100%;
  min-height: clamp(220px, 34vh, 420px);
}

/* O tamanho olha para a largura E para a altura da tela. Só com vw, num
   notebook de tela baixa a peça ficava alta demais e subia por cima do
   título. O min() faz vencer a dimensão mais apertada das duas. */
.abre__peca {
  position: absolute; top: 50%; left: 50%;
  width: clamp(120px, min(20vw, 25vh), 260px);
  margin: 0;
  will-change: transform;
}

/* O corte redondo é feito aqui, pelo navegador, e não gravado na imagem.
   Antes o disco vinha recortado num JPEG com fundo escuro chapado, e quando
   as três peças se sobrepunham no início da cena o retângulo de uma cobria a
   outra. Com clip-path o recorte é transparente de verdade: as peças se
   encavalam sem se apagar.

   A sombra é drop-shadow, e não box-shadow, porque drop-shadow segue o
   contorno recortado. box-shadow desenharia um quadrado atrás do círculo. */
/* height: auto é obrigatório aqui. A tag da imagem declara height="620" para
   reservar espaço e evitar salto de layout, e esse valor entra como altura
   real se o CSS não disser o contrário. Sem height:auto, aspect-ratio não
   calcula nada: o disco virava uma tira alta e o recorte redondo cortava só
   o topo. */
.abre__peca img {
  width: 100%; height: auto; aspect-ratio: 1;
  object-fit: cover;
  clip-path: circle(50% at 50% 50%);
  filter:
    drop-shadow(0 18px 26px rgba(0,0,0,.55))
    drop-shadow(0 2px 5px rgba(0,0,0,.35));
}

/* Anel de luz sobre a borda do disco: dá volume e separa a peça do fundo,
   sem depender de moldura. */
.abre__peca::after {
  /* só sobre a área da imagem, não sobre a legenda: por isso inset com
     "auto" embaixo, mais aspect-ratio para fechar o quadrado do disco */
  content: ''; position: absolute; inset: 0 0 auto 0;
  aspect-ratio: 1; border-radius: 50%;
  pointer-events: none;
  box-shadow:
    inset 0 1px 1px rgba(255,244,230,.28),
    inset 0 -10px 22px rgba(0,0,0,.26);
}

/* Empilhados no centro em p=0, abertos e retos em p=1.
   O leve degrau vertical evita que os três pareçam um bloco só. */
.abre__peca--1 {
  transform: translate(-50%, -50%)
             translateX(calc(var(--p1) * -25vw))
             translateY(calc(var(--p1) * 3vh))
             rotate(calc(-8deg + var(--p1) * 8deg))
             scale(calc(.82 + var(--p1) * .18));
  z-index: 1;
}
.abre__peca--2 {
  transform: translate(-50%, -50%)
             translateY(calc(var(--p1) * -2vh))
             scale(calc(.9 + var(--p1) * .1));
  z-index: 3;
}
.abre__peca--3 {
  transform: translate(-50%, -50%)
             translateX(calc(var(--p1) * 25vw))
             translateY(calc(var(--p1) * 3vh))
             rotate(calc(8deg - var(--p1) * 8deg))
             scale(calc(.82 + var(--p1) * .18));
  z-index: 2;
}

/* As legendas só entram depois de abrir, senão ficariam empilhadas */
.abre__peca figcaption {
  margin-top: .9rem; text-align: center;
  font-family: var(--serif); font-size: clamp(.9rem, 1.5vw, 1.15rem);
  color: var(--areia);
  opacity: var(--p2);
}
.abre__peca figcaption span {
  display: block; font-family: var(--sans);
  font-size: .54rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(247,241,232,.55); margin-top: .3rem;
}

@media (max-width: 760px) {
  /* No celular abrem em coluna: lado a lado ficariam pequenos demais */
  /* Abertura menor na vertical: com 14vh a peça de cima encostava no título
     em telas de 640px de altura, que ainda são comuns. */
  .abre__peca { width: clamp(104px, min(36vw, 19vh), 180px); }
  .abre__peca--1 {
    transform: translate(-50%,-50%) translateX(calc(var(--p1) * -30vw))
               translateY(calc(var(--p1) * -10vh)) rotate(calc(-8deg + var(--p1) * 8deg))
               scale(calc(.82 + var(--p1) * .18));
  }
  .abre__peca--3 {
    transform: translate(-50%,-50%) translateX(calc(var(--p1) * 30vw))
               translateY(calc(var(--p1) * 10vh)) rotate(calc(8deg - var(--p1) * 8deg))
               scale(calc(.82 + var(--p1) * .18));
  }
  .abre__peca figcaption { font-size: .78rem; }
}

.giro__dados {
  display: flex; justify-content: center; gap: clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  opacity: var(--p2);
}
.giro__dado b {
  display: block; font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 300; color: var(--areia); line-height: 1;
}
.giro__dado span {
  font-size: .56rem; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(247,241,232,.5);
}

/* ==========================================================================
   ATO 4 · As três peças
   Elas sobem uma depois da outra, cada uma com o seu nome e a sua medida.
   ========================================================================== */

.trinca {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: end;
  width: min(92vw, 1100px);
  max-height: 100%;
}

/* O piso de 0,14 de opacidade existe para o palco nunca ficar vazio quando a
   cena prende na tela. As peças já estão lá, apagadas, e sobem para o foco. */
/* min-width: 0 é obrigatório aqui. Sem ele, a coluna do grid cresce para
   caber a figura inteira e a fileira estoura a largura da tela. */
.trinca__item {
  min-width: 0;
  text-align: center;
  transform: translateY(calc((1 - var(--eta)) * 22vh));
  opacity: calc(.14 + var(--eta) * .86);
  will-change: transform;
}
.trinca__item:nth-child(1) { --eta: var(--p1); }
.trinca__item:nth-child(2) { --eta: var(--p2); }
.trinca__item:nth-child(3) { --eta: var(--p3); }

/* A altura manda, não a largura: assim a peça nunca cresce além da faixa do
   meio e nunca encosta no título. A largura vem da proporção. */
.trinca__figura {
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 26px 60px rgba(35,22,14,.28);
  aspect-ratio: 3 / 4;
  height: clamp(170px, 40vh, 400px);
  width: auto; max-width: 100%;
  margin-inline: auto;
  background: var(--areia-morna);
}
.trinca__figura img { width: 100%; height: 100%; object-fit: cover; }

.trinca__nome { font-family: var(--serif); font-size: clamp(1.05rem, 2vw, 1.6rem); margin: 1.1rem 0 .2rem; }
.trinca__meta { font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--terra-suave); }
.cena--escura .trinca__meta { color: rgba(247,241,232,.58); }

/* No celular as três continuam lado a lado, só que menores. Empilhadas em
   coluna elas somavam mais de 900px de altura e estouravam a tela: a última
   nunca chegava a aparecer inteira. Lado a lado, a ideia de sequência
   (primeiro, depois, por último) também fica mais clara. */
@media (max-width: 720px) {
  .trinca { gap: .55rem; }
  .trinca__figura { height: clamp(110px, 21vh, 190px); border-radius: 12px; }
  .trinca__nome { font-size: .88rem; margin: .7rem 0 .15rem; line-height: 1.2; }
  /* .48rem da 7,7px, abaixo do que se le num celular. O tamanho de tela
     grande e .6rem; aqui fica perto disso, e quem cede e o espacamento
     entre letras, que era o que estava fazendo a linha nao caber. */
  .trinca__meta { font-size: .58rem; letter-spacing: .06em; line-height: 1.5; }
  .trinca__item { transform: translateY(calc((1 - var(--eta)) * 14vh)); }
}

/* ==========================================================================
   ATO 5 · Os ativos
   Palavras grandes que se aproximam. Sem foto: aqui o assunto é a fórmula.
   ========================================================================== */

/* O margin-inline: auto não é enfeite. A lista tem 1000px e vive dentro de um
   container de 1240px, então sem ele o bloco encostava na esquerda e só o
   texto dentro dele ficava centralizado. Na tela grande dava para ver. */
.ativos-cena {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(.6rem, 1.6vw, 1.4rem);
  width: min(100%, 1000px);
  margin-inline: auto;
}
.ativos-cena span {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 4.2vw, 3.2rem);
  font-weight: 300;
  line-height: 1.1;
  color: rgba(247,241,232,.28);
  transition: color 600ms ease;
}
/* Vão acendendo em ondas conforme o progresso avança */
.ativos-cena span:nth-child(3n+1) { color: rgba(247,241,232,calc(.22 + var(--p1) * .78)); }
.ativos-cena span:nth-child(3n+2) { color: rgba(247,241,232,calc(.22 + var(--p2) * .78)); }
.ativos-cena span:nth-child(3n)   { color: rgba(247,241,232,calc(.22 + var(--p3) * .78)); }

.ativos-cena span em { font-style: normal; color: var(--dourado); }

/* ==========================================================================
   ATO 6 · Escolha
   Três painéis grandes. Aqui a apresentação vira loja.
   ========================================================================== */

.escolha {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.4vw, 2rem);
  width: min(94vw, 1240px);
}

.escolha__painel {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: 24px; overflow: hidden;
  background: var(--papel);
  border: 1px solid var(--linha);
  text-align: left;
  transition: transform 600ms var(--calma), box-shadow 600ms var(--calma);
}
.escolha__painel:hover { transform: translateY(-8px); box-shadow: var(--sombra-alta); }

.escolha__figura { aspect-ratio: 1; overflow: hidden; }
.escolha__figura img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--calma); }
.escolha__painel:hover .escolha__figura img { transform: scale(1.05); }

.escolha__corpo { padding: 1.5rem 1.6rem 1.8rem; display: flex; flex-direction: column; flex: 1; }
.escolha__nome { font-family: var(--serif); font-size: clamp(1.2rem, 2.2vw, 1.7rem); margin: 0 0 .25rem; }
.escolha__sub { font-family: var(--serif); font-style: italic; color: var(--barro); margin: 0 0 .8rem; }
.escolha__essencias { font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--terra-suave); margin: 0 0 1.2rem; }
.escolha__preco { font-family: var(--serif); font-size: 1.4rem; margin-top: auto; }

@media (max-width: 860px) {
  /* width: min(94vw, 1240px) existe para os paineis respirarem mais que o
     container em tela grande. No celular o container ja tem a margem certa,
     e 94vw passava dele: 352px de conteudo numa caixa de 335. */
  .escolha { grid-template-columns: 1fr; width: 100%; }
  .escolha__figura { aspect-ratio: 16/10; }
}

/* ==========================================================================
   Barra de progresso da apresentação
   Um fio fino no topo, mostrando onde a pessoa está na história.
   ========================================================================== */

.fio-progresso {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200;
  background: transparent; pointer-events: none;
}
.fio-progresso__interno {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--barro), var(--dourado));
  transition: width 120ms linear;
}

/* ==========================================================================
   EDIÇÃO DE PRESENTE · Florescer Eterno
   --------------------------------------------------------------------------
   Ato claro, entre o Ato 5 escuro e a loja. As quatro peças entram uma por
   vez, cada uma na sua etapa, com o nome e a fala embaixo.

   Por que claro, depois de duas tentativas escuras: as fotos vinham com
   fundo quase preto e a seção também, contraste medido de 1,24. A peça
   sumia dentro do próprio retângulo. Recortando o fundo, o retângulo deixa
   de existir e o ato pode ser claro sem competir com nada.
   ========================================================================== */

.cena--presente { --altura: 280vh; }
@media (max-width: 760px) { .cena--presente { --altura: 250vh; } }

/* ==========================================================================
   BOTAO DO KIT CORTADO NO CELULAR
   --------------------------------------------------------------------------
   O palco e sticky com altura de uma tela e overflow:hidden. No desktop cabe.
   No celular nao: titulo + quatro pecas + a chamada + o botao somavam 889px
   num palco de 812, e o botao "Ver o ritual" ficava 37px abaixo do corte.
   Invisivel, e era o botao que leva ao produto mais caro da casa.

   Nao adianta raspar 77px: num aparelho de 667px de altura o corte passaria
   de 200. Entao no celular o palco deixa de cortar e cresce com o conteudo.
   Perde-se um pouco da coreografia de rolagem; ganha-se o botao existir.

   As pecas tambem encolhem, para na maioria dos aparelhos continuar cabendo
   numa tela e o ato manter o efeito.
   ========================================================================== */
@media (max-width: 760px) {
  .cena--presente .cena__palco {
    height: auto;
    min-height: var(--tela);
    overflow: visible;
  }
  .cena--presente .palco-coluna {
    height: auto;
    padding-top: clamp(4.5rem, 11vh, 6rem);
    padding-bottom: 2.5rem;
  }
  .cena--presente .peca__figura { height: clamp(84px, 15vh, 150px); margin-bottom: .6rem; }
  .cena--presente .peca__fala { display: none; }   /* a essencia ja aparece na pagina do ritual */
  .cena--presente .presente__chamada { font-size: .95rem; }
}

.cena--presente .cena__palco {
  background:
    radial-gradient(80% 60% at 50% 28%, rgba(199,147,85,.13), transparent 70%),
    var(--areia);
}

.presente__pecas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.6rem, 2vw, 2rem);
  align-items: end;
  width: min(100%, 1240px);
  margin-inline: auto;
}

/* Cada peça sobe e aparece conforme a SUA etapa avança. A opacidade fecha
   antes do movimento terminar, para a peça já estar legível enquanto ainda
   assenta, em vez de chegar e só então acender. */
.peca {
  margin: 0;
  text-align: center;
  opacity: clamp(0, calc(var(--etapa) * 1.6), 1);
  transform: translateY(calc((1 - var(--etapa)) * 46px));
}

.peca__figura {
  display: flex; align-items: flex-end; justify-content: center;
  height: clamp(120px, 22vh, 250px);
  margin-bottom: 1rem;
}
.peca__figura img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  /* drop-shadow segue o recorte; box-shadow desenharia um quadrado */
  filter: drop-shadow(0 14px 18px rgba(58, 42, 32, .22));
}

.peca__nome {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1rem, 1.7vw, 1.45rem);
  margin: 0; line-height: 1.2;
}
.peca__meta {
  font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--terra-suave); margin: .35rem 0 0;
}
.peca__fala {
  font-family: var(--serif); font-style: italic;
  font-size: .92rem; color: var(--barro);
  margin: .5rem 0 0; line-height: 1.35;
}

.presente__chamada {
  font-size: clamp(.98rem, 1.5vw, 1.15rem);
  color: var(--terra-suave);
  max-width: 46ch; margin: 0 auto 1.4rem;
}
.presente__acao { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* No celular, quatro numa linha dariam peças de uns 80px, que é selo de
   correio. Duas por duas, cada uma respira. */
@media (max-width: 760px) {
  .presente__pecas { grid-template-columns: repeat(2, 1fr); gap: 1.2rem 1rem; }
  .peca__figura { height: clamp(96px, 15vh, 150px); }
  .peca__fala { display: none; }   /* a fala completa vive na página do ritual */
}