/* VSL: fundo branco, texto à esquerda (rótulo, título, parágrafo, assinatura) e vídeo vertical à direita. Estático = tudo visível. */
.tn-vsl { background: var(--tn-bg-light); color: var(--tn-ink); padding-block: var(--tn-section-space); overflow: clip; }
.tn-vsl__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.tn-vsl__eyebrow { margin: 0 0 var(--tn-space-4); color: var(--tn-color-gold-dark); }
.tn-vsl__title { margin: 0; max-inline-size: 14ch; font-size: clamp(2.2rem, 0.8rem + 4.2vw, 4.75rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; color: var(--tn-ink); }
.tn-vsl .tn-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.28em 0.1em 0.12em; margin: -0.28em -0.1em -0.12em; }
.tn-vsl .tn-w__in { display: inline-block; }
.tn-vsl__sub { margin: var(--tn-space-6) 0 0; max-inline-size: 36ch; font-size: var(--tn-text-lg); line-height: 1.5; color: var(--tn-ink-secondary); }
.tn-vsl__person { display: flex; align-items: center; gap: var(--tn-space-4); margin-block-start: var(--tn-space-12); }
.tn-vsl__person img { inline-size: 3.5rem; block-size: 3.5rem; border-radius: 50%; object-fit: cover; object-position: 50% 18%; flex: none; }
.tn-vsl__person p { margin: 0; display: grid; gap: 0.15rem; line-height: 1.25; }
.tn-vsl__person strong { font-size: 1.125rem; font-weight: 700; color: var(--tn-color-gold-dark); }
.tn-vsl__person span { font-size: var(--tn-text-sm); font-weight: 600; color: var(--tn-ink); }

.tn-vsl__media { position: relative; display: flex; justify-content: center; min-block-size: min(66svh, 38rem); }
/* Bloco dourado deslocado atrás do vídeo: assinatura da marca, tira o ar de "página de curso". */
.tn-vsl__media::before { content: ""; position: absolute; inset-block: 1.5rem -1.5rem; inset-inline: calc(50% - 8.4rem) calc(50% - 8.4rem - 1.5rem); background: var(--tn-color-gold); border-radius: 1.75rem; z-index: 0; transform: translateX(1.5rem); }
.tn-vsl__video { position: relative; z-index: 1; block-size: min(66svh, 38rem); aspect-ratio: 9 / 16; max-inline-size: 100%; border-radius: 1.75rem; overflow: hidden; background: #000; box-shadow: 0 30px 60px -24px rgba(0, 10, 28, 0.45); }
.tn-vsl__video img, .tn-vsl__video video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.tn-vsl__video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 60%, rgba(0, 10, 28, 0.7)); pointer-events: none; }
.tn-vsl__video.is-playing::after, .tn-vsl__video.is-playing .tn-vsl__play { display: none; }
.tn-vsl__play { position: absolute; z-index: 2; inset-inline: 0; inset-block-end: var(--tn-space-6); margin-inline: auto; inline-size: max-content; display: inline-flex; align-items: center; gap: 0.6rem; min-block-size: 3.25rem; padding-inline: var(--tn-space-6); border: 0; border-radius: 999px; background: var(--tn-color-gold); color: var(--tn-bg-deep); font: 600 0.9375rem/1 var(--tn-font-sans); cursor: pointer; transition: transform var(--tn-dur-micro) var(--tn-ease-out); }
@media (hover: hover) and (pointer: fine) { .tn-vsl__play:hover { transform: scale(1.05); } }

@media (max-width: 899px) {
  .tn-vsl__grid { grid-template-columns: 1fr; gap: 0; }
  /* Celular: o texto "se dissolve" no grid para o vídeo ficar entre o parágrafo e o CTA/assinatura. */
  .tn-vsl__text { display: contents; }
  .tn-vsl__eyebrow { order: 1; }
  .tn-vsl__title { order: 2; }
  .tn-vsl__sub { order: 3; }
  .tn-vsl .tn-vsl__person { order: 4; margin-block-start: var(--tn-space-8); }
  .tn-vsl .tn-vsl__media { order: 5; margin-block-start: var(--tn-space-6); }
  .tn-vsl .tn-vsl__cta { order: 6; margin-block-start: var(--tn-space-18); }
  .tn-vsl__cta .tn-btn { inline-size: 100%; }
  .tn-vsl__title { max-inline-size: 16ch; }
  .tn-vsl__media { margin-block-start: var(--tn-space-6); min-block-size: min(64svh, 32rem); }
  .tn-vsl__video { block-size: min(64svh, 32rem); }
}

.tn-vsl__cta { margin: var(--tn-space-8) 0 0; }

/* Controles do player (aparecem ao dar play): pausar/continuar, fechar e barra de progresso. */
.tn-vsl__ctl { display: none; }
.tn-vsl__video.is-playing .tn-vsl__ctl { display: block; }
.tn-vsl__ctlbtn { position: absolute; z-index: 3; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 10, 28, 0.62); color: #fff; cursor: pointer; backdrop-filter: blur(6px); transition: background var(--tn-dur-micro); }
@media (hover: hover) and (pointer: fine) { .tn-vsl__ctlbtn:hover { background: rgba(0, 10, 28, 0.85); } }
.tn-vsl__toggle { inset-inline-start: 0.75rem; inset-block-end: 1rem; }
.tn-vsl__close { inset-inline-end: 0.75rem; inset-block-start: 0.75rem; }
.tn-vsl__toggle .i-play { display: none; }
.tn-vsl__video.is-paused .tn-vsl__toggle .i-play { display: block; }
.tn-vsl__video.is-paused .tn-vsl__toggle .i-pause { display: none; }
.tn-vsl__bar { position: absolute; z-index: 3; inset-inline: 0; inset-block-end: 0; block-size: 3px; background: rgba(255, 255, 255, 0.25); }
.tn-vsl__bar i { display: block; inline-size: 100%; block-size: 100%; background: var(--tn-color-gold); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }

/* Mini-player: ao rolar para longe da seção, o vídeo acompanha na tela, acima do botão do WhatsApp. */
.tn-vsl__video.is-docked { position: fixed; z-index: 150; inset-inline-end: 1rem; inset-block-end: 5.5rem; inset-inline-start: auto; inset-block-start: auto; block-size: auto; inline-size: 10.5rem; max-inline-size: none; border-radius: 1rem; box-shadow: 0 18px 40px -8px rgba(0, 10, 28, 0.55), 0 0 0 1px rgba(210, 168, 51, 0.7); animation: tn-dock-in 0.4s var(--tn-ease-out); }
.tn-vsl__video.is-docked .tn-vsl__ctlbtn { inline-size: 2.25rem; block-size: 2.25rem; }
.tn-vsl__video.is-docked .tn-vsl__toggle { inset-inline-start: 0.5rem; inset-block-end: 0.75rem; }
.tn-vsl__video.is-docked .tn-vsl__close { inset-inline-end: 0.5rem; inset-block-start: 0.5rem; }
@keyframes tn-dock-in { from { opacity: 0; transform: translateY(16px) scale(0.92); } to { opacity: 1; transform: none; } }
@media (max-width: 599px) { .tn-vsl__video.is-docked { inline-size: 8.5rem; inset-inline-end: 0.75rem; inset-block-end: 5.25rem; } }
@media (prefers-reduced-motion: reduce) { .tn-vsl__video.is-docked { animation: none; } }

/* Ao tocar, o poster sai de cima do vídeo. */
.tn-vsl__video.is-playing > img { display: none; }
.tn-vsl__video > video { z-index: 1; }

.tn-vsl { scroll-margin-block-start: 3rem; }