/* ============ LAYOUT — cenas empilhadas, tudo centrado ============ */
.cena{
  position:relative;padding:var(--gap-6) 22px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  overflow:hidden;
}
.cena > *{position:relative;z-index:2}
.cena--claro{background:var(--luz);color:var(--tinta)}
.cena--claro h2,.cena--claro h3{color:var(--tinta)}
.cena--claro .guia{color:var(--tinta-baixa)}
.cena--claro .olho{color:var(--brasa-forte)}
.cena--alto{background:var(--chao-alto)}

.interior{width:min(var(--largura),100%);display:flex;flex-direction:column;align-items:center}

/* olho (eyebrow) — discreto, nunca caixa-alta gritada */
.olho{
  font-family:var(--texto-fonte);font-size:var(--t-mini);letter-spacing:.03em;
  color:var(--brasa);margin-bottom:var(--gap-2);
}
.guia{margin-top:var(--gap-3);font-size:var(--t-guia);line-height:1.58;max-width:40ch;color:var(--voz-baixa)}
.corpo{margin-top:var(--gap-3);max-width:var(--leitura);line-height:1.78}
.corpo + .corpo{margin-top:var(--gap-2)}

.acoes{margin-top:var(--gap-4);display:flex;gap:var(--gap-4);flex-wrap:wrap;justify-content:center}
.acoes a{font-size:1.05rem}

/* respiração de entrada */
.sobe{opacity:0;transform:translateY(22px);
  transition:opacity var(--lento),transform var(--lento)}
.sobe.acesa{opacity:1;transform:none}

@media (max-width:640px){
  .cena{padding:clamp(3.5rem,8vh,5rem) 20px}
}