/* Página de venda de kit com vídeo: tela de capas, amostra, "um vídeo, uma missão" e lista das aulas. Usa os tokens e completa landing.css. */

/* ---------- topo: tela com as capas dos vídeos */
.lpv-screen { position: relative; padding: 14px; border-radius: 26px; background: #2a1f4a; box-shadow: 0 30px 60px -30px rgb(var(--shadow-c) / .8); transform: rotate(-2deg); }
.lpv-screen__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-radius: 14px; overflow: hidden; }
.lpv-screen__grid img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.lpv-screen__badge { top: -26px; right: -14px; }
@keyframes lpv-in { from { opacity: 0; transform: scale(.9); } }

/* ---------- amostra */
.lpv-player { position: relative; aspect-ratio: 16 / 9; max-width: 880px; margin: 26px auto 0; border-radius: var(--r-lg); overflow: hidden; background: #2a1f4a; box-shadow: 0 24px 50px -30px rgb(var(--shadow-c) / .8); }
.lpv-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lpv-sample { text-align: center; }
.lpv-sample .lp-sub { margin-inline: auto; }

/* ---------- um vídeo, uma missão */
.lpv-day__steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: d; }
.lpv-day__steps li { position: relative; padding: 24px 20px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--c) 9%, var(--paper)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 24%, transparent); }
.lpv-day__steps li::after { counter-increment: d; content: counter(d); position: absolute; top: 14px; right: 18px; font: 800 2rem/1 var(--f-display); color: color-mix(in srgb, var(--c) 35%, transparent); }
.lpv-day__steps span { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; color: #fff; background: var(--c); margin-bottom: 12px; }
.lpv-day__steps h3 { font: 800 var(--t-lg)/1.2 var(--f-display); margin: 0 0 6px; }
.lpv-day__steps p { margin: 0; color: var(--ink-2); font-size: var(--t-sm); }

/* ---------- lista dos vídeos */
.lpv-week + .lpv-week { margin-top: 30px; }
.lpv-week h3 { font: 800 var(--t-xl)/1.15 var(--f-display); margin: 26px 0 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.lpv-week h3 small { font: 700 var(--t-sm)/1 var(--f-text); color: var(--ink-3); }
.lpv-videos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.lpv-videos li { border-radius: var(--r-md); background: var(--paper); overflow: hidden; box-shadow: 0 10px 24px -20px rgb(var(--shadow-c) / .7); }
.lpv-videos img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.lpv-videos span { display: block; padding: 10px 12px 12px; }
.lpv-videos b { display: block; font-size: var(--t-sm); line-height: 1.25; }
.lpv-videos small { color: var(--ink-3); font-size: var(--t-xs); }

@media (max-width: 900px) {
  .lpv-screen { order: -1; width: min(100%, 460px); margin: 8px auto 0; transform: none; padding: 10px; }
  .lpv-screen__badge { top: -18px; right: -6px; }
  .lpv-day__steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .lpv-day__steps { grid-template-columns: 1fr; }
  .lpv-videos { grid-template-columns: 1fr 1fr; gap: 10px; }
  .lpv-videos span { padding: 8px 10px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .lpv-screen__grid img { animation: none; }
}

/* ---------- material para imprimir do kit */
.lpv-print { margin-top: 34px; display: grid; grid-template-columns: minmax(240px, .8fr) 1.2fr; gap: clamp(22px, 4vw, 48px); align-items: center; padding: clamp(22px, 4vw, 40px); border-radius: var(--r-xl); background: color-mix(in srgb, var(--sun) 14%, var(--paper)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sun) 45%, transparent); }
.lpv-print__pics { position: relative; aspect-ratio: 1 / 1; max-width: 360px; width: 100%; margin-inline: auto; }
.lpv-print__pics img { position: absolute; width: 62%; height: auto; border-radius: 10px; background: #fff; box-shadow: 0 22px 40px -24px rgb(var(--shadow-c) / .8); }
.lpv-print__cover { left: 4%; top: 4%; z-index: 3; transform: rotate(-5deg); }
.lpv-print__page { right: 2%; top: calc(10% + var(--n) * 6%); transform: rotate(calc(4deg + var(--n) * 5deg)); }
.lpv-print__tag { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; font-weight: 800; font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--sun) 55%, var(--ink)); }
.lpv-print__tag .i { width: 20px; height: 20px; }
.lpv-print h3 { font: 800 var(--t-2xl)/1.05 var(--f-display); margin: 0 0 12px; }
.lpv-print__txt > p { margin: 0 0 16px; color: var(--ink-2); font-size: var(--t-md); max-width: 56ch; }
.lpv-print__chips { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lpv-print__chips li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--pill); background: var(--paper); font-weight: 700; font-size: var(--t-sm); }
.lpv-print__chips .i { width: 16px; height: 16px; color: var(--leaf); }
.lpv-print__facts { list-style: none; margin: 0; padding: 16px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; border-top: 1.5px dashed color-mix(in srgb, var(--sun) 50%, transparent); }
.lpv-print__facts li { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--ink-2); }
.lpv-print__facts .i { width: 20px; height: 20px; color: var(--grape); }
.lpv-print__facts b { color: var(--ink); }
@media (max-width: 760px) {
  .lpv-print { grid-template-columns: 1fr; }
  .lpv-print__pics { max-width: 280px; }
}

