/* ═══════════════════════════════════════════════════════════════════════════
   EduIndex Funil de Vendas v2 — CSS
   Popup: dark glassmorphism, estilo plugin CPF EduIndex
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --eif-gold:      #d4a017;
  --eif-gold-lt:   #f0c040;
  --eif-gold-dk:   #a07800;
  --eif-dark:      #0d1117;
  --eif-dark-2:    #161b22;
  --eif-dark-3:    #21262d;
  --eif-text:      #e6edf3;
  --eif-text-muted:#8b949e;
  --eif-radius:    14px;
  --eif-shadow:    0 20px 60px rgba(0,0,0,.7);
  --eif-trans:     all .3s cubic-bezier(.4,0,.2,1);
}

/* ── OVERLAY ────────────────────────────────────────────────────────────── */

#eif-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, .78);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* ── POPUP BOX — glassmorphism escuro ────────────────────────────────────── */

#eif-popup {
  position: relative;
  background: linear-gradient(145deg, rgba(30,36,46,.97), rgba(18,22,30,.97));
  border: 1px solid rgba(212,160,23,.25);
  border-radius: 22px;
  padding: 44px 40px 40px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow:
    var(--eif-shadow),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 80px rgba(212,160,23,.1);
  animation: eifPopIn .45s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes eifPopIn {
  from { opacity:0; transform: scale(.84) translateY(24px); }
  to   { opacity:1; transform: scale(1)  translateY(0); }
}

/* Linha decorativa dourada no topo */
#eif-popup::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 60%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--eif-gold), transparent);
  border-radius: 0 0 4px 4px;
}

/* Ícone central */
.eif-popup-icon {
  font-size: 46px;
  line-height: 1;
  margin-bottom: 16px;
  filter: drop-shadow(0 0 12px rgba(212,160,23,.5));
}

/* "Bem-vindo!" — título grande */
.eif-popup-bvindo {
  font-size: clamp(26px, 5vw, 34px);
  font-weight: 800;
  color: var(--eif-gold);
  margin: 0 0 8px;
  letter-spacing: -.3px;
  text-shadow: 0 0 20px rgba(212,160,23,.3);
}

/* "O que você precisa hoje?" — subtítulo menor */
.eif-popup-question {
  font-size: clamp(14px, 2.5vw, 16px);
  color: var(--eif-text-muted);
  margin: 0 0 30px;
  font-weight: 400;
  letter-spacing: .2px;
}

/* ── BOTÕES DO POPUP ─────────────────────────────────────────────────────── */

.eif-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.eif-btn-choice {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(212,160,23,.35);
  border-radius: var(--eif-radius);
  color: var(--eif-text);
  font-size: 16px;
  font-weight: 700;
  padding: 16px 22px;
  cursor: pointer;
  transition: var(--eif-trans);
  letter-spacing: .2px;
  position: relative;
  overflow: hidden;
}

.eif-btn-choice::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(212,160,23,.08), transparent);
  opacity: 0;
  transition: opacity .25s;
}

.eif-btn-choice:hover {
  border-color: var(--eif-gold);
  color: var(--eif-gold-lt);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212,160,23,.25);
}

.eif-btn-choice:hover::before { opacity: 1; }

.eif-btn-assinar {
  background: linear-gradient(135deg, var(--eif-gold-dk), var(--eif-gold)) !important;
  border-color: var(--eif-gold) !important;
  color: #000 !important;
  font-size: 17px !important;
  box-shadow: 0 4px 18px rgba(212,160,23,.35);
}

.eif-btn-assinar:hover {
  background: linear-gradient(135deg, var(--eif-gold), var(--eif-gold-lt)) !important;
  border-color: var(--eif-gold-lt) !important;
  color: #000 !important;
  box-shadow: 0 8px 28px rgba(212,160,23,.5) !important;
  transform: translateY(-3px) !important;
}

/* Divisor entre botões */
.eif-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--eif-text-muted);
  font-size: 12px;
}
.eif-divider::before,
.eif-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.1);
}

/* ── TRILHA ──────────────────────────────────────────────────────────────── */

.eif-trilha { padding: 0; }

/* ── BLOCOS ───────────────────────────────────────────────────────────────── */

.eif-bloco {
  padding: 64px 5%;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.eif-bloco-hidden { display: none; }

.eif-bloco-visible {
  display: block;
  animation: eifFadeUp .55s ease both;
}

@keyframes eifFadeUp {
  from { opacity:0; transform: translateY(28px); }
  to   { opacity:1; transform: translateY(0); }
}

.eif-bloco-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
  max-width: 1160px;
  margin: 0 auto;
}

.eif-bloco-titulo {
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 800;
  margin: 0 0 18px;
  line-height: 1.25;
}

.eif-bloco-corpo {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.8;
  opacity: .85;
}

/* Vídeo 9:16 */
.eif-bloco-video-wrap {
  display: flex;
  justify-content: center;
}

.eif-video-container {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 9 / 16;
  background: #000;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(212,160,23,.15);
  position: relative;
}

.eif-video-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.eif-video-placeholder {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #fff; gap: 14px;
  background: var(--eif-dark-2, #161b22);
}

.eif-video-play-icon {
  width: 58px; height: 58px;
  background: var(--eif-gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #000;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(212,160,23,.6); }
  50%      { box-shadow: 0 0 0 14px rgba(212,160,23,0); }
}

.eif-video-empty {
  width: 100%; max-width: 300px;
  aspect-ratio: 9 / 16;
  background: var(--eif-dark-3, #21262d);
  border-radius: 18px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--eif-text-muted, #888);
  font-size: 13px; text-align: center; gap: 12px;
  border: 2px dashed rgba(255,255,255,.1);
}
.eif-video-empty span { font-size: 38px; }

/* Barra de progresso */
.eif-video-progress {
  max-width: 1160px; margin: 18px auto 0;
  height: 3px;
  background: rgba(255,255,255,.08);
  border-radius: 99px; overflow: hidden;
}

.eif-progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--eif-gold-dk), var(--eif-gold-lt));
  border-radius: 99px;
  transition: width .8s linear;
}

.eif-aguarde-msg {
  text-align: center; font-size: 13px;
  color: var(--eif-text-muted, #888);
  margin: 10px auto 0;
  max-width: 1160px; padding: 0 5%;
}

/* ── ÁREA DE VENDAS ─────────────────────────────────────────────────────── */

.eif-vendas-section {
  padding: 60px 5% 80px;
  animation: eifFadeUp .55s ease both;
}

.eif-vendas-wrap {
  max-width: 960px;
  margin: 0 auto;
}

/* ── RESPONSIVO ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  #eif-popup { padding: 32px 22px 28px; }

  .eif-bloco-inner {
    grid-template-columns: 1fr; gap: 28px;
  }
  .eif-bloco-texto { order: 1; }
  .eif-bloco-video-wrap { order: 2; }
  .eif-video-container, .eif-video-empty { max-width: 220px; }
}