/* VSL Player: estilos. Cores e medidas ajustáveis pelas variáveis do .vsl
   --vsl-accent (barra, aviso de som, play), --vsl-urgency (botão da pausa), --vsl-buy (botão do checkout na pausa) */
.vsl, .vsl *, .vsl *::before, .vsl *::after { box-sizing: border-box; }

.vsl {
  --vsl-accent: #d93025;
  --vsl-accent-text: #fafafa;
  --vsl-accent-glow: rgba(217, 48, 37, .45);
  --vsl-text: #fafafa;
  --vsl-bg: #0f0f0f;
  --vsl-radius: 16px;
  --vsl-bar-h: 8px;
  container-type: inline-size;
  container-name: vsl;
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: var(--vsl-bg);
  border-radius: var(--vsl-radius);
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.vsl video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--vsl-bg);
}

.vsl-ui { position: absolute; inset: 0; }
.vsl svg { display: block; width: 100%; height: 100%; }

/* ---------- camadas ---------- */
.vsl-layer {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--vsl-text);
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.vsl-layer:focus-visible { outline: 3px solid var(--vsl-text); outline-offset: -3px; }

.vsl[data-state="preview"] .vsl-unmute,
.vsl[data-state="idle"] .vsl-play,
.vsl[data-state="ended"] .vsl-play,
.vsl:not(.vsl-has-urgency)[data-state="paused"] .vsl-play,
.vsl.vsl-has-urgency:not(.vsl-checkout-phase)[data-state="paused"] .vsl-pause-continue,
.vsl.vsl-has-urgency.vsl-checkout-phase[data-state="paused"] .vsl-pause-checkout,
.vsl[data-state="resume"] .vsl-resume { display: flex; }

/* ---------- aviso de som ---------- */
.vsl-unmute { background: rgba(15, 15, 15, .2); }
.vsl-unmute-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 80%;
  padding: 24px 32px;
  border: 1px solid rgba(250, 250, 250, .12);
  border-radius: 20px;
  background: rgba(15, 15, 15, .72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .4);
  transition: transform .2s ease;
}
.vsl-unmute:hover .vsl-unmute-card { transform: scale(1.03); }
.vsl-unmute:active .vsl-unmute-card { transform: scale(.98); }
.vsl-unmute-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 4px;
  padding: 14px;
  border-radius: 50%;
  background: var(--vsl-accent);
  color: var(--vsl-accent-text);
  animation: vsl-ring 1.6s ease-out infinite;
}
.vsl-unmute-top { font-size: 14px; font-weight: 500; line-height: 1.2; opacity: .72; }
.vsl-unmute-bottom { font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }

/* ---------- play / assistir de novo ---------- */
.vsl-play { background: rgba(15, 15, 15, .32); }
.vsl-play-btn {
  width: 72px;
  height: 72px;
  padding: 20px;
  border-radius: 50%;
  background: var(--vsl-accent);
  color: var(--vsl-accent-text);
  animation: vsl-ring 1.6s ease-out infinite;
  transition: transform .2s ease;
}
.vsl-play:hover .vsl-play-btn { transform: scale(1.06); }
.vsl-play:active .vsl-play-btn { transform: scale(.96); }
.vsl-i-play, .vsl-i-replay { display: block; width: 100%; height: 100%; }
.vsl-i-play svg { transform: translateX(2px); }
.vsl-i-replay { display: none; }
.vsl[data-state="ended"] .vsl-i-play { display: none; }
.vsl[data-state="ended"] .vsl-i-replay { display: block; }

/* ---------- pausa com urgência ---------- */
.vsl-pause {
  background: rgba(15, 15, 15, .9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.vsl-pause-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  width: 86%;
  pointer-events: none;
}
.vsl-pause-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.vsl-pause-text {
  flex: 1;
  font-size: clamp(16px, 5.4cqw, 24px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-align: center;
  animation: vsl-fade-up .3s ease-out both;
}
.vsl-stop {
  flex: none;
  width: clamp(64px, 24cqw, 112px);
  aspect-ratio: 1;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .4));
  animation:
    vsl-pop .4s cubic-bezier(.34, 1.56, .64, 1) .15s both,
    vsl-beat 1.2s ease-in-out 1.6s infinite;
}
.vsl-pill {
  position: relative;
  display: block;
  height: clamp(48px, 14cqw, 60px);
  filter: drop-shadow(0 8px 16px var(--vsl-urgency-glow, var(--vsl-accent-glow)));
}
.vsl-pill-bg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--vsl-urgency, var(--vsl-accent));
  color: var(--vsl-accent-text);
  overflow: hidden;
  animation: vsl-wipe .6s cubic-bezier(.65, 0, .35, 1) .45s both;
}
.vsl-pill-label {
  font-size: clamp(14px, 4.6cqw, 20px);
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
  animation: vsl-fade .25s ease-out 1s both;
}
.vsl-ripple {
  position: absolute;
  top: 50%;
  right: 10%;
  width: 40px;
  height: 40px;
  margin: -20px -20px 0 0;
  border-radius: 50%;
  background: rgba(250, 250, 250, .5);
  opacity: 0;
  animation: vsl-ripple 1.2s ease-out 1.3s infinite;
}
.vsl-cursor-track {
  position: absolute;
  inset: 0;
  animation: vsl-ride .6s cubic-bezier(.65, 0, .35, 1) .45s both;
}
.vsl-cursor {
  position: absolute;
  right: -16px;
  bottom: -20px;
  width: 32px;
  height: 32px;
  color: var(--vsl-text);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7));
  transform-origin: 30% 10%;
  animation: vsl-tap 1.2s ease-in-out 1.3s infinite;
}
.vsl-cursor svg { stroke-width: 2.25; }