/* ---------- personagens e rabiscos de ciência (só enfeite: aria-hidden / alt vazio) */
.lp--video .lp-hero { isolation: isolate; }
.lpv-doodles { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.lpv-d { position: absolute; width: clamp(34px, 4vw, 56px); height: auto; opacity: .55; animation: lpv-float 7s ease-in-out infinite; }
.lpv-d--atom { left: 4%; top: 14%; color: var(--blue); animation-duration: 9s; }
.lpv-d--atom g { transform-origin: 32px 32px; animation: lpv-spin 14s linear infinite; }
.lpv-d--flask { left: 44%; bottom: 8%; color: var(--leaf); animation-delay: -2s; }
.lpv-d--star { right: 6%; top: 8%; color: var(--sun); width: clamp(26px, 3vw, 40px); animation-delay: -4s; }
.lpv-d--rocket { right: 3%; bottom: 14%; color: var(--pink); animation-duration: 6s; }
.lpv-d--magnet { left: 50%; top: 6%; color: var(--grape); width: clamp(26px, 3vw, 40px); animation-delay: -1s; }
.lpv-bub { animation: lpv-bub 2.4s ease-in infinite; }
.lpv-bub--2 { animation-delay: 1.1s; }
@keyframes lpv-float { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-14px) rotate(6deg); } }
@keyframes lpv-spin { to { transform: rotate(360deg); } }
@keyframes lpv-bub { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-22px); opacity: 0; } }

.lpv-char { position: absolute; z-index: 4; height: auto; pointer-events: none; filter: drop-shadow(0 18px 18px rgb(var(--shadow-c) / .35)); }
.lpv-char--menina { width: clamp(110px, 13vw, 190px); left: -12%; bottom: -16%; transform-origin: 50% 100%; animation: lpv-hi 4.5s ease-in-out infinite; transform: rotate(2deg); }
@keyframes lpv-hi { 0%, 100% { transform: rotate(2deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-8px); } }

/* ---------- oferta: caixa do produto e selos de economia */
.lpv-offer .lp-offer__list { position: relative; }
.lpv-offer .lp-offer__list ul { padding-right: clamp(0px, 14vw, 190px); }
.lpv-box { position: absolute; right: 18px; bottom: -6px; width: clamp(130px, 13vw, 190px); height: auto; filter: drop-shadow(0 20px 20px rgb(var(--shadow-c) / .3)); animation: lpv-bob 5s ease-in-out infinite; }
@keyframes lpv-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
.lpv-eco { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 2px 0; }
.lpv-eco span { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border-radius: var(--pill); font-size: var(--t-sm); white-space: nowrap; }
.lpv-eco__off { background: var(--sun); color: #3d2a00; font-weight: 800; letter-spacing: .04em; animation: lpv-wiggle 3.5s ease-in-out infinite; }
.lpv-eco__un { background: rgb(255 255 255 / .16); }
@keyframes lpv-wiggle { 0%, 88%, 100% { transform: rotate(0); } 92% { transform: rotate(-6deg) scale(1.06); } 96% { transform: rotate(5deg) scale(1.06); } }

/* ---------- garantia centralizada, com selo carimbando */
.lpv-guarantee { flex-direction: column; text-align: center; gap: 18px; }
.lpv-guarantee p { margin-inline: auto; }
.lpv-guarantee .lp-guarantee__seal { width: 148px; height: 148px; }
.lpv-ring { position: absolute; inset: -12px; border-radius: 50%; border: 2.5px dashed color-mix(in srgb, var(--leaf) 55%, transparent); animation: lpv-spin 22s linear infinite; }
.js .lp .lpv-guarantee[data-in] .lp-guarantee__seal { transform: scale(1.6) rotate(-25deg); opacity: 0; transition: transform .6s var(--spring) .15s, opacity .3s .15s; }
.js .lp .lpv-guarantee[data-in].is-in .lp-guarantee__seal { transform: none; opacity: 1; }

@media (max-width: 900px) {
  .lpv-char--menina { left: auto; right: -3%; bottom: -24%; width: 84px; }
  .lpv-screen { margin-bottom: 26px; }
  .lpv-d { opacity: .35; }
}
@media (max-width: 760px) {
  .lpv-offer .lp-offer__list ul { padding-right: 0; }
  .lpv-box { position: static; display: block; margin: 18px auto -6px; width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .lpv-d, .lpv-d--atom g, .lpv-bub, .lpv-char--menina, .lpv-box, .lpv-eco__off, .lpv-ring { animation: none; }
  .js .lp .lpv-guarantee[data-in] .lp-guarantee__seal { transform: none; opacity: 1; transition: none; }
}
/* VSL logo abaixo da promessa: mais perto do topo e com o botão de compra embaixo */
.lpv-vsl { padding-top: clamp(28px, 4vw, 48px); }
.lpv-vsl__cta { margin-top: 22px; }