/* === Burbuja de video flotante: se expande en el mismo lugar, sin ventana emergente ===
   Vive en la esquina inferior derecha; el botón de WhatsApp se movió a la
   izquierda para no chocar. El recorte del círculo se desplaza hacia arriba
   porque en este video la cara queda por encima del centro del encuadre. */
.video-cta {
  position: fixed; bottom: 26px; right: 26px; z-index: 65;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  transition: transform 0.3s ease;
}
.video-cta[hidden] { display: none; }

.video-cta-mini { position: relative; animation: vctaRebote 3s ease-in-out infinite; transform-origin: bottom center; }

.video-cta-x {
  position: absolute; top: -6px; right: -6px; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; color: #7C8A92; border: 1px solid rgba(16,24,30,0.12);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18); cursor: pointer; font-size: 1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; z-index: 3; padding: 0;
}
.video-cta-x:hover { color: var(--ink, #10181E); }

.video-cta-bubble {
  position: relative; width: 132px; height: 132px; border-radius: 50%;
  border: 4px solid #fff; box-shadow: 0 18px 40px -14px rgba(14,46,66,0.5);
  cursor: pointer; padding: 0; overflow: hidden; display: block;
  background: var(--primary, #1E6B52) url(/video/poster.jpg) center 40%/cover;
  transition: transform 0.25s; animation: vctaPulso 2.4s ease-out infinite;
}
.video-cta-bubble:hover { transform: scale(1.06); }
.video-cta-prev { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
.video-cta-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.3); pointer-events: none; }
.video-cta-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(0,0,0,0.22); transition: background 0.2s; pointer-events: none;
}
.video-cta-bubble:hover .video-cta-play { background: rgba(0,0,0,0.32); }
.video-cta-tip {
  position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; color: #fff;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  text-shadow: 0 1px 5px rgba(0,0,0,0.7); pointer-events: none;
}

/* Reproductor expandido, en el mismo sitio que la burbuja */
.video-cta-player { position: relative; animation: vctaAparece 0.25s ease; }
.video-cta.collapsed .video-cta-player { display: none; }
.video-cta:not(.collapsed) .video-cta-mini { display: none; }
.video-cta-full {
  height: min(66vh, 480px); width: auto; max-width: 84vw;
  border: 4px solid #fff; border-radius: 18px; box-shadow: 0 24px 54px -18px rgba(14,46,66,0.55);
  background: #000; display: block;
}
.video-cta-min {
  position: absolute; top: -10px; right: -10px; width: 32px; height: 32px; border-radius: 50%;
  background: #fff; color: var(--ink, #10181E); border: none; box-shadow: 0 10px 24px -10px rgba(14,46,66,0.5);
  cursor: pointer; font-size: 1.25rem; line-height: 1; z-index: 3;
  display: flex; align-items: center; justify-content: center; padding: 0;
}

.video-cta-book {
  display: inline-flex; align-items: center; gap: 9px; background: var(--primary, #1E6B52); color: #fff;
  padding: 11px 20px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; text-decoration: none;
  white-space: nowrap; box-shadow: 0 14px 30px -12px rgba(30,107,82,0.75); transition: background 0.2s, transform 0.2s;
}
.video-cta-book:hover { background: var(--dark, #0E2E42); color: #fff; transform: translateY(-2px); }

.video-cta-bubble:focus-visible, .video-cta a:focus-visible, .video-cta button:focus-visible {
  outline: 2px solid var(--primary, #1E6B52); outline-offset: 3px;
}

/* El pulso usa el verde de la marca. */
@keyframes vctaPulso {
  0%   { box-shadow: 0 18px 40px -14px rgba(14,46,66,0.5), 0 0 0 0 rgba(30,107,82,0.6); }
  70%  { box-shadow: 0 18px 40px -14px rgba(14,46,66,0.5), 0 0 0 18px rgba(30,107,82,0); }
  100% { box-shadow: 0 18px 40px -14px rgba(14,46,66,0.5), 0 0 0 0 rgba(30,107,82,0); }
}
@keyframes vctaRebote {
  0%, 45%, 100% { transform: translateY(0); }
  55% { transform: translateY(-18px); }
  65% { transform: translateY(0); }
  73% { transform: translateY(-10px); }
  81% { transform: translateY(0); }
  88% { transform: translateY(-4px); }
  94% { transform: translateY(0); }
}
@keyframes vctaAparece { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Cuando aparece la barra de salida, la burbuja sube para no quedar debajo. */
body.exit-cta-on .video-cta { transform: translateY(calc(-1 * var(--exit-cta-h, 104px) - 8px)); }

@media (max-width: 768px) {
  .video-cta { bottom: 16px; right: 12px; gap: 9px; }
  .video-cta-bubble { width: 104px; height: 104px; }
  .video-cta-book { font-size: 0.74rem; padding: 9px 15px; }
  .video-cta-full { height: min(64vh, 440px); }
}
@media (prefers-reduced-motion: reduce) {
  .video-cta-mini, .video-cta-bubble { animation: none; }
  .video-cta-player { animation: none; }
  .video-cta { transition: none; }
}