/* ============================================================================
   S3U · "Como as pessoas usam": colunas de histórias que rolam devagar
   Rolagem contínua em CSS puro (keyframes). Sem framework. Texto das
   histórias vem de historias/historias.json, verbatim.
   Estrutura:
     section.s3u-hist > .s3u-hist-in
       .s3u-hist-cab (rótulo, título, aviso obrigatório)
       .s3u-hist-palco (máscara em gradiente, altura fixa)
         .s3u-hist-col × 3 (cada uma com duas .s3u-hist-lista idênticas,
                            para o laço fechar sem salto)
   Colunas: 3 no computador, 2 no tablet (< 1000px), 1 no celular (< 640px).
   Velocidades diferentes por coluna; a do meio sobe ao contrário.
   ============================================================================ */
.s3u-hist { background: #F7F5F0; color: #16294D; border-top: 1px solid rgba(22,41,77,.12); }
.s3u-hist--branco { background: #FFFFFF; }
.s3u-hist--navy { background: #16294D; color: #F7F5F0; border-top-color: rgba(247,245,240,.12); }
.s3u-hist-in { max-width: 1180px; margin: 0 auto; padding: clamp(56px, 8vw, 80px) clamp(20px, 4vw, 40px); display: flex; flex-direction: column; gap: clamp(32px, 4vw, 48px); }
.s3u-hist-cab { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.s3u-hist-eyebrow { font-family: var(--font-detail, "Space Grotesk", sans-serif); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(22,41,77,.5); }
.s3u-hist--navy .s3u-hist-eyebrow { color: rgba(247,245,240,.55); }
.s3u-hist-titulo { margin: 0; font-family: var(--font-display, "Sora", sans-serif); font-weight: 500; font-size: clamp(28px, 4.2vw, 44px); letter-spacing: -0.03em; line-height: 1.12; text-wrap: pretty; }
.s3u-hist-fio { width: 56px; height: 1px; background: #C9A227; }
/* o aviso obrigatório: visível, no topo, antes de qualquer história */
.s3u-hist-aviso { margin: 0; display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.6; color: rgba(22,41,77,.78); max-width: 62ch; text-align: left; hyphens: manual; }
.s3u-hist-aviso::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 999px; background: #C9A227; margin-top: 7px; }
.s3u-hist--navy .s3u-hist-aviso { color: rgba(247,245,240,.8); }

/* o palco: altura fixa, bordas de cima e de baixo desvanecem */
.s3u-hist-palco {
  --s3u-hist-h: 620px;
  position: relative; height: var(--s3u-hist-h); overflow: hidden;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.s3u-hist-col { min-width: 0; display: flex; flex-direction: column; will-change: transform; animation: s3uHistSubir var(--s3u-hist-dur, 60s) linear infinite; }
.s3u-hist-col:nth-child(1) { --s3u-hist-dur: 48s; }
.s3u-hist-col:nth-child(2) { --s3u-hist-dur: 62s; animation-direction: reverse; }
.s3u-hist-col:nth-child(3) { --s3u-hist-dur: 54s; }
/* cada lista é uma cópia inteira; o padding-bottom vale um gap, então -50% fecha exato */
.s3u-hist-lista { display: flex; flex-direction: column; gap: 16px; padding-bottom: 16px; }
@keyframes s3uHistSubir { from { transform: translateY(0); } to { transform: translateY(-50%); } }
/* o mouse sobre o palco não pausa: as colunas seguem no mesmo ritmo (pedido de 09/09) */

/* cartão */
.s3u-hist-card { background: #FFFFFF; border: 1px solid rgba(22,41,77,.12); padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 18px; }
.s3u-hist--branco .s3u-hist-card { background: #F7F5F0; }
.s3u-hist--navy .s3u-hist-card { background: rgba(247,245,240,.04); border-color: rgba(247,245,240,.14); }
.s3u-hist-destaque { margin: 0; font-family: var(--font-display, "Sora", sans-serif); font-weight: 500; font-size: 18px; letter-spacing: -0.02em; line-height: 1.4; color: #16294D; text-wrap: pretty; text-align: left; hyphens: manual; }
.s3u-hist--navy .s3u-hist-destaque { color: #F7F5F0; }
/* cartao de uma frase: tipo maior, para criar ritmo nas colunas em movimento */
.s3u-hist-card--curto .s3u-hist-destaque { font-size: 21px; line-height: 1.35; }
@media (max-width: 639px) { .s3u-hist-card--curto .s3u-hist-destaque { font-size: 19px; } }
.s3u-hist-pe { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid #C9A227; padding-top: 12px; }
.s3u-hist-quem { font-size: 13.5px; font-weight: 500; line-height: 1.5; color: #16294D; }
.s3u-hist-usou { font-family: var(--font-detail, "Space Grotesk", sans-serif); font-size: 12px; line-height: 1.55; color: rgba(22,41,77,.62); }
.s3u-hist--navy .s3u-hist-quem { color: #F7F5F0; }
.s3u-hist--navy .s3u-hist-usou { color: rgba(247,245,240,.62); }

/* tablet: duas colunas; a terceira sai */
@media (max-width: 999px) {
  .s3u-hist-palco { grid-template-columns: repeat(2, minmax(0, 1fr)); --s3u-hist-h: 560px; }
  .s3u-hist-col:nth-child(3) { display: none; }
}
/* celular: uma coluna, mais baixa */
@media (max-width: 639px) {
  .s3u-hist-palco { grid-template-columns: minmax(0, 1fr); --s3u-hist-h: 460px; }
  .s3u-hist-col:nth-child(2) { display: none; }
  .s3u-hist-destaque { font-size: 17px; }
}
/* sem movimento: colunas paradas, só a primeira cópia à vista, altura livre */
@media (prefers-reduced-motion: reduce) {
  .s3u-hist-col { animation: none !important; }
  .s3u-hist-palco { height: auto; -webkit-mask-image: none; mask-image: none; }
  .s3u-hist-lista + .s3u-hist-lista { display: none; }
}