/* Landing, #237 (16/10/2026): as cenas de dor com horário (seção 2) e o bloco do teste (fim).
   Arquivo à parte do site.css porque o site.css já está no ar: só a landing com as cenas carrega este. */

/* cada cena: o texto (a hora grande, a dor, a virada) e o recorte da tela real; a do meio troca de lado */
.cena{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(32px,6vw,88px);align-items:center;margin-top:clamp(56px,8vw,104px)}
.cena-inversa{grid-template-columns:minmax(0,420px) minmax(0,1fr)}
.cena-inversa .cena-texto{order:2}
.cena-titulo{display:flex;flex-direction:column;gap:8px;margin:0 0 20px;font:600 clamp(19px,1.6vw,22px)/1.3 var(--f-texto)}
.cena-hora{font:650 clamp(58px,7.4vw,100px)/.92 var(--f-impacto);letter-spacing:-.035em;color:var(--em)}
.cena-dor,.cena-virada{font-size:clamp(18px,1.5vw,20px);line-height:1.6;max-width:34em}
.cena-dor{margin:0 0 20px;opacity:.86}
.cena-virada{margin:0;padding-left:18px;border-left:3px solid var(--ponto)}
.cena-virada strong{font-weight:700}
.cena-exemplo{font:italic 400 .92em var(--f-apoio);color:inherit;opacity:.72} /* .exemplo já é a caixa tracejada do site.css */
.cena-tela .recorte{max-width:420px;margin:0 auto}

/* o bloco do teste usa o .final do site; o título é mais longo que o de antes */
.final.teste .t-titulo{max-width:20ch}

@media (max-width:760px){
  .cena,.cena-inversa{grid-template-columns:1fr;gap:28px}
  .cena-inversa .cena-texto{order:0}
}