/* ─────────────────────────────────────────────────────────────────
   WpLanding — Video Frame CTA
   Llamado a la acción que aparece DENTRO del marco del video cuando
   el video termina de reproducirse. 5 estilos acordes a cada marco
   (gold, neon, cinema, glass, holo). Pulso + zoom en el botón.
   ───────────────────────────────────────────────────────────────── */

/* Contenedor base: ocupa todo el .wpl-vf-screen.
   Oculto SIN !important para que GrapesJS/JS pueda alternar la visibilidad
   con un atributo data-show="1" o con .wpl-vf-cta--visible. */
.wpl-vf-cta {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: inherit;
}
.wpl-vf-cta[data-show="1"],
.wpl-vf-cta.wpl-vf-cta--visible { display: flex; }

.wpl-vf-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cta-bg-image, none) center/cover no-repeat;
  z-index: 0;
}

.wpl-vf-cta-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 28px 24px;
  max-width: 92%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: wplCtaFadeIn .55s cubic-bezier(.34,1.56,.64,1);
}
@keyframes wplCtaFadeIn {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.wpl-vf-cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.wpl-vf-cta-title {
  font-size: clamp(1.3rem, 3.2vw, 2rem);
  font-weight: 900;
  margin: 0;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.wpl-vf-cta-desc {
  font-size: clamp(.85rem, 1.6vw, 1rem);
  margin: 0;
  max-width: 540px;
  line-height: 1.5;
  opacity: .9;
}

.wpl-vf-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  border: none;
  border-radius: 999px;
  font-size: clamp(.95rem, 1.8vw, 1.1rem);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  margin-top: 6px;
  letter-spacing: .02em;
  transform-style: preserve-3d;
  animation: wplCtaBtnPulse 1.8s ease-out infinite;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
  position: relative;
  will-change: transform;
}
.wpl-vf-cta-btn:hover {
  transform: scale(1.06) translateY(-2px);
  animation-play-state: paused;
}
.wpl-vf-cta-btn:active { transform: scale(.98); }
.wpl-vf-cta-btn svg { width: 20px; height: 20px; fill: currentColor; }

/* ─── 1) GOLD: dorado en vivo ─── */
.wpl-vf.wpl-vf-gold .wpl-vf-cta {
  background: radial-gradient(circle at 50% 30%, #6b4d10 0%, #2a1d05 60%, #0e0902 100%);
  color: #fef3c7;
}
.wpl-vf.wpl-vf-gold .wpl-vf-cta-badge {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: #422006;
  box-shadow: 0 6px 20px -5px rgba(245,158,11,.6), 0 0 0 1px rgba(255,255,255,.2) inset;
}
.wpl-vf.wpl-vf-gold .wpl-vf-cta-title { color: #fef3c7; text-shadow: 0 2px 30px rgba(245,158,11,.5); }
.wpl-vf.wpl-vf-gold .wpl-vf-cta-desc  { color: rgba(254,243,199,.78); }
.wpl-vf.wpl-vf-gold .wpl-vf-cta-btn {
  background: linear-gradient(135deg, #fbbf24, #f59e0b 50%, #d97706);
  color: #422006;
  box-shadow: 0 10px 30px -8px rgba(245,158,11,.7), 0 0 0 1px rgba(255,255,255,.25) inset;
}
@keyframes wplCtaBtnPulse {
  0%   { box-shadow: 0 10px 30px -8px rgba(245,158,11,.7), 0 0 0 0   rgba(251,191,36,.55), 0 0 0 1px rgba(255,255,255,.25) inset; }
  70%  { box-shadow: 0 10px 30px -8px rgba(245,158,11,.7), 0 0 0 22px rgba(251,191,36,0),    0 0 0 1px rgba(255,255,255,.25) inset; }
  100% { box-shadow: 0 10px 30px -8px rgba(245,158,11,.7), 0 0 0 0   rgba(251,191,36,0),    0 0 0 1px rgba(255,255,255,.25) inset; }
}

/* ─── 2) NEON CYBER: cyber con bordes rosados/cyan ─── */
.wpl-vf.wpl-vf-neon .wpl-vf-cta {
  background: radial-gradient(circle at 50% 40%, #1a0033 0%, #0a0014 70%);
  color: #f5d6ff;
}
.wpl-vf.wpl-vf-neon .wpl-vf-cta::after {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, #ec4899, #a855f7, #22d3ee);
  z-index: 1;
  border-radius: inherit;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: 2px;
  animation: wplCtaNeonGlow 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wplCtaNeonGlow {
  0%, 100% { filter: drop-shadow(0 0 16px rgba(236,72,153,.6)); }
  50%      { filter: drop-shadow(0 0 24px rgba(34,211,238,.7)); }
}
.wpl-vf.wpl-vf-neon .wpl-vf-cta-badge {
  background: rgba(236,72,153,.18);
  color: #f9a8d4;
  border: 1px solid rgba(236,72,153,.5);
  box-shadow: 0 0 18px rgba(236,72,153,.4);
}
.wpl-vf.wpl-vf-neon .wpl-vf-cta-title { color: #fff; text-shadow: 0 0 28px rgba(168,85,247,.7); }
.wpl-vf.wpl-vf-neon .wpl-vf-cta-desc  { color: rgba(245,214,255,.78); }
.wpl-vf.wpl-vf-neon .wpl-vf-cta-btn {
  background: linear-gradient(135deg, #ec4899 0%, #a855f7 50%, #22d3ee 100%);
  color: #fff;
  box-shadow: 0 10px 30px -8px rgba(168,85,247,.7);
}

/* ─── 3) CINEMA: cinta clásica roja ─── */
.wpl-vf.wpl-vf-cinema .wpl-vf-cta {
  background: linear-gradient(180deg, #1a0000 0%, #3a0606 50%, #1a0000 100%);
  color: #fef9e7;
}
.wpl-vf.wpl-vf-cinema .wpl-vf-cta::before {
  opacity: .35;
}
.wpl-vf.wpl-vf-cinema .wpl-vf-cta-badge {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #1a0000;
  box-shadow: 0 6px 18px -4px rgba(245,158,11,.6);
}
.wpl-vf.wpl-vf-cinema .wpl-vf-cta-title {
  color: #fbbf24;
  font-family: 'Georgia', serif;
  letter-spacing: -.01em;
  text-shadow: 0 2px 20px rgba(0,0,0,.8);
}
.wpl-vf.wpl-vf-cinema .wpl-vf-cta-desc  { color: rgba(254,249,231,.85); }
.wpl-vf.wpl-vf-cinema .wpl-vf-cta-btn {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  color: #1a0000;
  box-shadow: 0 12px 32px -8px rgba(245,158,11,.7);
}

/* ─── 4) GLASS: glassmorphism cristal ─── */
.wpl-vf.wpl-vf-glass .wpl-vf-cta {
  background: linear-gradient(135deg, rgba(6,182,212,.32) 0%, rgba(14,165,233,.32) 50%, rgba(99,102,241,.36) 100%);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  color: #fff;
}
.wpl-vf.wpl-vf-glass .wpl-vf-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 60%);
  z-index: 1;
  pointer-events: none;
}
.wpl-vf.wpl-vf-glass .wpl-vf-cta-badge {
  background: rgba(255,255,255,.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(10px);
}
.wpl-vf.wpl-vf-glass .wpl-vf-cta-title { color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,.45); }
.wpl-vf.wpl-vf-glass .wpl-vf-cta-desc  { color: rgba(255,255,255,.85); }
.wpl-vf.wpl-vf-glass .wpl-vf-cta-btn {
  background: linear-gradient(135deg, #06b6d4, #6366f1);
  color: #fff;
  box-shadow: 0 12px 32px -8px rgba(99,102,241,.65), 0 0 0 1px rgba(255,255,255,.3) inset;
}

/* ─── 5) HOLOGRÁFICO: iridiscente ─── */
.wpl-vf.wpl-vf-holo .wpl-vf-cta {
  background:
    radial-gradient(circle at 20% 30%, rgba(124,92,255,.45) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(224,49,157,.45) 0%, transparent 55%),
    radial-gradient(circle at 50% 100%, rgba(34,211,238,.4) 0%, transparent 60%),
    linear-gradient(135deg, #0b1020 0%, #1a0e3a 100%);
  background-size: 200% 200%, 200% 200%, 200% 200%, auto;
  animation: wplCtaHoloBg 12s ease-in-out infinite;
  color: #fff;
}
@keyframes wplCtaHoloBg {
  0%, 100% { background-position: 0% 0%, 100% 100%, 50% 100%, 0 0; }
  50%      { background-position: 100% 100%, 0% 0%, 50% 0%, 0 0; }
}
.wpl-vf.wpl-vf-holo .wpl-vf-cta-badge {
  background: linear-gradient(135deg, #7c5cff, #e0319d);
  color: #fff;
  box-shadow: 0 6px 22px -5px rgba(124,92,255,.6);
}
.wpl-vf.wpl-vf-holo .wpl-vf-cta-title {
  background: linear-gradient(135deg, #c4b5fd 0%, #f9a8d4 50%, #67e8f9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.wpl-vf.wpl-vf-holo .wpl-vf-cta-desc  { color: rgba(245,214,255,.85); }
.wpl-vf.wpl-vf-holo .wpl-vf-cta-btn {
  background: linear-gradient(135deg, #7c5cff 0%, #e0319d 50%, #f59e0b 100%);
  background-size: 200% 200%;
  color: #fff;
  box-shadow: 0 12px 32px -8px rgba(224,49,157,.7);
  animation: wplCtaBtnPulse 1.8s ease-out infinite, wplCtaHoloShift 4s ease-in-out infinite;
}
@keyframes wplCtaHoloShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Responsive: bajar tamaños en marcos verticales pequeños */
@media (max-width: 480px) {
  .wpl-vf-cta-inner { padding: 18px 14px; gap: 10px; }
  .wpl-vf-cta-btn { padding: 13px 26px; }
}