/* Escena del video de presentación: video + bandeja donde aparecen chips y precio */
.video-escena { position: relative; width: min(640px, 100%); margin-top: 32px; }

.video {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--fondo-2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
iframe.video { height: auto; }
.video__portada { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.video:hover .video__portada { transform: scale(1.02); }
.video:focus-visible { outline: 3px solid var(--acento-2); outline-offset: 3px; }
.video__play {
  position: absolute; inset: 0; margin: auto;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 8px 30px rgba(123, 108, 255, .55);
  transition: transform .15s, background .15s;
}
.video__play::after {
  content: "";
  position: absolute; top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 14px 0 14px 23px;
  border-color: transparent transparent transparent #fff;
}
.video:hover .video__play { background: #6a5af0; transform: scale(1.06); }

/* La bandeja queda debajo del video (z-index menor) para que todo salga "desde atrás" */
.video-bandeja { position: relative; z-index: 1; min-height: 60px; }

.video-bandeja__chips { position: absolute; inset: 0; pointer-events: none; }
.grupo-chips {
  position: absolute; top: 14px; left: 0; right: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.chip-video {
  padding: 6px 14px;
  border: 1px solid var(--acento);
  border-radius: 999px;
  background: var(--fondo-2);
  color: var(--texto);
  font-size: .9rem;
  font-weight: 650;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(123, 108, 255, .25);
  opacity: 0;
  transform: translateY(-140%) scale(.9);
  transition: transform .5s cubic-bezier(.2, .9, .3, 1.3), opacity .3s;
}
.chip-video.visible { opacity: 1; transform: none; }
.video-escena.con-precio .video-bandeja__chips { display: none; }

/* Precio: un cajón que se abre desde el borde inferior del video y queda fijo */
.precio-revelado {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .6s ease, visibility .6s;
}
.precio-revelado.visible { grid-template-rows: 1fr; visibility: visible; }
.precio-revelado__recorte { overflow: hidden; }
.precio-revelado__tarjeta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 20px;
  margin-top: 16px;
  padding: 18px 22px;
  border: 1px solid var(--acento);
  border-radius: var(--radio);
  background: linear-gradient(135deg, rgba(123, 108, 255, .2), var(--fondo-2) 70%);
  transform: translateY(-60%);
  transition: transform .7s cubic-bezier(.2, .9, .3, 1.15);
}
.precio-revelado.visible .precio-revelado__tarjeta { transform: none; }
.precio-revelado__etiqueta { color: var(--acento-2); font-size: .85rem; font-weight: 600; }
.precio-revelado__valor { font-size: 2.2rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }

/* Efectos puntuales sincronizados con lo que se dice en el video */
@keyframes video-brillo {
  0%, 100% { box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 0 0 0 rgba(123, 108, 255, 0); }
  35% { box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 0 0 4px rgba(123, 108, 255, .6), 0 0 70px 12px rgba(123, 108, 255, .45); }
}
@keyframes video-impacto {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.035); }
  35% { transform: scale(.99); }
  55% { transform: scale(1.008); }
}
@keyframes boton-latido {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(123, 108, 255, .6); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 12px rgba(123, 108, 255, 0); }
}
.video.efecto-brillo { animation: video-brillo 1.6s ease-out; }
.video.efecto-impacto { animation: video-impacto .7s cubic-bezier(.2, .9, .3, 1), video-brillo 1.6s ease-out; }
.boton.efecto-latido { animation: boton-latido .9s ease-in-out 3; }

/* En escritorio el video va al lado del texto para que entre en la primera pantalla */
@media (min-width: 960px) {
  .hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    column-gap: 56px;
    align-content: start;
  }
  .hero > * { grid-column: 1; justify-self: start; }
  .hero > .video-escena {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: center;
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .video.efecto-brillo, .video.efecto-impacto, .boton.efecto-latido { animation: none; }
  .chip-video, .precio-revelado__tarjeta { transform: none; }
}