/* S16 · S17 — "Como é hoje na UTI" e "Os riscos do padrão atual".
   Quadro de 4 cartões que entram um por batida (data-beats="3": batida 0
   mostra o 1º, a 3 mostra os 4 e a frase final). Só CSS, sem JS. */
.hoje {
  position: absolute; left: var(--margin-h); right: var(--margin-h);
  top: 9rem; bottom: var(--ref-band);
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-6);
}
.hoje__titulo { margin: 0 }
.quadro4 {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5);
}
.quadro4__item {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5);
  background: var(--bg-800); border: 1px solid var(--stroke); border-radius: var(--r-lg);
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur-base) var(--ease-out-expo), transform var(--dur-base) var(--ease-out-expo);
}
.quadro4__icone {
  width: 56px; height: 56px; fill: none; stroke: var(--primary-soft);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.quadro4--risco .quadro4__icone { stroke: var(--warn) }
.quadro4__nome { color: var(--txt-high) }
.hoje__fecho { margin: 0; opacity: 0; transition: opacity var(--dur-base) }

.scene[data-beat] .quadro4__item:nth-child(1),
.scene[data-beat="1"] .quadro4__item:nth-child(-n+2),
.scene[data-beat="2"] .quadro4__item:nth-child(-n+3),
.scene[data-beat="3"] .quadro4__item { opacity: 1; transform: none }
.scene[data-beat="3"] .hoje__fecho { opacity: 1 }
.hoje__fecho[data-emph="accent"] { color: var(--accent-soft) }