/* ============================================================
   vsl-end-overlay.css — Overlay de fim de vídeo (tela VSL)
   ------------------------------------------------------------
   Disparado pelo evento panda_ended (ou html5 'ended').
   Cobre 100% do .player com fechamento + CTA WhatsApp.

   COMPOSIÇÃO (revisada por Marcel em 21/05/2026):
   ------------------------------------------------------------
   O overlay é VERTICAL (9:16) — altura ~1.78x a largura. O inner
   usa justify-content:center pra fixar o bloco texto + CTA no meio
   do overlay (não colado no topo, não colado na base).

     ┌──────────────────────────────┐
     │                  [↻ rever]   │ ← replay sutil, top-right
     │                              │
     │      (respiro superior)      │
     │                              │
     │  Tem coisas que ninguém...   │ ← linha 1
     │                              │   (espaço de uma linha)
     │  Dar o primeiro passo é...   │ ← linha 2
     │  ─── divisor gold ───        │
     │  Eu já cumpri minha parte... │ ← lead italic
     │                              │
     │  ┌────────────────────────┐  │ ← CTA dourado
     │  │  AGENDAR MINHA CONV.   │  │   (gradient gold, texto preto)
     │  └────────────────────────┘  │
     │                              │
     │      (respiro inferior)      │
     └──────────────────────────────┘

   Visual:
     - Fundo verde-musgo escuro (#1A3F2A) — distinto do
       --bg-deep (#0D1F18) da página, com sutil grão dourado.
     - Headline em branco, peso 800, centralizada, 2 frases com
       gap de ~1.35em entre elas (uma "linha em branco" visual).
     - Lead em sand, italic, abaixo do divisor.
     - CTA dourado (--grad-gold) com texto preto-protocolo
       (--bg-deep) e glow gold no pulse — destoa do fundo verde.

   Estados:
     - default (escondido):    [hidden] no markup, display:none
     - .is-visible:            opacity 1, pointer-events auto, fade-in
   ============================================================ */

.vsl-end-overlay{
  /* Posicionado dentro do .player-stage (sibling do .player) e centralizado
     em cima do .player. Por que sibling e não filho? Porque vsl.js chama
     clearPlayerChildren() ao montar iframe/video, o que apagava o overlay
     quando era filho do .player.

     As dimensões REPLICAM as do .player (definidas em vsl.css):
       mobile  → width 92vw, max-width 640px, aspect-ratio do JS, max-height 85vh
       desktop → width min(720px, 92vw), max-height 80vh
     E o aspect-ratio é sincronizado via JS em applyAspectRatio(). */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92vw;
  max-width: 640px;
  aspect-ratio: 720/360; /* fallback — sobrescrito por JS via config.VIDEO.aspectRatio */
  max-height: 85vh;
  border-radius: var(--radius-card);
  overflow: hidden;
  z-index: 5; /* acima do .player (z=2) e do ::before do .player (z=1) */
  background:
    radial-gradient(ellipse at top, rgba(198,156,109,.10), transparent 55%),
    radial-gradient(ellipse at bottom, rgba(198,156,109,.06), transparent 55%),
    #1A3F2A;
  display: flex;
  align-items: stretch;
  justify-content: center;
  /* Padding generoso pra criar respiro nas bordas e empurrar conteúdo
     dos extremos do retângulo vertical. Top maior pra não colar no
     botão replay. */
  padding: 56px 24px 32px;

  /* Estado inicial: invisível mas presente (transição via opacity) */
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms var(--ease);
}

/* Desktop: replica as dimensões maiores do .player e dá mais respiro */
@media (min-width: 640px){
  .vsl-end-overlay{
    width: min(720px, 92vw);
    max-height: 80vh;
    padding: 64px 40px 40px;
  }
}

.vsl-end-overlay::before{
  /* Grão sutil dourado tipo o do .player original — mantém coerência visual */
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(245,242,232,.02) 0 1px, transparent 1px 14px);
  pointer-events: none;
}

.vsl-end-overlay.is-visible{
  opacity: 1;
  pointer-events: auto;
}

