/* ============================================================
   VIDEO — presentación + CTA obligatorio
   ============================================================ */
.video-sec{padding:clamp(64px,8vw,110px) 0}
.video-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.video-box{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius-box);border:1px solid #232323;overflow:hidden;cursor:pointer;
  background:repeating-linear-gradient(135deg,#0d0d0d,#0d0d0d 14px,#111 14px,#111 28px);
  display:flex;align-items:center;justify-content:center;transition:border-color .25s,transform .35s var(--ease-out),box-shadow .35s}
.video-box:hover{border-color:var(--color-cyan);transform:scale(1.012);box-shadow:0 24px 70px rgba(51,214,196,.12)}

/* el video real: oculto hasta reproducir para conservar el fondo de diseño */
.video-box video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.video-box.playing video{opacity:1}
.video-box.playing{cursor:default}
.video-box.playing .play{display:none}

/* botón de reproducción — va después del <video> en el DOM, así que ya pinta encima */
.play{width:88px;height:88px;border-radius:var(--radius-pill);background:var(--color-cyan);display:flex;align-items:center;justify-content:center;position:relative;transition:transform .25s}
.play::before{content:"";position:absolute;inset:-14px;border-radius:var(--radius-pill);border:2px solid rgba(51,214,196,.4);animation:ring 2.2s infinite}
@keyframes ring{from{transform:scale(.85);opacity:1}to{transform:scale(1.35);opacity:0}}
.video-box:hover .play{transform:scale(1.08)}
.play s{margin-left:7px;border-left:26px solid var(--color-bg);border-top:16px solid transparent;border-bottom:16px solid transparent}

/* CTA bajo el video */
.video-cta{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:34px;text-align:center}