/* versão com checkout: o botão é um link de verdade */
.vsl-pill-link { pointer-events: auto; text-decoration: none; color: inherit; cursor: pointer; }
.vsl-pill-link .vsl-pill-bg { background: var(--vsl-buy, var(--vsl-urgency, var(--vsl-accent))); }
.vsl-pill-link:focus-visible { outline: 2px solid var(--vsl-text); outline-offset: 4px; border-radius: 999px; }
.vsl-pause-keep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: center;
  margin-top: -8px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--vsl-text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  opacity: .72;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity .2s ease, background-color .2s ease;
  animation: vsl-fade .25s ease-out 1.1s both;
}
.vsl-pause-keep svg { width: 16px; height: 16px; flex: none; }
.vsl-pause-keep:hover { opacity: 1; background: rgba(250, 250, 250, .08); }
.vsl-pause-keep:focus-visible { outline: 2px solid var(--vsl-text); outline-offset: 2px; opacity: 1; }

@container vsl (max-width: 300px) {
  .vsl-pause-head { flex-direction: column-reverse; }
}

/* ---------- retomar ---------- */
.vsl-resume {
  gap: 12px;
  padding: 24px;
  background: rgba(15, 15, 15, .86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: default;
}
.vsl-resume-title {
  max-width: 80%;
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.vsl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(280px, 84%);
  height: 52px;
  padding: 0 24px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s ease, filter .2s ease, transform .1s ease;
}
.vsl-btn svg { width: 20px; height: 20px; flex: none; }
.vsl-btn:active { transform: scale(.98); }
.vsl-btn:focus-visible { outline: 2px solid var(--vsl-text); outline-offset: 3px; }
.vsl-btn-main { background: var(--vsl-accent); color: var(--vsl-accent-text); box-shadow: 0 8px 24px var(--vsl-accent-glow); }
.vsl-btn-main:hover { filter: brightness(1.08); }
.vsl-btn-ghost { background: transparent; border-color: rgba(250, 250, 250, .28); color: var(--vsl-text); }
.vsl-btn-ghost:hover { background: rgba(250, 250, 250, .08); }

/* ---------- barra de progresso ---------- */
.vsl-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--vsl-bar-h);
  background: rgba(250, 250, 250, .16);
  display: none;
  pointer-events: none;
}
.vsl[data-state="playing"] .vsl-bar,
.vsl[data-state="paused"] .vsl-bar,
.vsl[data-state="ended"] .vsl-bar { display: block; }
.vsl.vsl-has-urgency[data-state="paused"] .vsl-bar { display: none; }
.vsl-bar-fill {
  height: 100%;
  background: var(--vsl-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s linear;
}

/* ---------- carregando ---------- */
.vsl-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border: 4px solid rgba(250, 250, 250, .2);
  border-top-color: var(--vsl-text);
  border-radius: 50%;
  display: none;
  pointer-events: none;
  animation: vsl-spin .8s linear infinite;
}
.vsl.vsl-loading[data-state="playing"] .vsl-spinner { display: block; }

/* ---------- elementos que aparecem no minuto X ---------- */
.vsl-cta-off { display: none !important; }
.vsl-cta-on { animation: vsl-fade-up .6s ease-out both; }

/* ---------- animações (estado final = CSS base; as animações só partem do escondido) ---------- */
@keyframes vsl-ring {
  0% { box-shadow: 0 0 0 0 var(--vsl-accent-glow); }
  100% { box-shadow: 0 0 0 16px rgba(0, 0, 0, 0); }
}
@keyframes vsl-fade { from { opacity: 0; } }
@keyframes vsl-fade-up { from { opacity: 0; transform: translateY(12px); } }
@keyframes vsl-pop { from { opacity: 0; transform: scale(.4) rotate(-20deg); } }
@keyframes vsl-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes vsl-wipe { from { clip-path: inset(0 100% 0 0 round 999px); } to { clip-path: inset(0 0 0 0 round 999px); } }
@keyframes vsl-ride { 0% { opacity: 0; transform: translateX(-100%); } 15% { opacity: 1; } 100% { transform: translateX(0); } }
@keyframes vsl-tap {
  0%, 60%, 100% { transform: scale(1) translate(0, 0); }
  25% { transform: scale(.82) translate(-2px, -3px); }
}
@keyframes vsl-ripple {
  0% { opacity: 0; transform: scale(0); }
  20% { opacity: .6; transform: scale(.3); }
  100% { opacity: 0; transform: scale(3); }
}
@keyframes vsl-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .vsl *, .vsl-cta-on { animation: none !important; transition: none !important; }
}