/* ------------------------------------------------------------
   Botão "Assistir novamente" — canto superior direito, sutil.
   Reduzido pra não competir visualmente com o headline em vertical.
------------------------------------------------------------ */
.vsl-end-overlay__replay{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  background: rgba(13, 31, 24, 0.55);
  border: 1px solid rgba(245, 242, 232, 0.18);
  border-radius: 999px;
  color: var(--sand);
  font-family: var(--font-b);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.4px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}

.vsl-end-overlay__replay:hover,
.vsl-end-overlay__replay:focus-visible{
  background: rgba(13, 31, 24, 0.85);
  border-color: var(--gold);
  color: #fff;
  outline: none;
}

.vsl-end-overlay__replay svg{ flex-shrink: 0; }

/* ------------------------------------------------------------
   Inner: distribui os dois blocos (cópia + ação) com vácuo no meio.
   space-between só funciona se inner tiver altura = 100% (stretch
   do flex pai cuida disso porque .vsl-end-overlay tem align-items:stretch).
------------------------------------------------------------ */
.vsl-end-overlay__inner{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  /* Centralizado verticalmente: bloco texto + CTA fica no meio do overlay.
     A logo agora está ABSOLUTA no topo (fora do fluxo), então o inner
     centraliza apenas copy + action. O padding-top abaixo garante que
     o bloco centralizado tenha respiro generoso da logo flutuante
     (logo top ~28-56px + altura ~156-260px + respiro). */
  justify-content: center;
  align-items: center;
  gap: 0;
  /* Respiro entre logo (flutuante no topo) e o bloco texto centralizado.
     Fluido pra acompanhar overlay vertical em diferentes alturas. */
  padding-top: clamp(150px, 22vh, 220px);
}

/* ------------------------------------------------------------
   Logo Protocolo Primal — ANCORADA NO TOPO do overlay (absolute).
   ------------------------------------------------------------
   Por que position:absolute? O .__inner usa justify-content:center
   pra centralizar verticalmente copy + action. Pra deixar a logo
   destacada no topo (e não competindo no eixo vertical centralizado),
   tiramos ela do fluxo e ancoramos com top:clamp().

   Tamanho: aumentado +30% vs original (120/32vw/200 → 156/42vw/260).
   Respiro logo→copy é controlado pelo padding-top do .__inner
   (não mais por margin-bottom, que não funciona em absolute).
------------------------------------------------------------ */
.vsl-end-overlay__logo{
  position: absolute;
  top: clamp(28px, 5vh, 56px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(156px, 42vw, 260px);
  height: auto;
  z-index: 2; /* acima do ::before (grão) mas abaixo do replay */
  opacity: 0.92;
}

/* ------------------------------------------------------------
   Bloco de cópia: headline + divisor + lead
   Ancorado no topo do inner, agrupados.
------------------------------------------------------------ */
.vsl-end-overlay__copy{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.vsl-end-overlay__headline{
  font-family: var(--font-h);
  font-weight: 800;
  font-size: clamp(20px, 5.6vw, 28px);
  line-height: 1.25;
  color: #fff;
  margin: 0;
  letter-spacing: -0.3px;
  text-wrap: balance;
}

/* Duas frases do headline, cada uma em sua "linha lógica" com espaço
   de uma linha em branco entre elas (mood respiração/decantação). */
.vsl-end-overlay__headline-line{
  display: block;
}
.vsl-end-overlay__headline-line + .vsl-end-overlay__headline-line{
  margin-top: 1.35em;
}

/* Divisor gold sutil — separa headline do lead com hierarquia */
.vsl-end-overlay__divider{
  width: 36px;
  height: 1px;
  background: var(--gold);
  opacity: 0.55;
  border-radius: 1px;
}

.vsl-end-overlay__lead{
  font-family: var(--font-b);
  font-style: italic;
  font-size: clamp(14px, 3.6vw, 16px);
  line-height: 1.5;
  color: var(--sand);
  margin: 0;
  text-wrap: balance;
  opacity: 0.92;
}

/* ------------------------------------------------------------
   Bloco de ação: CTA + micro-trust
   Ancorado na base do inner. margin-top generoso pra manter
   a separação visual original entre cópia e CTA (era gap:80px no
   inner, agora controlado aqui porque inner tem gap:0).
------------------------------------------------------------ */
.vsl-end-overlay__action{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 80px;
}

@media (min-width: 640px){
  .vsl-end-overlay__action{
    margin-top: 96px;
  }
}

/* CTA — herda visual do .btn.btn-wa mas com identidade própria
   (.cta-reveal não se aplica aqui porque o overlay já controla a visibilidade).
   AGORA: ocupa largura quase total (max 380px) pra ancorar o terço inferior
   com peso visual proporcional ao espaço disponível em vertical. */
.vsl-end-overlay__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 380px;
  padding: 16px 24px;

  /* Dourado pra destoar do fundo verde-musgo do overlay.
     Texto preto-protocolo (#0D1F18) sobre gold = contraste AAA. */
  background: var(--grad-gold);
  color: var(--bg-deep);
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-btn);
  box-shadow: 0 12px 30px -10px rgba(var(--gold-rgb), 0.55);

  transition: filter 200ms var(--ease), transform 200ms var(--ease);
  animation: vslEndPulseGlow 2.4s ease-in-out infinite;
}

