/* Scene-by-scene film at the top of /empresas and /curso (cenas.js).
   Desktop: the model slides side to side and the caption takes the free side.
   Phone: no video; each scene becomes a card with its still and caption. */

.cenas { position: relative; overflow: hidden; height: calc(100svh - 62px); min-height: 560px; background: var(--cenas-fundo, #EAE5E0); color: var(--ink); transition: background 1.6s ease; font-family: 'Archivo', system-ui, sans-serif; }
.cenas.noite { background: radial-gradient(ellipse 70% 80% at 68% 55%, #858A94, #7A7E84 75%); }

.cenas__quadro { position: absolute; inset: 0; transform: translateX(var(--x, 0)) scale(var(--s, 1)); transform-origin: 50% 60%; transition: transform 1.7s cubic-bezier(.45,0,.25,1); }
.cenas__quadro video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; --h: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); --v: linear-gradient(transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: var(--h), var(--v); -webkit-mask-composite: source-in; mask-image: var(--h), var(--v); mask-composite: intersect; }
.cenas__quadro video.oculto { visibility: hidden; }

/* Full-frame films (/curso): a soft paper panel behind the caption's side */
.cenas--cheio::before, .cenas--cheio::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .6s; }
.cenas--cheio::before { background: linear-gradient(to right, var(--cenas-fundo) 0, var(--cenas-fundo) 34%, color-mix(in srgb, var(--cenas-fundo) 70%, transparent) 44%, transparent 58%); }
.cenas--cheio::after { background: linear-gradient(to left, var(--cenas-fundo) 0, var(--cenas-fundo) 34%, color-mix(in srgb, var(--cenas-fundo) 70%, transparent) 44%, transparent 58%); }
.cenas--cheio[data-lado="esquerda"]::before, .cenas--cheio[data-lado="direita"]::after { opacity: 1; }
.cenas--cheio .cenas__legenda[data-lado="direita"] { left: 64vw; }

.cenas__legenda, .cenas__trilha, .cenas__acoes { z-index: 2; }
.cenas__legenda { position: absolute; left: clamp(20px, 5vw, 72px); top: 50%; width: min(31vw, 470px); translate: 0 -50%; opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .5s, color 1.2s; pointer-events: none; }
.cenas__legenda[data-lado="direita"] { left: 61vw; }
.cenas__legenda.on { opacity: 1; transform: none; pointer-events: auto; }
.cenas__legenda img { display: none; }
.cenas__olho { display: block; color: var(--blue); font-weight: 600; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.cenas__legenda h1, .cenas__legenda h2 { font-size: clamp(1.9rem, 3vw, 3rem); line-height: 1.08; margin: 10px 0 12px; font-weight: 700; letter-spacing: -.01em; }
.cenas__legenda p { color: var(--ink-soft); font-size: 1.08rem; line-height: 1.5; margin: 0; transition: color 1.2s; }
.cenas__legenda .botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.noite .cenas__legenda { color: #F5F0EA; }
.noite .cenas__legenda p { color: #E3E6EC; }
.noite .cenas__olho { color: #9DBBFF; }
.noite .cenas__legenda .botao--linha { color: #F5F0EA; border-color: #F5F0EA; }

.cenas__trilha { position: absolute; right: clamp(12px, 2.4vw, 36px); top: 50%; transform: translateY(-50%); display: grid; gap: 6px; }
.cenas__trilha button { width: 24px; height: 24px; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; }
.cenas__trilha button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #b9b3a8; transition: background .3s, transform .3s; }
.cenas__trilha button[aria-current="step"]::before { background: var(--blue); transform: scale(1.4); }
.cenas__trilha button:focus-visible { outline: 2px solid var(--blue); border-radius: 50%; }

.cenas__acoes { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 22px; align-items: end; }
.cenas__acoes button, .cenas__acoes a { border: 0; background: none; color: inherit; font: inherit; font-size: .85rem; cursor: pointer; opacity: .75; text-decoration: none; transition: opacity .3s; }
.cenas__acoes button:hover, .cenas__acoes a:hover { opacity: 1; }
.cenas__proxima { display: grid; justify-items: center; gap: 4px; }
.cenas__proxima[hidden] { display: none; }
.cenas__proxima i { width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); animation: cenas-desce 1.6s infinite; }
@keyframes cenas-desce { 50% { transform: translateY(4px) rotate(45deg); } }
.noite .cenas__acoes { color: #F5F0EA; }

/* Phone and touch-only screens: stacked cards, no video */
@media (max-width: 860px), (hover: none) {
  .cenas { height: auto; min-height: 0; padding: 28px 16px 8px; background: var(--paper); }
  .cenas__quadro, .cenas__trilha, .cenas__acoes { display: none; }
  .cenas__legenda { position: static; width: auto; translate: none; opacity: 1; transform: none; pointer-events: auto; margin-bottom: 40px; }
  .cenas__legenda[data-lado="direita"] { left: auto; }
  .cenas__legenda img { display: block; width: 100%; height: auto; border-radius: 16px; margin-bottom: 18px; background: var(--cenas-fundo, #EAE5E0); }
  .noite .cenas__legenda, .cenas.noite .cenas__legenda { color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) { .cenas__quadro, .cenas__legenda { transition: none; } .cenas__proxima i { animation: none; } }
/* In-page film (not at the top any more): a bit shorter than the screen */
@media (min-width: 861px) and (hover: hover) { .cenas:not([data-modo]) { height: min(88svh, 860px); } }
.cenas__acoes .cenas__pausa { min-width: 72px; }
/* Mid-page film: pinned under the header while the page scrolls through its track */
@media (min-width: 861px) and (hover: hover) {
  .cenas__pista { position: relative; }
  .cenas__pista > .cenas { position: sticky; }
}
/* At dusk the caption panel takes the dusk colour, so the light text stays readable */
.cenas--cheio.noite { --cenas-fundo: #7A7E84 !important; }   /* beats the inline day colour */