/* ===================== VIDEO CORPORATIVO DJK ===================== */
.vid-modal{
  position:fixed;inset:0;z-index:9999;display:none;
  align-items:center;justify-content:center;padding:24px;
}
.vid-modal.open{display:flex}
.vid-backdrop{position:absolute;inset:0;background:rgba(3,10,26,.86);backdrop-filter:blur(6px)}
.vid-frame{
  position:relative;width:min(960px,100%);aspect-ratio:16/9;
  background:#04101f;border-radius:18px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.55);border:1px solid rgba(96,165,250,.25);
  display:flex;flex-direction:column;
}
@media(max-height:620px){.vid-frame{aspect-ratio:auto;height:100%}}

/* --- Escenario --- */
.vid-stage{position:relative;flex:1;overflow:hidden;background:#04101f}
.vid-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.12);animation:vidKen 12s ease-out forwards;filter:saturate(1.05)
}
.vid-bg.grad{
  background:radial-gradient(120% 120% at 20% 10%,#13315c 0%,#0b1e3b 45%,#04101f 100%);
  animation:none;transform:none
}
@keyframes vidKen{from{transform:scale(1.12)}to{transform:scale(1)}}
.vid-overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(4,16,31,.92) 0%,rgba(4,16,31,.72) 45%,rgba(4,16,31,.45) 100%)
}
.vid-grid{position:absolute;inset:0;opacity:.18;
  background-image:linear-gradient(rgba(96,165,250,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(96,165,250,.25) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(circle at 30% 50%,#000,transparent 75%)}

/* --- Contenido / texto de escena --- */
.vid-content{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(24px,5vw,64px);color:#fff;max-width:760px
}
.vid-content.in .v-eyebrow{animation:vidUp .6s .05s both}
.vid-content.in .v-title{animation:vidUp .7s .15s both}
.vid-content.in .v-sub{animation:vidUp .7s .3s both}
.vid-content.in .v-service{animation:vidPop .6s .1s both}
.vid-content.in .v-feats li{animation:vidUp .6s both}
.vid-content.in .v-feats li:nth-child(1){animation-delay:.2s}
.vid-content.in .v-feats li:nth-child(2){animation-delay:.4s}
.vid-content.in .v-feats li:nth-child(3){animation-delay:.6s}
.vid-content.in .v-logo{animation:vidPop .8s .1s both}
.vid-content.in .v-tag{animation:vidUp .7s .5s both}
.vid-content.in .v-contacts li{animation:vidUp .5s both}
.vid-content.in .v-contacts li:nth-child(1){animation-delay:.3s}
.vid-content.in .v-contacts li:nth-child(2){animation-delay:.45s}
.vid-content.in .v-contacts li:nth-child(3){animation-delay:.6s}
.vid-content.in .v-contacts li:nth-child(4){animation-delay:.75s}
@keyframes vidUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes vidPop{from{opacity:0;transform:translateY(20px) scale(.94)}to{opacity:1;transform:none}}

.v-eyebrow{font-family:Poppins,sans-serif;font-weight:700;letter-spacing:.22em;font-size:.72rem;
  text-transform:uppercase;color:#22d3ee;margin-bottom:14px}
.v-title{font-family:Poppins,sans-serif;font-weight:800;line-height:1.1;
  font-size:clamp(1.5rem,4.4vw,2.9rem);margin-bottom:14px}
.v-title span{background:linear-gradient(90deg,#60a5fa,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.v-sub{font-size:clamp(.95rem,1.9vw,1.18rem);line-height:1.6;color:#cfe0f5;max-width:620px}

/* servicios */
.v-service{display:flex;align-items:center;gap:22px;background:rgba(11,30,59,.55);
  border:1px solid rgba(96,165,250,.3);border-radius:16px;padding:24px 26px;backdrop-filter:blur(4px);max-width:640px}
.v-ico{flex:none;width:74px;height:74px;border-radius:16px;display:grid;place-items:center;
  font-size:1.9rem;color:#fff;background:linear-gradient(135deg,#2563eb,#22d3ee);
  box-shadow:0 10px 26px rgba(34,211,238,.35)}
.v-service h3{font-family:Poppins,sans-serif;font-weight:700;font-size:clamp(1.1rem,2.4vw,1.5rem);margin-bottom:6px}
.v-service p{color:#cfe0f5;font-size:clamp(.9rem,1.7vw,1.05rem);line-height:1.5}

/* diferenciadores */
.v-feats{list-style:none;margin-top:8px;display:grid;gap:12px;max-width:560px}
.v-feats li{display:flex;align-items:center;gap:14px;font-size:clamp(.95rem,1.8vw,1.12rem);color:#e6f0fb}
.v-feats i{color:#22d3ee;font-size:1.05rem}

/* cierre / final */
.vid-content.center{align-items:center;text-align:center;max-width:100%}
.v-logo{width:min(340px,68%);margin-bottom:22px;filter:drop-shadow(0 8px 24px rgba(0,0,0,.4))}
.v-logo.icon{width:min(120px,30%)}
.v-tag{font-size:clamp(1rem,2.1vw,1.3rem);color:#cfe0f5;max-width:560px;line-height:1.5}
.v-contacts{list-style:none;display:grid;gap:12px;margin-top:22px}
.v-contacts li{display:flex;align-items:center;gap:12px;justify-content:center;font-size:clamp(.92rem,1.8vw,1.1rem);color:#e6f0fb}
.v-contacts i{color:#22d3ee;width:22px}

/* marca de agua */
.vid-watermark{position:absolute;top:18px;right:20px;height:30px;opacity:.9;z-index:3}

/* contador de servicios */
.v-counter{position:absolute;left:clamp(24px,5vw,64px);bottom:74px;color:#7fa6d6;
  font-family:Poppins,sans-serif;font-weight:600;font-size:.82rem;letter-spacing:.08em}

/* --- Controles --- */
.vid-controls{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:center;gap:14px;
  padding:14px 18px;background:linear-gradient(0deg,rgba(2,8,18,.9),transparent)}
.vid-progress{flex:1;height:5px;border-radius:6px;background:rgba(255,255,255,.18);overflow:hidden}
.vid-progress span{display:block;height:100%;width:0;border-radius:6px;
  background:linear-gradient(90deg,#2563eb,#22d3ee)}
.vid-btn{width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;flex:none;
  background:rgba(255,255,255,.12);color:#fff;font-size:.95rem;display:grid;place-items:center;transition:.2s}
.vid-btn:hover{background:#2563eb}
.vid-close{position:absolute;top:14px;left:16px;z-index:6;background:rgba(2,8,18,.55)}
.vid-voice{max-width:170px;height:34px;border-radius:18px;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.1);color:#fff;font-size:.78rem;padding:0 12px;cursor:pointer;outline:none}
.vid-voice option{color:#0b1e3b}
@media(max-width:560px){.vid-voice{max-width:110px;font-size:.7rem}}

/* overlay de inicio / fin */
.vid-cover{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;text-align:center;
  background:rgba(4,16,31,.6);backdrop-filter:blur(2px)}
.vid-cover.hide{display:none}
.vid-cover p{color:#cfe0f5;font-family:Poppins,sans-serif;font-weight:600;letter-spacing:.04em}
.vid-bigplay{width:84px;height:84px;border-radius:50%;border:0;cursor:pointer;color:#fff;font-size:1.8rem;
  background:linear-gradient(135deg,#2563eb,#22d3ee);box-shadow:0 14px 40px rgba(34,211,238,.5);
  display:grid;place-items:center;transition:.2s;animation:vidPulse 2s infinite}
.vid-bigplay:hover{transform:scale(1.07)}
@keyframes vidPulse{0%,100%{box-shadow:0 14px 40px rgba(34,211,238,.5)}50%{box-shadow:0 14px 54px rgba(34,211,238,.85)}}

@media(max-width:560px){
  .vid-modal{padding:0}
  .vid-frame{border-radius:0;height:100%;aspect-ratio:auto}
  .v-service{flex-direction:row;gap:16px;padding:18px}
  .v-ico{width:56px;height:56px;font-size:1.4rem}
}