/* /vsl page (Task 6). Loaded after quiz.css: reuses the shared tokens, body
   background, fonts, .wrap, .btn, .label from there. Only the pieces the
   quiz screens do not need live here: the video player and the offer card. */

.vsl { padding: 40px 0 20px; }
.vsl .sub { opacity: .85; max-width: 480px; margin: 14px 0 30px; }

/* video */
.video-caixa {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--dark);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-caixa video { width: 100%; height: 100%; object-fit: cover; }
.video-caixa video[hidden] { display: none; }
.video-aviso { padding: 0 24px; font-size: 15px; text-align: center; opacity: .85; }
.video-aviso a { color: var(--gold); }

/* line above the player: says how long it is and that the price comes at the end,
   so nobody sits through it wondering whether anything is going to happen */
.sub-aviso {
  margin: -8px 0 22px;
  font-size: 15px;
  color: var(--gold);
  opacity: .9;
}

/* sound overlay: the video autoplays muted, this is what turns sound on. Covers
   the whole frame so it is impossible to miss and hard to miss-tap. */
.video-som {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: #fff;
  background: linear-gradient(rgba(13, 27, 42, .25), rgba(13, 27, 42, .72));
  transition: opacity .25s ease;
}
.video-som[hidden] { display: none; }
.video-som-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  color: var(--gold);
  font-size: 26px;
  padding-left: 5px; /* optical centering of the triangle */
  background: rgba(13, 27, 42, .55);
}
.video-som-texto { font-size: 19px; letter-spacing: .01em; }
.video-som-nota { font-size: 14px; opacity: .7; }
@media (max-width: 600px) {
  .video-som-icone { width: 60px; height: 60px; font-size: 22px; }
  .video-som-texto { font-size: 17px; }
  /* the frame is only ~210px tall here, so this line lands on top of the burned-in
     caption. "Toque para ouvir" is the part that has to be read. */
  .video-som-nota { display: none; }
}

/* offer: hidden until vsl.js reveals it, then fades in */
.oferta {
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid rgba(201, 168, 76, .25);
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}
.oferta[hidden] { display: none; }
.oferta.visivel { opacity: 1; transform: none; }
.oferta h2 { font-size: clamp(26px, 6vw, 32px); margin: 8px 0 10px; }
/* who the product is for, right under the name: same spot and spirit as the
   ceiling line in the video script (prompts/sales beat "O que e o Essencial"),
   so it survives when the video is unheard, unwatched or simply missing */
.oferta-teto { opacity: .8; font-size: 15px; margin: 0 0 26px; }
.oferta-lista { list-style: none; text-align: left; max-width: 420px; margin: 0 auto 30px; font-size: 15.5px; }
.oferta-lista li { padding: 7px 0 7px 24px; position: relative; opacity: .92; }
.oferta-lista li::before { content: "—"; position: absolute; left: 0; color: var(--gold); }
.oferta-preco { margin-bottom: 30px; }
/* quiz.css does not define .btn-sub (plano.html has its own copy in an inline
   <style>; this page has no inline style, so it needs its own rule) */
.btn-sub { display: block; font-size: 13px; font-weight: 300; opacity: .8; margin-top: 10px; letter-spacing: 1px; }
/* Sem esta linha o `hidden` da nota do trimestral (vsl.js, janela da campanha)
   não esconde nada: um seletor de classe com display:block vence o
   [hidden]{display:none} do navegador. */
.btn-sub[hidden] { display: none; }
.btn-sub a { color: var(--gold); }
.oferta-preco .valor {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(44px, 10vw, 56px);
  color: var(--gold);
  margin-bottom: 20px;
}
.oferta-preco .valor span { display: block; font-family: "DM Sans", sans-serif; font-size: 15px; opacity: .7; margin-top: 4px; }

.garantias { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.gar { border: 1px dashed rgba(201, 168, 76, .5); border-radius: 8px; padding: 14px 18px; font-size: 13.5px; max-width: 260px; opacity: .9; }

/* footer: quiz.css sets tight letter-spacing sized for the one-line brand
   tag; the disclaimer paragraph and the /plano link need normal spacing to
   stay readable, and the link needs a color (not opacity) to stand out
   since the footer's own opacity already dims the whole subtree */
.disclaimer { letter-spacing: normal; line-height: 1.6; margin-bottom: 16px; max-width: 640px; }
.rodape-links { margin-bottom: 14px; letter-spacing: normal; }
.rodape-links a { color: var(--gold); }
.marca { letter-spacing: 1px; }

/* price strip: pinned to the bottom of the viewport from precoDelaySeconds on.
   Fixed, not inline, because the whole point is that it stays reachable while
   the visitor is still watching -- an inline block below the player is exactly
   as invisible as the offer box was. Hidden again once the full offer opens,
   so the page never shows two buy buttons at once. */
.preco-barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: rgba(6, 12, 20, .96);
  border-top: 1px solid rgba(201, 168, 76, .35);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .45);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity .35s ease, transform .35s ease;
}
.preco-barra[hidden] { display: none; }
.preco-barra.visivel { opacity: 1; transform: none; }
.preco-barra-texto { text-align: left; line-height: 1.35; }
.preco-barra-texto strong { display: block; font-size: 15.5px; }
.preco-barra-texto span { font-size: 13.5px; opacity: .8; }
.preco-barra .btn { padding: 12px 22px; font-size: 15px; white-space: nowrap; }

@media (max-width: 520px) {
  .preco-barra { gap: 10px; justify-content: space-between; }
  .preco-barra .btn { padding: 11px 16px; font-size: 14px; }
}

/* the escape to /plano now sits above the legal disclaimer instead of under
   six lines of it: it is the only path forward for someone who is not going to
   sit through the video, and it was measurably being used (the 12/08 lead went
   to /plano twice) while buried. */
.rodape-links-topo { margin-bottom: 18px; font-size: 15px; }

/* the fixed strip overlaps the end of the page; give the footer room so the
   disclaimer and the /plano link stay readable behind it. */
body:has(.preco-barra.visivel) footer { padding-bottom: 92px; }