:root{
  --sr-video-primary:#6d5dfc;
  --sr-video-primary-2:#4f46e5;
  --sr-video-white:#ffffff;
  --sr-video-border:rgba(255,255,255,.72);
  --sr-video-pill-bg:rgba(255,255,255,.08);
  --sr-video-overlay:linear-gradient(180deg, rgba(15,23,42,.04) 0%, rgba(15,23,42,.18) 100%);
  --sr-video-shadow:0 24px 64px rgba(15,23,42,.18);
  --sr-video-radius:34px;
}

/* VIDEO BLOQUE */

.sr-video{
  position:relative;
  display:block;
}

/* CONTENEDOR VIDEO */

.sr-video__trigger{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  border:0;
  border-radius:var(--sr-video-radius);
  overflow:hidden;
  background:#0f172a;
  cursor:pointer;
  box-shadow:var(--sr-video-shadow);
}

/* VIDEO LOOP PREVIEW */

.sr-video__poster{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  background:#0f172a;
}

/* OVERLAY */

.sr-video__shade{
  position:absolute;
  inset:0;
  background:var(--sr-video-overlay);
  pointer-events:none;
}

/* BOTON WATCH VIDEO */

.sr-video__watch{
  position:absolute;
  right:35px;
  bottom:35px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:64px;
  padding:12px 24px 12px 10px;
  border:1px solid var(--sr-video-border);
  border-radius:999px;
  background:rgba(0,0,0,.15);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:var(--sr-video-white);
  transition:transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.sr-video__watch-icon{
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.75);
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:none;
  color:var(--sr-video-white);
  background:rgba(255,255,255,.04);
}

.sr-video__watch-text{
  font-size:15px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:-0.02em;
  color:var(--sr-video-white);
  white-space:nowrap;
}

/* HOVER */

.sr-video__trigger:hover .sr-video__watch{
  transform:translateY(-2px);
  background:rgba(0,0,0,.24);
  border-color:rgba(255,255,255,.92);
  box-shadow:0 12px 28px rgba(15,23,42,.16);
}

.sr-video__trigger:hover .sr-video__watch-icon{
  background:rgba(255,255,255,.1);
}

/* FOCUS */

.sr-video__trigger:focus-visible,
.sr-video__close:focus-visible{
  outline:2px solid var(--sr-video-primary);
  outline-offset:3px;
}

/* MODAL */

.sr-video__modal{
  position:fixed;
  inset:0;
  z-index:10080;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:40px;
}

/* HIDDEN */

.sr-video__modal[hidden]{
  display:none;
}

/* BACKDROP */

.sr-video__backdrop{
  position:absolute;
  inset:0;
  border:0;
  background-color: rgba(31, 32, 41, 0.75);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  cursor:pointer;
}

/* CONTENEDOR VIDEO */

.sr-video__dialog{
  position:relative;
  z-index:1;
  width:min(1000px, calc(100vw - 64px));
  border-radius:18px;
  overflow:visible;
}

/* BOTON CERRAR */

.sr-video__close{
  position:absolute;
  top:-18px;
  right:-18px;
  z-index:3;
  width:50px;
  height:50px;
  border:0;
  border-radius:50%;
  background:#fff;
  color:#6b7280;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(15,23,42,.22);
  transition:transform .18s ease, color .18s ease;
}

.sr-video__close:hover{
  transform:scale(1.04);
  color:#111827;
}

/* VIDEO FRAME */

.sr-video__frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.35);
}

.sr-video__frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* BLOQUEAR SCROLL */

body.sr-video-open{
  overflow:hidden;
}

/* TABLET */

@media (max-width:900px){

  .sr-video__watch{
    right:20px;
    bottom:20px;
    min-height:56px;
    padding:10px 18px 10px 10px;
    gap:10px;
  }

  .sr-video__watch-icon{
    width:38px;
    height:38px;
  }

  .sr-video__watch-text{
    font-size:14px;
  }

  .sr-video__dialog{
    width:calc(100vw - 18px);
  }

  .sr-video__close{
    top:-14px;
    right:-2px;
    width:46px;
    height:46px;
  }

}

/* MOVIL */

@media (max-width:640px){

  .sr-video__watch{
    right:14px;
    bottom:14px;
    min-height:50px;
    padding:8px 14px 8px 8px;
    gap:8px;
  }

  .sr-video__watch-icon{
    width:34px;
    height:34px;
  }

  .sr-video__watch-text{
    font-size:13px;
  }

  .sr-video__dialog{
    width:calc(100vw - 12px);
  }

}

/* REDUCED MOTION */

@media (prefers-reduced-motion:reduce){

  .sr-video__watch,
  .sr-video__close{
    transition:none;
  }

}