.vsl-end-overlay__cta:hover{
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.vsl-end-overlay__cta .btn-label{
  display: inline-block;
  line-height: 1;
}

@keyframes vslEndPulseGlow{
  0%, 100%{
    box-shadow:
      0 12px 30px -10px rgba(var(--gold-rgb), 0.55),
      0 0 0 0 rgba(var(--gold-rgb), 0.55);
  }
  50%{
    box-shadow:
      0 12px 30px -10px rgba(var(--gold-rgb), 0.65),
      0 0 0 16px rgba(var(--gold-rgb), 0);
  }
}

/* ------------------------------------------------------------
   Mobile: aperta padding lateral, mantém respiro vertical.
   Em telas estreitas (<= 380px) o headline reduz mais.
------------------------------------------------------------ */
@media (max-width: 480px){
  .vsl-end-overlay{
    padding: 48px 18px 24px;
  }
  .vsl-end-overlay__inner{
    /* Telas estreitas: logo um pouco menor + top menor → reduz padding-top */
    padding-top: clamp(130px, 20vh, 180px);
  }
  .vsl-end-overlay__action{
    margin-top: 64px;
  }
  .vsl-end-overlay__copy{
    gap: 12px;
  }
  .vsl-end-overlay__cta{
    max-width: 100%;
    padding: 15px 20px;
    font-size: 14px;
  }
  .vsl-end-overlay__replay{
    top: 10px;
    right: 10px;
    padding: 5px 9px;
    font-size: 10px;
    letter-spacing: 0.3px;
  }
}

@media (max-width: 380px){
  .vsl-end-overlay__headline{
    font-size: 18px;
    line-height: 1.3;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .vsl-end-overlay{
    transition: opacity 200ms linear;
  }
  .vsl-end-overlay__cta{
    animation: none;
  }
}

/* ------------------------------------------------------------
   QUANDO O OVERLAY ESTÁ VISÍVEL → silencia o CTA secundário.
   ------------------------------------------------------------
   Hierarquia: o overlay é o palco principal do fim do vídeo.
   O link secundário existia pra "antes do fim" (quem queria
   sair em 90%). Quando o overlay aparece, o link deve sumir
   visualmente pra eliminar competição entre dois CTAs idênticos
   no destino.

   Implementação CSS-only via :has() — funciona em iOS 16.4+ e
   navegadores modernos. Fallback no JS (vsl.js) cobre legacy:
   adiciona .is-silenced ao .cta-reveal--secondary quando o
   overlay vira visível.
------------------------------------------------------------ */
.screen[data-screen="11"]:has(.vsl-end-overlay.is-visible) .cta-reveal--secondary,
.cta-reveal--secondary.is-silenced{
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 300ms var(--ease) !important;
}